A Headless CMS (Content Management System) separates content from the presentation layer. It connects content to the front end and retrieves and renders according to needs. As time passes, this method has increased its popularity. That happens because it allows devs to build front-ends with the tech of their choice.
Many headless CMs options are available today, but not all have the same structure. While some CMS uses APIs to pull data, others come from Github. Some are self-hosted, while third-party cloud services host others. If all this doesn’t make quite sense, don’t worry! We’ll describe the main types of headless CMS, with examples for each.
An open-source CMS lets you download and install it on your server of preference. They can run locally on your computer for free. If you want to access it from outside, you can install it on a server with a hosting service for a monthly fee. The CMS connects via an API to a website’s front end. When the website loads on the browser, it makes API calls with JavaScript to fetch the CMS’s data.
WordPress is more famous for its non-headless version. Yet, its Headless WordPress uses the same dashboard as the regular. There are plugins, like Custom Post Type UI or Advanced Custom Fields, to extend data types able to store. But there's an important thing to notice. Since the back end doesn't connect with the presentation, most WordPress plugins are useless. WordPress is only a database and content manager in a headless setup scenario.
You have two ways to connect a headless WordPress 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. The plugin is still under development at the time of uploading this post. 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)
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. The platform itself provides an admin panel. But, to create content, the content itself lies in the repository. There’s no external database: the content is directly in a folder in the codebase.
Netlify is a popular static website hosting platform. Also, it offers an open-source CMS. This CMS has a familiar dashboard to edit the content that non-technical people can use. Behind the scenes, the React app's admin panel assists 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 suitable for blogging purposes.
To add an option to the content model, put the corresponding line of code in the config.yml file. It’s also possible to customize further since the admin code is open-source. For developers, installation and basic configuration are simple. Additionally, it stores the content as markdown files, an easy file type to process in the frontend code. Other examples include Grav and Crafter.
A PaaS is a third-party service that hosts content in the cloud. These platforms charge a fee depending on the plan you’re signing up for. Some have a free tier, allowing you to change plans once the site gets more traffic. As a paid service, PaaS often have fancy dashboards and vast modeling possibilities. They’re an attractive choice, especially when having a free tier at the beginning.
Even if you start free, companies could change pricing or usage, forcing you to switch to a higher plan. Yet, it’s important to note that they’re also the safest option. A PaaS often has plugins and a starter site for static-site generators. That's the case with platforms like Gatsby. These will make quicker and easier connections to the service. Devs must dive into documentation for other types of sites to understand how to work with the PaaS API. Ensure that this process isn’t overly complicated. Further, make sure that it has robust documentation and customer support.
Sanity is a third-party service. Furthermore, it has an entirely extendable content platform and an attractive editor interface. In the beginning, it will need some developer setup. But, once it implements, any member can log in and add content. Since it’s on the cloud, there’s no need for server setups or maintenance. Also, the cloud immediately syncs all additions and changes.
This SaaS is a React app, and its installation needs to be in a local environment via NPM. You can customize a template (blog, eCommerce, etc.). The content modeling handles JS objects. You’ll only need to add or subtract lines of code to make adjustments.
It has its query language, GROQ. It’s like GraphQL but requires reading documentation to learn about it. Yet, it comes with an IDE plugin that makes writing queries easier. Sanity has a free tier with a pay-as-you-go structure if you exceed monthly usage limits. Other examples include Contentful and Prismic.
Any of these can work with the right amount of development time. Yet, some fit better for specific usages. The simplicity of a Git-bases option is perfect for blogging. Large teams and sites with complex data types may benefit more from a PaaS offering. Further, projects that want fixed content costs may choose an open-source option. Knowing your case and understanding what each CMS offers makes it easy to find the right one!
