{"id":49153,"date":"2020-01-06T21:28:21","date_gmt":"2020-01-06T13:28:21","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=49153"},"modified":"2020-01-03T14:49:17","modified_gmt":"2020-01-03T06:49:17","slug":"intro-to-headless-cms","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/intro-to-headless-cms\/","title":{"rendered":"An Introduction to Headless CMS"},"content":{"rendered":"

A headless CMS is a content management system (CMS) that\u2019s separated from the front-end. In other words, it\u2019s a CMS that provides only content through the API either using the RESTful or GraphQL. The term \u201cheadless\u201d comes from the concept of removing the \u201chead\u201d (front-end) from the \u201cbody\u201d (backend or the CMS) that provides the content.<\/p>\n

If you\u2019re familiar with WordPress<\/a>, or other traditional monolithic CMS such as Drupal<\/a> or Joomla<\/a>, then this guide will be easy for you as we\u2019ll be creating the front-end through their templating system usually using their built-in functions and the same language that the CMS is built upon. Let\u2019s get started.<\/p>\n

Why building Headless CMS?<\/h2>\n

Before getting into the guide, I would like to highlight the many advantages of building your site with the Headless CMS setup.<\/p>\n

Firstly, with Headless CMS, you can hide the backend used on the site. As the backend is unknown or hardly discoverable, this may keep your site from being a target of attack like brute-force attack which is common if you\u2019re using open-source CMS like WordPress.<\/p>\n

Secondly, Headless CMS may help in your site\u2019s fast loading speed as it will only make a request to the API and render the content on the fly instead of reloading the whole page when the user is navigating to a new page.<\/p>\n

Thirdly, the developers may be able to break free from the CMS limitation on rendering the content. If the API allows editing the content, for example, the developer may be able to build a tool on the front-end for quick editing.<\/p>\n

And last, but not the least, with Headless CMS, we can easily deliver content to various mediums other than the web such as; mobile and desktop app, IoT and IFTTT, etc. The developers can also use any language to render the content. So it can improve the overall experience for both the developers and the users.<\/p>\n

\"Diagram<\/figure>\n

(All icons by Icons8<\/a>)<\/small><\/p>\n

Headless CMS downsides<\/h2>\n

As good as it sounds, Headless CMS setup also comes with its downsides which you need to consider as well before jumping the ship.<\/p>\n

First of all, there might be a high barrier to entry due to the technological knowledge requires to run Headless CMS setup. You will need two different domains to host the backend and the front-end, both domains will also need SSL certificate installed, and integrating 3rd-party service into the mix, and so forth.<\/p>\n

Second of all, if you\u2019re using a traditional CMS like WordPress, many plugins might not work out of the box. You will need to work it out yourself so the plugin data is accessible through the API.<\/p>\n

Thankfully, with the vast community in WordPress, plugins are available to address this downside, for example, ACF to REST API<\/a> to add custom field data added with ACF to the API, and WP REST Yoast Meta<\/a> which will add the metadata generated by Yoast SOE plugin to the REST API as well.<\/p>\n

How to build Headless CMS?<\/h2>\n

There are plenty of choices today to build a Headless CMS setup. Contenful<\/a>, dotCMS<\/a>, and ButterCMS<\/a> are among prominent names in content API.<\/p>\n

These services only provide the API, and the interface to manage the content. It is up to you how you\u2019d like to present the content. These type of services usually provide an SDK for various programming languages to make it easy for developers to connect and consume the API.<\/p>\n

Furthermore, according to headlesscms.org<\/a>, there are now around 50 of both open-sourced and closed-source CMS to get you up with Headless CMS setup. The list does not include traditional CMS like WordPress, Drupal and Magento which now have content API built-in.<\/p>\n

Using WordPress as a Headless CMS<\/h2>\n

WordPress has REST API built-in since the version 4.4. The API includes endpoints to retrieve the post list and each post\u2019s content, and edit the post. Once you have this API, you can start creating a Headless setup.<\/p>\n

In this guide, instead of starting from scratch, we will be using Headless WP Starter<\/a> which already has everything set up for us. It includes WordPress installation as well as the front-end setup that renders the content using React.js<\/a>.<\/p>\n

    \n
  1. Headless WP Starter<\/strong> requires Docker. So assuming you haven\u2019t had it installed in your computer, you can head over to these instructions to install Docker and Docker Compose on Windows and macOS.<\/li>\n<\/ol>