Types of headless CMS

technology
Mandy Trilck

Mandy Trilck

A headless CMS (Content Management System) separates content from the presentation layer. It connects content to frontend and gets retrieves and renders according to needs. This method is increasingly popular, as it gives developers freedom to build frontend with technology of their choice.

blog image

Which headless CMS to choose?

Many headless CMS options are available today, and not all of There are many headless CMs options available today, but not all of them have the same structure. While some CMS’ use APIs to pull data, others come from Github. Some are self-hosted, and others are hosted by third-party cloud services.

If all of this doesn’t make quite sensem don’t worry! We’ll describe main types of headless CMS, with examples for each.

Self-hosted, open-source CMS

An open-source CMS (aka: free) lets you download and install it on your server of preference. They can run locally on your own computer for free. If you want access from outside, you can install it on a server with hosting service for a monthly fee.

The CMS connects via an API to a website’s frontend. When the website loads on browser, it makes API calls with JavaScript to fetch the CMS’s data.

Headless WordPress

WordPress is more famous for its non-headless version, but Headless WordPress uses the same dashboard as the regular. There are pluging, like Custom Post Type UI, or Advanced Custom Fields, to exdend data types able to be stored.

A thing to notice is that, since backend is disconnected from presentation, the majority of WordPress plugins are not useful. In a headless setup scenario, WordPress acts only as a database and content manager.

You have two ways to connect a headless Worpress site: a REST API and WPGraphQL‘s plugin. GraphQL is an easier way to make data queries, as it only calls for exact needed data.

At the time of uploading this post, the plugin is still under development. You may want to check its current status to see if the newest version is available.

— Other examples include Strapi and Ghost (with a paid hosted version, too)

Git-based CMS

A Git-based CMS is the most developer-centric option. This type of CMS connects to the Git repository when you store a site’s code.

While the platform provides an admin panel, to create content, the content itself lays on the repository. There’s no external database: the content is directly in a folder in the codebase.

Netlify CMS 

Netlify is a popular static website hosting platform, that also offers an open-source CMS. This CMS has a familiar dashboard to edit content, that any non-technical person can use. Behind scenes, admin panel is a React app, assisting the Git workflow.

When a team member posts content, the changes go directly to Github. Its out-of-the-box admin options are easy and goog for blogging purposes.

To add an option to to the content model, put the corresponding line of code to the config.ylm file. It’s also possible to make further customizations, since the admin code is open-source.

For developers, installation and basic configuration are simple. The content stores as markdown files, an easy file type to process in the frontend code.

— Other examples include Grav and Crafter

PaaS (Platform as a Service)

A PaaS is a third-party service, that hosts content in the cloud.

These platforms charge a fee depending of the plan you’re signing up for. Some of them have a free tier, allowing you to change plans once the site gets more traffic.

Begin a paid service, a PaaS often will have a fancy dashboard, and wide content modeling possibilities. They’re a tempting choice, especially when having free tier at the beginnig.

Even if you start free, companies could change their pricing or usage, forcing you to switch to a higher plan. However, it’s important to note that they’re also the safest option.

Often, a PaaS have plugins and a starter site, available for static-site generators, like Gatsby. This will make conextion to the service quicker and easier. For other types of sites, developers have to dive into documentation to understand how to work with the PaaS’ API. Make sure that this process isn’t overly complicated, and has strong documentation and customer support.

Sanity

Sanity is a third-party service, with a fully extendable content platform, and an attractive editor interface.

In the beginning, some developer setup will be required. But, once it implements, any member can login and add content. Since it’s on the cloud, there’s no need for server setups or maintenance. Also, additions and changes are immediately synched with the cloud.

This SaaS is a React app, and its install needs to be in a local environment via NPM. You can choose a template (blog, ecommerce, etc.) and then customize it. The content modeling handles with JS objects. So, in order to make adjustments, you’ll only need to add or substract lines of code.

It has its own query language, GROQ. It’s similar to GraphQL, but it requires some documentation reading to learn about it. Oh the other hand, it comes with a IDE plugin, that makes writing queries easier. Sanity has a free tier, with a pay-as-you-go structure, if you go over the monthly usage limits.

— Other examples include Contentful and Prismic.

Conclusion

Any of these can work with the right amount of development time. However, some of them fit better for certain usages.

The simplicity of a Git-bases option is perfect for blogging. By, contrast, large teams and sites with complex data types may benefit more from a PaaS offer. Last but not least, project that want fixed content costs, may be more confortable with an open-source option.

When knowing what’s your case, and understanding what each CMS offers, it’s easy to find the right one.

Helios – an innovative financial risk analysis tool

The business risks of overlooking software documentation

12 CSS tips and best practices