featured image - The Rise Of The Headless CMS

Headless CMS sounds rather gruesome. Zombie web apocalypse. Headless monster websites spreading schlock and gore around the internet.

What is it?

Traditional CMSs have been around since the early days of web development. Platforms like Wordpress, Drupal and Sitecore were designed to store and present fully formatted content. Digital platforms have evolved past websites. There are also apps, mobile sites, digital displays and conversation bots.

A headless CMS outputs your content as data without the fancy formatting.

Why do it?

From a developer perspective, a headless CMS gives developers a lot more freedom to build without the restrictions imposed by traditional CMSs.

From a business perspective, it can save money. Imagine your business is a shop. You want a website. You want to run displays in your store or displays in a waiting room. Maybe you plan to launch an app. A headless CMS allows you to create content for your website. That same CMS can drive the instore displays. The same CMS can also supply data for your app when you are ready.

Where possible, it is always best to have single point of truth. Mistakes happen when data is put in multiple times. Wouldn't it be nice to have one place that drives all your applications? A headless CMS solves this problem.

This approach can lead to faster web pages because they have prebuilt.

A headless CMS can also offer cheaper and easier scaling. As your site and traffic grows, separating the content from the page means you can add more server capacity when required without having to move your site or take it down to add more capacity.

This option gives better security because the front and the back are separated. If you choose a cloud base headless CMS you are also using their expertise and experience. If you choose to host your own headless CMS, you can do that. There are quite a few out there to choose from.

How to do it

The most common approach is to use a JAMstack. JAM stands for JavaScript, API's and Markup.

JavaScript runs in almost every browser. It can build the page by loading the data and page elements. It is often built with a frontend JavaScript framework such as Angular, React, Vue or Svelte. It can also be in plain vanilla Javascript.

API: Application Program Interface. The API supplies the content. The JavaScript sends a request to the API and it sends back the data. This could be a self hosted API or a cloud service.

Markup. This is the template. It is prebuilt before deployment.

Git and API Headless CMS

There are many headless CMSs to chose from. The come in 2 flavours: Git based and API driven.

Git Based

Git is a version control system. It used in a lot of software development. It stores a codebase plus any changes. This makes is easy to track changes and roll back changes too. Some headless CMS's use Git.

It works like this:

  1. You write your content,
  2. You push the changes to a Git repository.
  3. Your headless CMS sees the changes and builds a new version of your site.

It contains full version control. This is handled by Git. Don't want the changes? Roll back to a previous commit and push that. The website will be rebuilt as the previous version.

Git based can be an elegant solution but it does have some disadvantages.

  • Many use markdown to write the content. This can be seen as being needlessly nerdy when there are plenty of good WYSIWYG editors out there. In its defence, markdown produces very clean HTML and it is not that hard to learn. Maybe I'll do a future post on markdown.
  • It's not a good solution for integrating with multiple applications.
  • It can become very cumbersome if you have a lot of content.

API Driven

This is where you have a content engine powered by a database. There is a backend where you can add, edit or delete content in much the same way as you would with a WordPress or Drupal site. This is the best solution if you are using the content on different platforms

There are 2 ways to do API driven CMS's. Self hosted and cloud based.

Self Hosted

There are a number of CMS's you can install and run yourself. Four examples are: Strapi, Ghost, Directus and Contenta.

Strapi and Ghost run on the Node.js framework. They require a Node.js server such as Express to run. They both active developer communities behind them. They both claim to be very fast. We haven't fully tested them but they do seem to live up to that.

Directus and Contenta run on the traditional LAMP technology stack. Linux, Apache, MySQL and PHP. This means they can be installed on more servers. Directus is built from the ground up. It seems to be quite solid. It also offers a cloud based version Contenta is a fork of Drupal. Its focus is producing an API.

Cloud Based

A cloud base headless CMS has everything installed and ready to go. They tend to be a more expensive option than self hosted but they do offer some advantages:

  • Everything is done, so it saves you the time of setting up a service yourself. Sign up and you are good to go.
  • They run all the maintenance and updates. They look after all the security updates.

Disadvantages Of Going Headless

There may be hidden costs such as training to learn a new system. Having said that, it is almost impossible to launch any change without introducing a learning curve.

You can't easily preview what the content looks like in the website before deploying

Summary

There is no need for change unless there is a case for change. The traditional approach of a CMS that does everything is still quite valid. There is a lot of hype about headless and it not suitable for every site. Its main advantage is that it makes pushing content to multiple platforms more streamlined.

Further Reading

Posts