Headless CMS: Gatsby and WordPress

4 min readAug 24, 2021

A headless content management system or headless CMS is a CMS in which the content is separated from its presentation. Content management systems such as WordPress and Drupal store content in a database, and use a collection of HTML-based template files to manage how that content gets presented to visitors.

Coupled CMS vs. Headless CMS

Most traditional or monolithic content management systems are “coupled,” meaning that the content management application (CMA) and the content delivery application (CDA) come together in a single application.

So let’s discuss Headless CMS in detail with WordPress + Gatsby JS integration.

WordPress

WordPress is a free, open-source website creation platform. It is a content management system (CMS) written in PHP that uses a MySQL database more technically. In non-geek speak, WordPress is the easiest and most powerful blogging and website builder in existence today.

Gatsby JS

Gatsby is an open-source framework that combines functionality from React, GraphQL, and Webpack into a single tool for building static websites and apps. Owing to the fast performance of the sites it powers, impressive out-of-the-box features like code splitting, and friendly developer experience, Gatsby is fast becoming a staple of modern web development.

These two works independently and we need a bridge between them, which can be done using GraphQL.

GraphQL

GraphQL is a query language for your API and a server-side runtime for executing queries using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data. GraphQL provides the bridge between the front-end framework and CMS.

Requirements

First of all, we need a fresh basic WordPress setup. Download it from here. Complete the basic setup. Then go to the plugins page and add two plugins.

WP Gatsby

WPGatsby is a free open-source WordPress plugin that optimizes your WordPress site to work as a data source for Gatsby.

2. WP GraphQL

WPGraphQL is a free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site.

Activate both plugins.

3. Node version 10.13.0 or higher

Open a terminal and install gatsby-cli from npm globally using the command npm install -g gatsby-cli. Now you can use gatsby commands using the keyword gatsby.

Terminal Steps

Now follow these steps for a smooth process for fresh gatsby project installation.

Hit the command gatsby new
Following this command gatsby will ask you to name your site and folder name that will be created during installation. Do this accordingly.
Now gatsby will want you to select CMS to select. Use WordPress here and click enter.
Then gatsby will want you to select a styling system. You can select any styling about your need or skip this part for now and install it manually later.
As you see now, there are many additional features that you may want in your gatsby site. Select them as your need and hit enter.
Now you need to enter graphql endpoint from your WordPress CMS site. You can found it in WordPress setup under the GrapQL page. Find the below image for reference.

Copy highlighted URL and paste in the terminal and hit enter. It's done gatsby will install your site according to your selection.

Once installed enter in your gatsby site folder and run the following command.

gatsby develop or npm run develop

Command will start npm and will return localhost URL http://localhost:8000/ for front end view and http://localhost:8000/___graphql for graphql schema.

GraphQL page will look like this. You can use it for queries and build dynamic pages and posts according to your need.

Conclusion

So this was the basic installation/setup of your Headless CMS. You can also install gatsby starter packs which come with pre-coded files and different themes.