Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Headless WordPress Installation with Gatsby.js

What Will You Learn in This Guide?​

In this guide, you will learn how to use WordPress solely for content management.
You will create a static, fast and React-based frontend with Gatsby.js.

🧠 Phase 1 – Technical Summary​

Main Technical Topic: Headless WordPress and Gatsby.js integration
Problem it solves: Classic WordPress structure that is slow, cumbersome and poses a security risk
Steps Followed: WordPress setting → Gatsby installation → GraphQL connection → Template customization

Prerequisites​

  • A working WordPress installation
  • A server with at least 2 GB RAM
  • A computer with Node.js and Gatsby CLI installed
  • Basic JavaScript and React knowledge

Sample environment: Ubuntu 20.04 – WordPress – Node.js – Gatsby

1️⃣ Making WordPress Headless​

Gatsby pulls WordPress data with GraphQL.
That's why two plugins are required.

Required Plugins​

  • WPGraphQL
  • WPGatsby

These plugins turn WordPress into an API that provides data to Gatsby.

Enter the WordPress admin panel:

https://alan-adiniz.com/wp-admin

Install and activate plugins from Plugins → Add New.

Getting GraphQL Endpoint Information​

Go to Settings → GraphQL menu.
Note the endpoint address.

Example:

https://alan-adiniz.com/graphql

This address will be used in Gatsby configuration.

Go to Settings → Permalinks menu.
Select a structure other than Plain.

This setting is required for headless architecture.

Testing GraphQL Connection​

curl --location --request POST 'https://alan-adiniz.com/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{
  "query": "query { posts { nodes { title } } }"
}'
  • This command pulls post titles from WordPress.

2️⃣ Creating a Gatsby Project​

  1. We will use a WordPress compatible starter template.

gatsby new genixnode-blog https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
  • This command creates a ready-made Gatsby WordPress project.
  1. Enter the project directory:

cd genixnode-blog

3️⃣ Connecting Gatsby to WordPress​

  1. Open the main configuration file:

nano gatsby-config.js
  1. Add your GraphQL address:

{
  resolve: `gatsby-source-wordpress`,
  options: {
    url: `https://alan-adiniz.com/graphql`,
  },
}
  • This setting allows Gatsby to pull data from WordPress.
  1. Starting the Development Server

npm run develop

or


yarn develop
  • This command starts the local development environment.
  1. Open from browser:

http://localhost:8000

4️⃣ Customizing Templates (Excerpt Example)​

  1. We will display WordPress post summaries on the page.
  • Template File

{post.excerpt && (
  <div className="post-excerpt">
    {parse(post.excerpt)}
  </div>
)}
  • This code prints the text summary on the screen.
  1. Styling with CSS

.post-excerpt {
  box-shadow: 0 1px 9px rgba(0,0,0,.5);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
  • This style highlights the summary field.

5️⃣ Special Content Type: Video Posts​

  1. A special template can be defined for video format posts in WordPress.

const isVideo = post.postFormats.nodes.some(f => f.name === 'Video');
  • This control separates video contents.

A separate React template is used for video content. YouTube links are automatically embedded.

❓ Frequently Asked Questions (FAQ)​

1. Why should I use Headless WordPress? It provides a faster, more secure and scalable structure.

2. Is it necessary to build after each content? Yes. However, it can be automated with webhook.

3. Is there any disadvantage in terms of SEO? No. Static structure provides an advantage for SEO.

4. Does Live Preview work? Yes. WPGatsby offers live preview.

5. Does hosting cost increase? It usually decreases. Available via Frontend CDN.

🚀 Result​

  • You have established a modern headless architecture with WordPress + Gatsby.js.
  • Content management has become easy and the frontend has become ultra fast.

You can immediately implement your WordPress and Gatsby projects with high performance on the GenixNode platform.