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.

Contents

• Communities
• Articles and Talks
• Plugins
  • WordPress
  • Gatsby
• Free Tutorials / Courses
  • Written Tutorials
  • Video Tutorials
• Paid Tutorials / Courses
• Starters
• Themes

Communities

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

WPGraphQL - Slack Chat - Spectrum Chat - Twitter

Gatsby - Discord Chat - Reddit - Stack Overflow

Articles and Talks

List of articles and talks that elaborate on the technology stack in general.

• 2021.02: Announcing Gatsby’s New WordPress Integration
• 2021.02: Jason Bahl of WPGraphQL's role in the operating system for the web
• 2021.02: Torque News Drop: Jason Bahl and WPGraphQL
• 2021.02: Gatsby Launches New WordPress Integration, Expanding Support for Headless Architecture
• 2020.11: Announcing WPGraphQL v1.0
• 2020.07: My Long Journey to a Decoupled WordPress Gatsby Site
• 2019.06: Modern Web Development on the JAMstack - A report from Netlify about Modern Web Development on the JAMStack, published by O'REILLY.

Plugins

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

WordPress

Essential Plugins

• WPGraphQL - Documentation - WPGraphQL brings the power of GraphQL to your WordPress site.
• WPGatsby - This plugin configures your WordPress site to be an optimized source for Gatsby.

WPGraphQL Extensions

• WPGraphQL Cors - This FREE plugin from @kidunot89 and @byfunkhaus claims to enable authentication with WPGraphQL to “just work” by allowing you to set CORS headers that GraphQL will accept, which means WordPress default auth cookies can be accepted.
• Total Counts for WPGraphQL - This FREE plugin from @builtbycactus exposes total counts to connections in the WPGraphQL Schema.
• WPGraphQL Gutenberg - Exposes Gutenberg blocks to the WPGraphQL API.
• WPGraphQL JWT Authentication - Extends the WPGraphQL plugin to provide authentication using JWT (JSON Web Tokens).