Here is a list I created in an attempt to gather all the helpful resources there are about how to work with Gatsby in combination with WordPress. Happy to add new resources, if someone has some awesome suggestions. Please feel free to contribute :)

GitHub logo henrikwirth / awesome-wordpress-gatsby

An awesome list of resources about WordPress as a headless CMS with Gatsby






WordPress Gatsby

A curated list of resources about WordPress as a headless CMS with Gatsby as a Static Site Generator (SSG)


A headless CMS is a back-end only content management system (CMS). Its purpose is to serve content and make it accessible via an API (e.g. REST or GraphQL).

A Static Site Generator (SSG) is a framework or setup, that helps you to generate static websites (HTML/CSS/JS). The source of your data can be anything from local files (e.g. text files or markdown) to APIs (e.g. REST, GraphQL).


Why Gatsby and WordPress?

WordPress is one of the most used CMS in the world and therefore many people already know how to work with it. The typical front-end approach with PHP-based templates is getting more and more problematic in an environment where performance is key. The approach to use WordPress as a headless CMS with normal API calls through JavaScript already exists, but…

The List

Date: 10.11.19

A headless CMS is a back-end only content management system (CMS). Its purpose is to serve content and make it accessible via an API (e.g. REST or GraphQL).

A Static Site Generator (SSG) is a framework or setup, that helps you to generate static websites (HTML/CSS/JS). The source of your data can be anything from local files (e.g. text files or markdown) to APIs (e.g. REST, GraphQL).

Why Gatsby and WordPress?

WordPress is one of the most used CMS in the world and therefore many people already know how to work with it. The typical front-end approach with PHP-based templates is getting more and more problematic in an environment where performance is key. The approach to use WordPress as a headless CMS with normal API calls through JavaScript already exists, but also has the downside of having to make requests to the server and rendering depending on the response. This adds time to load. Gatsby instead, pre-renders the whole site at compile time and therefore the user gets a fully prepared static site on his first request, making it one of the best approaches for performance. Another huge benefit is security, as your WordPress instance can be anywhere, even locally and you don't need to expose any of it to the user. The static Gatsby site therefore, is not hackable. Find further arguments for pros and cons in the resources below.

Contents

Communities

If you need help with anything, there are some highly active communities.

WPGraphQL

Gatsby

Articles

List of articles, that talk about the technology stack in general.

Plugins

List of useful plugins to make WordPress and Gatsby work together.

WordPress

The obvious, that goes along with some of the plugins above:

Gatsby

Tutorials

Note: We differentiate between two ways of using WordPress with Gatsby. There is the gatsby-source-wordpress plugin, that creates a Gatsby-GraphQL schema based on the WP REST API and there is the WPGraphQL way, that pulls directly from a GraphQL schema with the gatsby-source-graphql plugin.

Written Tutorials

General

WPGraphQL

WP REST API

Video Tutorials

WPGraphQL

WP REST API

  • 2018.03: Gatsby.js + WordPress - In this mini-series the developer tries to create a website using Gatsby.js and WordPress.

Starters

List of project starters, that you can clone and start building upon.

Themes

List of gatsby-themes that work with WordPre as a source, which you can use in your Gatsby setup.

  • Twenty Nineteen Gatsby Theme - A port of the Twenty Nineteen WordPress Theme over to Gatsby.
  • Gatsby WordPress Publisher Theme - The Gatsby Publisher Theme allows you to create a headless (or decoupled) WordPress site. This theme will display all of your pages and posts in a static front-end built on React and Gatsby.