Choosing The Best Website Framework & Headless CMS

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:

• Step 1: 🏀 Defining Rebranding Goals & Brand Strategy - A Complete Guide
• Step 2: 🚚 How To Pick Your Niche - How My Software Agency Solved This Problem
• Step 3: 🎡 Finding A Branding Freelancer - How To Hire An Expert On A Budget
• Step 4: 💳 Building Our New Branding - The Process To Follow
• Step 5: 🗺️ Website Roadmapping - Planning To Maximize Conversions
• Step 6: 🖊️ How To Write Great Website Copy - Sharing Our Process
• Step 7: 🎨 High Fidelity Design - Prepare And Execute Like An Agency
• Step 8: 😶‍ Choosing The Best Website Framework & Headless CMS

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.

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.

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.

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.

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

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

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.