Headless WordPress with Gatsby

Headless WordPress with Gatsby

I just released the Gatsby theme I use for this site, called Gatsby Theme Publisher.

Update 10/19: this theme has had a lot of updates, and has moved to a new repository. I’ve updated the post to reflect that.

This site (scottbolinger.com) uses WordPress as a back-end, and Gatsby as a static front-end with the Publisher theme by Static Fuse. I built this theme because I couldn’t find other themes that had all the features I wanted.

Video Demo

Get the Theme

I wrote a full tutorial on headless WordPress with Gatsby here, including how to use the Publisher theme.

You can also cut to the chase and clone our starter theme here.

What’s so great about this theme?

It handles some common issues that I couldn’t find all in one place.

  • Fetch WordPress content via GraphQL
  • Comments
  • MailChimp Opt-in form
  • Design with Tailwind CSS
  • SEO tags
  • Sitemap
  • Google analytics
  • Images via Gatsby Image

Why use Gatsby?

Gatsby is a static site framework built on React. It can also use all the dynamic features of React along with generating static files.

Here are a few things I love about Gatsby.

  • Speed – It’s crazy fast, even on a cheap/free hosting account.
  • No server side rendering, only static files. You can still use client side dynamic content, which is how comments are handled.
  • GraphQL API is awesome and blazing fast.
  • Learning React and GraphQL is fun!

Why not use Gatsby?

Gatsby is pretty new, and while it has tons of potential, it’s not right for every project.

  • If you have thousands of posts and pages, building will take a really long time, so maybe not the best use case.
  • News sites that need to be updated quickly might not work well, as it takes several minutes for the site to update when new content is published.
  • Most plugins are not supported.
  • Dynamic sites like eCommerce and Membership sites are possible to build with Gatsby, but not without a boatload of effort. This will get easier in the future, but maybe not the best use case right now.

How I Use Gatsby with WordPress

Here’s my setup in a nutshell.

  • WP site hosted on WPEngine, but anywhere will do
  • Free Netlify hosting account
  • WPGraphQL plugin active on WP site
  • My own WP Netlify Deploy plugin on WP site (optional)
  • Gatsby theme that pulls in all posts and pages, builds them statically, and uses client-side
  • Site repo with Gatsby files on Github, connected to Netlify

Once this is all setup, when you publish a new post, a Gatsby rebuild will be triggered on Netlify. That adds the new post to your static assets and deploys your site. It will take a few minutes for this to happen, depending on how many posts and pages you have.

Challenges

  • Lots of custom coding, some docs but not comprehensive examples
  • Pretty bleeding edge
  • Most plugins are not supported, so this is best for simple blog or brochure sites (for now).
  • setup is more complex with WordPress than with other CMS’s that are already hooked up to Gatsby/Netlify
  • I had to rewrite urls for things like images. They were hardcoded to scottbolinger.com/wp-content/whatever.jpg, and I had to change that to designbyscott.wpengine.com/wp-content/whatever.jpg in the post editor.

To get started with headless WordPress and Gatsby, read my full tutorial here.

Subscribe

Get more great content like this, enter your email below.

Share

Loading comments...

Leave a comment

Your email address will not be published. Required fields are marked *