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 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 their 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.
If you need help with anything, there are some highly active communities.
WPGraphQL
Gatsby
List of articles, that talk about the technology stack in general.
- 2019.06: Modern Web Development on the JAMstack - A report from Netlify about Modern Web Development on the JAMStack, published by O'REILLY.
List of useful plugins to make WordPress and Gatsby work together.
- WPGraphQL - Documentation - WPGraphQL brings the power of GraphQL to your WordPress site.
- WPGraphQL for Advanced Custom Fields - Exposes Advanced Custom Fields to the WPGraphQL Schema.
- WPGraphQL Polylang Extension - Extends WPGraphQL schema with language data from the Polylang plugin.
- WPGraphQL Gutenberg - Exposes Gutenberg blocks to the WPGraphQL API.
- WPGraphQL Gutenberg ACF - Exposes ACF blocks through GraphQL
- WPGraphQL Meta Query - Adds Meta_Query support to the WPGraphQL Plugin for postObject query args.
- WPGraphQL Tax Query - Adds Tax_Query support to the WPGraphQL Plugin for postObject query args (WP_Query).
- WPGraphQL JWT Authentication - Extends the WPGraphQL plugin to provide authentication using JWT (JSON Web Tokens).
- WPGraphQL Lock - Enables query locking for WPGraphQL by implementing persisted GraphQL queries.
- QL Search - An extension that integrates SearchWP into WPGraphQL.
- WPGraphQl Yoast SEO Plugin - Exposes Yoast SEO data to the WPGraphQL Plugin.
- WPGraphiQL - Extends the WordPress dashboard with a GraphiQL IDE.
- WP API Menus - Extends the WordPress JSON REST API with new routes for WordPress registered menus.
- WP JAMstack Deployments - WordPress plugin for JAMstack deployments on Netlify (and other platforms).
- Headless Mode - Headless mode sets up a redirect for all users trying to access the site. The only requests that are granted admission are ones that are either trying to access the REST API, the WP GraphQL API, or any logged-in user looking to access the headless install to edit or create posts.
The obvious, that goes along with some of the plugins above:
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.
General
- 2018.08: Headless WordPress + Gatsby + Netlify continuous deployment - Guide showing how to create a WordPress + Gatsby + Netlify setup in a few simple steps.
WPGraphQL
- 2019.11: Guide to Gatsby WordPress Starter Advanced with Previews, i18n and more - A tutorial series starting with the basic setup of WordPress and Gatsby with WPGraphQL and then dives into more advanced subjects like deployments, previews, i18n and a page-builder like setup with ACF flexible cotent fields.
- 2019.08: Live Previews with WordPress and Gatsby - Tutorial showing how to use the theme’s higher order component to facilitate previews for WordPress posts and custom post types.
- 2019.08: Gatsby with WPGraphQL, ACF and Gatbsy-Image - A guide, that shows how to implement gatsby-image, so it can be used for WordPress media files.
WP REST API
- 2019.09: Sourcing from WordPress - This guide will walk you through the process of using Gatsby with WordPress Rest Api.
- 2019.07: Complete guide to WordPress menu sourcing in Gatsby - This guide explains how to get the WordPress menu into your Gatsby build.
- 2019.04: How To Build A Blog with WordPress and Gatsby.js - Tutorial (3 Parts) teaching you how to build a blog with WordPress and Gatsby.
- 2018.10: Build a blog with React, WordPress using Gatsby - Tutorial teaching how to create a blog in 10 steps using Gatsby and WordPress as data source.
WPGraphQL
- 2019.11: 30+ Videos - Gatsby + WordPress (2019) Complete Course - The series focuses on how we can use WordPress as a headless CMS with a GraphQL schema to interface with. After setting up our WordPress site and theme, we'll move onto Gatsby and how we can use our new schema to generate content for our Gatsby site, programmatically generating pages, converting Gutenberg blocks to React components and finishing off the chapter with a focus on SEO in Gatsby.
- 2019.07: Gatsby + WordPress with WPGraphQL (with Jason Bahl) — Learn With Jason - In this stream, Jason Bahl teaches how to use WordPress with Advanced Custom Fields and WPGraphQL to create an powerful, flexible admin dashboard, then query and display that data in a Gatsby site.
- 2019.07: Crash Course: Headless WordPress with WPGraphQL, ACF, and React - In this video, Alex Young (WPCasts) goes over how to get a simple headless WordPress setup with WPGraphQL and React.
- 2019.06: Using WordPress with WPGraphQL - In this video you will learn how to use GraphQL with WordPress using an awesome plugin named WPGraphQL and some extra cool stuff like GraphQL + Advanced Custom Fields.
- 2019.04: WPGraphQL for ACF - Jason Bahl shows how to use WPGraphQL for Advanced Custom Fields.
- 2018.07: GraphQL with WordPress and Gutenberg - Jason Bahl - 2018 JavaScript for WordPress Conference - In this talk from the 2018 JavaScript for WordPress Conference, the Developer of the WP GraphQL Plugin, Jason Bahl, gives updated examples of how you can use GraphQL with WordPress and Gutenberg.
WP REST API
- 2018.03: Gatsby.js + WordPress - In this mini-series the developer tries to create a website using Gatsby.js and WordPress.
List of project starters, that you can clone and start building upon.
- Gatsby + WPGraphQL Blog Example - Demo showing how to use WPGraphQL as the source for Gatsby Sites.
- Gatsby + Headless WordPress + Netlify Starter - A Gatsby + WordPress starter for continuous deployment to Netlify.
- Gatsby WordPress Starter Advanced - An advanced Gatsby + WordPress starter, that is built along a tutorial series and works with ACF flexible content fields to create content blocks/layouts.
List of gatsby-themes that work with WordPress 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.
Contributions welcome! Read the contribution guidelines first.
To the extent possible under law, Henrik Wirth has waived all copyright and related or neighboring rights to this work.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent