Headless WordPress with Gatsby

Headless WordPress with Gatsby

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

This site uses WordPress as a back-end, and Gatsby as a static front-end. I built this theme because I couldn’t find other themes that had all the features I wanted.

You can clone it and use it on your own site: https://github.com/scottopolis/gatsby-theme-publisher

Video Demo

 

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.