After dabbling with Headless CMS' and modern front-end frameworks for some time, I've finally decided to take a deep dive which has resulted in this very site. Follow along with this series to learn with me, and to see what I'm working on in real-time. Let's dig in, shall we?
What is a "Headless" website?
A Headless CMS or Headless Website is a website which de-couples the Content Management System (CMS) and uses a different technology to display the content to site visitors. In the case of Headless WordPress, this means WordPress is used as the CMS on a relatively standard WordPress hosting server, and the front-end is built using (typically) a framework such as Nuxt, Next.js, and React.
Why go headless?
Headless websites come with many advantages, as well as several considerations. In my experience so far, and in my research and planning for large scale website projects I've come up with a few high-level pros and cons.
Pros
- Modern developer experience, tools, and frameworks
- Much more control over the final website output/markup
- Can be finely tuned for performance
- Allows more control over website styles & branding
Cons
- Requires a fair learning curve if coming from traditional WordPress theme/plugin development
- Depending on needs, you may still find yourself building things out in your WordPress theme or plugins
- There's a lot more decisions to make, not as opinionated as standard/non-headless sites
Where to begin?
As mentioned, there's a lot of decisions to make up front. Many of them will impact the rest of your experience. Decisions such as which CMS to use, which front-end framework, not to mention build tools and dependencies. So where to even begin?
Selecting a CMS
I've played around with many purpose-built CMS' for headless sites–most notably Sanity.io, Strapi, and WordPress (there's a great list over at JamStack.org). Ultimately I felt most comfortable with WordPress not only from my many years' experience with it, but also for the users I build sites for. Most marketers, content managers, and business owners are already comfortable using WordPress to manage their content. It's open source, very extendable, and it has a massive 40%+ market share according to W3Techs. Although some other CMS' may be a better fit for a headless website, the ability for end-users' workflow to remain essentially unchanged while also enabling web developers and designers to take advantage of the many benefits of a modern JamStack, it really was no-brainer for me to land on WordPress.
Selecting the front-end framework
Next up, you likely find yourself digging frameworks and site generators. There are so many options out there. Some of the most used for Headless WordPress will revolve around React. There's Nuxt, Next.js, Gatsby, even some Vue.js options. This really comes down to personal preference and projects requirements. Some of the first things I consider when selecting any framework includes support, community, documentation, scalability, security, and ease of use. It's also vital to consider what type of site you're building, and the requirements there of. For example an eCommerce site has entirely different needs from a portfolio site, a blog, or a documentation focused site.
Through this particular project I tried a number of tools including Nuxt, Gatsby, VuePress, and a few more oddballs. Ultimately I landed on FaustJS. Faust is open source and primarily maintained by WP Engine, it is built on Next.js with some specific additions and tools to make the developer experience a bit smoother when working with WordPress as your CMS. It's still quite new, but some of the features included have really enabled me to get going quickly and to accomplish everything I wanted in this super simple site. Since it's built on Next, it's extremely flexible. It's being built so quickly their documentation tends to be out of date here-and-there, but I find that to be that understandable. Luckily they have a great community and support, including a very active GitHub repo and a Discord community where people are willing to help each other out and improve the product. In fact, I ran into a small issue through this project and through a Discord thread learned they are updating the docs based on my experience - pretty awesome to see that level of care and collaboration.
Selecting a hosting provider(s)
After selecting your CMS, in this case WordPress, there's still many decisions. Hosting the back-end, hosting the front-end, the framework, the dependencies and tooling. It's quite the process! Some of these CMS' offer a cloud-based solution, making standing things up super easy–but can be more opinionated in what you can and can't use. There is always the "self hosted" option like AWS, Heroku, or even Digital Ocean.
You can also stand your front-end up in those same hosts - or go with something like Netlify. I went down a few of those paths, and even though I'm quite experienced in working in all these aforementioned hosting providers, it all felt so disconnected and overwhelming to get things going quickly.
Having used managed WordPress hosting for years now, I'm a huge fan. Having experience with most of the big players such as Pantheon, Kinsta, WP Engine, and WordPress.com it's always my go-to for hosting WordPress sites. There are so many benefits of these platforms–not only do they handle server management, they also typically offer things such as automatic plugin updates, dev/staging/production environments, and workflows to tie it all together. Of course I've heard a lot about WP Engine's Atlas solution through my profession. Being so familiar with WP Engine's platform, it seemed like the obvious choice for my needs. Of course that's not to say the other options are any better or worse, this is all personal preference. The real kicker is they are currently offering a free Atlas sandbox for anyone.
Now that I'm feeling self-consious about my WP Engine fanboy-ness so far in this post, I feel obliged to mention this is in no way sponsored by WP Engine–I'm just a fan of their products and a long-time user. Honestly I put off going down the Atlas route for so long because I knew there were other options I should explore. I'm glad I did! But in the end I couldn't pass on the efficiencies gained from their offering and my knowledge of the platform.
That brings us to the now
At this point, I've spent just one weekend plus a few hours building this very small, very simple website. Most of that time has been learning Next.js, the nuances to Headless WordPress, some other new tools like Partytown (which I'll get into in a future post), and troubleshooting many self-inflicted issues. As it goes in this crazy world of web development it's been a great deal of fun rolling up my sleeves and learning all these new things.
From what I experienced trying to spin up a headless site using a combination of hosts and tools, I've been super impressed with Atlas and FaustJS. Atlas makes it unbelievably easy to spin up a new site from scratch (the path I went down) or a blueprint. It also integrates directly to GitHub for super simple deployments and version control.
So, what's my stack?
Keep an eye out! This is going to be the first post in a series following my journey into the headless WordPress world, and it will revolve around the tools I choose to use through the adventure. We'll dig deeper into specific topics, talk about and overcome hurdles together.
Feel free to check out this website's code on GitHub! And please don't shame me for my commit messages ????