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.
Comments
10 responses to “Headless WordPress with Gatsby”
Ah this is pretty funny, I’m currently trying to do something similar with Vue, but am still in the early stages. I came across your blog through an Ionic WordPress article you wrote early last year.
One massive pain point I’ve come across so far is when considering WooCommerce – their REST API isn’t complete (no cart modifying, no order processing), and I would have to use some plugins, like CoCart + maybe something custom, for those scenarios as well.
Thanks for the content, great write up.
Ya using WooCommerce would require a lot of custom code. I heard someone is working on a WPGraphQL integration for Woo, which would work really well for a Gatsby setup.
So cool to see your progress with this & you’re getting me curious 🙂
Is there a reason to still use WP Engine ($$) with this Gatsby setup? Or could you set up an inexpensive DigitalOcean server to host the WP since it’s not serving all the visitors now?
You definitely don’t need an expensive host, because the traffic is not hitting your WordPress site at all (except for the dynamic stuff like comments). It’s mostly used as a way to generate content, and a place to store data. The static front end is taking on most of the load, so you can definitely save money with hosting.
Great work… loved it
Interesting information, we continue learning
Thanks for sharing. Although there are several challenges, it’s worth using the Gatsby theme. The thing I like most about this theme is that it’s really fast and there is no server side rendering.
Great content, I was wondering you hosted your wp site on WPEngine and Gatsby site on netlify meaning you had different domain for both?
Yes, WPEngine gives you a domain like yoursite.wpengine.com, then you can use Netlify DNS for your main domain like yoursite.com.
hey i’m watching your video just checking how fast this comment can work 😀