Back to blog

Choosing The Best Website Framework & Headless CMS

46 min
Tim Davidson
Tim Davidson

The final step in our rebranding process was determining the best tooling for our new website.

Here are all the steps in our rebranding process in case you want to read through the other stages:

Our original site was built with Gatsby, which at the time was the hot new thing (2018). It was around the time when Next.js started to make waves but hadn’t quite emerged as the React-based static site generator race leader.

Since then, Next.js has become the incumbent for innovative companies as the website framework of choice. But Gatsby is still a completely viable choice, and it’s packed with a bunch of great plugins. So our first mission was to decide what framework to build with.

The next decision was to figure out which CMS we were going to use. We’re official partners of a number of headless CMSs (Storyblok, Prismic, Crystallize, and Contentful), and have played around with most of the popular options (Strapi, Ghost, Netlify CMS), so this wasn’t an easy choice.

Picking the best tech stack is a challenge most businesses struggle with. We get asked blunt questions from our clients along the lines of “what headless CMS is the best” all the time. The answer for us might not be the answer for other companies, but I wanted to walk through our decision-making process and the options we considered.

14 Headless eCommerce Success Stories

See how LARQ improved their conversion rate by 80%, STRONGER increased orders by 167% and Butterfly expanded to a new country every 15 days.

    We won't send you spam. Unsubscribe at any time.

    Choosing the best framework

    The top framework options for 2023 are;

    • WordPress
    • Next.js
    • Gatsby

    This opinion might sit poorly with some people, but unless your business has a super unique use case, one of these frameworks is going to do an excellent job. The only exceptions are eCommerce businesses that have a different stack to choose from or enterprise companies that feel like they need to overpay for Adobe products.

    WordPress

    WordPress is pretty old in terms of technology, but it has a huge community and ecosystem of plugins. A ton of companies have been born in an effort to provide services that make WordPress sites faster and more efficient. As a result, a small WP site can run pretty efficiently and satisfy Google’s CWV.

    Next.js

    Next.js is our React framework of choice for building headless eCommerce stores, websites requiring advanced functionality, and MACH applications. It’s a great, powerful framework, but it’s also technically a backend framework because it’s underpinned by Node.js.

    Gatsby

    Gatsby is moving towards React in terms of functionality and rendering techniques, but it’s a pure frontend framework. There are some problems that Gatsby is still the best at solving (like image optimation), and its ecosystem of plugins makes life easy for simpler use cases.

    Gatsby was our choice

    Our team spend their days working with Next.js, so it seems logical to adopt it as our development framework. However, our old website was built with Gatsby, and we’ve built the best part of a dozen websites with Gatsby. We’ve even created an open-source page builder starter for Gatsby and Netlify CMS that allows landing pages to be created from “blocks” that can be rearranged.

    Netlify CMS login screen
    Netlify CMS login screen

    We’ve written articles comparing Next.js and Gatsby, and there are some legitimate factors separating the two frameworks. Our suggestion on which framework is the “best” always boils down to context. What do you want to do with your site? Do you need server-side rendering? If you don’t, and there’s no need to manage a server, then Gatsby is going to be the right choice.

    Our new site only needed to display a handful of static landing pages and provide a nice experience for new blog content. Gatsby was a good fit for this requirement, which leads nicely into how we picked our CMS.

    Enjoying this post? Get more delivered to your inbox!

    Enter your email to get a monthly round up of technology tips and news.

      We won't send you spam. Unsubscribe at any time.

      Choosing our headless CMS

      Most headless CMS platforms have a generous free tier that works nicely for brochure websites. That doesn’t make the decision easier, though. We could literally pick from any CMS to integrate with our site.

      Our requirements were:

      • Can be configured as a page-builder library
      • Lightweight
      • Gallery
      • Value for money
      • Good SEO features (separating Facebook, Twitter, Instagram descriptions and images, hints for excerpt length, etc)

      Unfortunately, these features don’t all exist in one system, so we decided to use two! That’s the benefit of adopting a modular architecture.

      For our brochure content management, we decided to go with Netlify CMS. Once the content is set up, it won’t change too much so we didn’t need complicated features. I’ll spin up a new landing page or two every month, change a few details, but that’s about it.

      Netlify CMS block system and content preview
      Netlify CMS block system and content preview

      The blog management system, however, needed to be packed with great SEO features. We were using Netlify CMS for our old site, and it was great for small updates but a massive pain for publishing 5 blog articles a week.

      After playing around with a bunch of the available options, we settled on Ghost. It’s got a great name as a direct WordPress replacement. We decided to integrate it with Gatsby, so some native features were forfeited, but it comes with more than enough features to make the content writing experience really nice.

      One example is using slash commands to bring up a context menu with all the various modules that can be inserted into article content

      Ghost's slash commands
      Ghost's slash commands

      Another is the handy post settings menu that provides a ton of configuration options for metadata and how the content is published.

      Ghost has some great SEO settings
      Ghost has some great SEO settings

      Wrapping up

      I've skipped over the part where we actually developed the site, but that's a larger topic that goes a bit too deep for a series of articles about rebranding.

      Picking a website frame and CMS is tricky because there are so many options, and the internet is full of people shouting about what they believe to be best. Hopefully, if your use case is close to ours, you can follow our decision-making process and end up with a solution that works nicely!

      Rebranding finished

      That's it for our rebranding series. We've covered all the major activities we went through in order to build our new brand.

      We would love to hear your thoughts and feedback on the process, especially if you read through the entire thing. Drop our team a comment below, or send us a message with your thoughts.

      More articles

      Adapting to Shopify's New Checkout Extensibility: A Guide for Shopify Plus Merchants

      Wojciech Kałużny

      Should You Use Next.Js for Your Next Project?

      Tim Davidson

      SaaS Pricing: 6 Steps To Nail Your Pricing

      Tim Davidson