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
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
- MailChimp Opt-in form
- Design with Tailwind CSS
- SEO tags
- 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.
- 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.