Know your types of headless CMS

technology
Mandy Trilck

Mandy Trilck

A CMS (content management system) that is “headless” seperates content from the presentation layer. Content is connected to a frontend and retrieved and rendered as needed. Working this way has become increasingly popular as it gives developers the freedom to build the frontend of a website with the technologies they prefer.

Which headless CMS to choose?

Many headless CMS options are available today and not all have the same structure. For example, some use APIs to pull data and others are Github based. Some are self-hosted and others are hosted by third-party cloud services.

If this doesn’t entirely make sense, don’t worry. Here we will describe the main types of headless CMS, along with an example of each.

blog image
Self-hosted, open-source CMS

An open-source CMS (read: free) is one that you can download and install on your choice of server. They can be run locally on your own computer for free, or, if you want to be able to access it from outside of this environment, you can install it on a server with a hosting service for a small monthly fee.

The CMS connects via an API to the frontend of a website. When the website loads in the browser, it makes API calls via javascript that fetch the data from the CMS.

Headless WordPress

WordPress is obviously much more famous for its non-headless version. Headless WordPress uses the same classic, easy-to-use dashboard as the regular version. Plugins like Custom Post Type UI and Advanced Custom Fields allow you to extend the data types you can store and use. 

One thing to note is that since the backend is disconnected from the presentation layer, the majority of WordPress plugins aren’t useful. In a headless setup, WordPress is acting only as a database and content manager.

There are two ways to connect a headless WordPress site: a REST API and the WPGraphQL plugin. GraphQL is a more performant, easier way to make data queries, as it only calls for the exact data needed. While functioning, at the time of this writing the plugin is still under development, so it’s worth checking the current status to see if version 1.0 has been released or not.


Other examples: Strapi, Ghost (which has a paid, hosted version too)

Git-based CMS

A Git-based CMS is the most developer centric of all the options. This type of CMS connects to the Git repository where a site’s code is stored. While the platform provides an admin panel to create content, the content itself is sent to the repository. There’s no external database–content is stored in a folder directly in the codebase.

Netlify CMS 

Netlify is a popular static website hosting platform that also offers an open source (free) CMS.

This CMS has a familiar dashboard to edit content that any non-technical person can login and use. Behind the scenes, the admin panel is a React app that assists the Git workflow. When a team member publishes content, the changes are committed directly to Github.

The out-of-the-box admin options are basic and good for blogging purposes. In order to add an option to the content model, a corresponding line of code has to be added to the config.yml file. It’s possible to make further customizations as needed, since the admin code is all open source.

For developers, installation and basic configuration is simple. Content is stored as markdown files, an easy file type to process in the frontend code.


Other examples: Grav, Crafter

PaaS (Platform as a Service)

A PaaS is a third-party service that hosts content in the cloud. These platforms charge a monthly fee depending on the plan you sign up for, which is based on usage. Some have a free tier and allow you to change plans once your site gets more traffic.

As a paid service, a PaaS will usually have a slick dashboard and wide content modeling possibilities. They are a tempting option, especially when they offer a free tier to get started. Yet it’s good to keep in mind that they are the option that has the most lock in. Even if you start free, the company could change their pricing and/or your usage could go up and force you to switch to a more expensive plan.

For websites made with static site generators like Gatsby, a PaaS will often have a plugin and a starter site available that make getting connected to the service quick and easy.

For other types of websites, developers will need to dive into the documentation to find out how to work with the PaaS’ API. It’s important to make sure that this process isn’t overly complicated and the documentation and customer support are robust.

Sanity

Sanity is a third-party service that offers a fully extendable content platform with an attractive editor interface. While some developer setup is required to install and configure the editor in the beginning, once deployed any team member can easily login to the dashboard and add content. 

Since content is stored in the cloud, no server setup or maintenance is necessary. The other benefit is that additions and changes to content are immediately synched with the cloud, assisting team collaboration.

The Sanity editor is a React app that needs to be installed first in a local environment via NPM. A template (blog, ecommerce, etc.) is chosen and then customized. Content modeling is handled via JS objects, so to make adjustments only a few lines of code need to be added or subtracted in the appropriate files. 

Sanity uses its own query language, GROQ. It’s fairly similar to GraphQL, but still requires some time reading documentation to learn. The platform comes with a IDE plugin that makes writing queries easier.

Sanity offers a free tier, with a pay-as-you go structure should you go over the monthly usage limits.


Other examples: Contentful, Prismic

Conclusion

Any of these solutions could work well with the right amount of development time. However, some make more sense for certain use cases. For a blogging site, the simplicity of a Git-based option would be perfect. Large teams and sites with complex data types may benefit the most from the powerful customization options and features that a PaaS offers. For projects that want to make sure their content costs remain fixed, an open-source option may be the most comfortable.

If you’re clear about what your use case is and understand what each CMS offers, it’s easy to find the right choice.

Helios – an innovative financial risk analysis tool

The business risks of overlooking software documentation

12 CSS tips and best practices

Share This