Hello Gatsby! This blog is now headless WordPress…

Well, I did it.

I jumped on the Gatsby bandwagon, and it seems pretty great so far!

Also, there’s been a very nice bump in overall site performance and experience (Chrome Lighthouse audits):

Before: Previously using the Atomic Blocks theme, shared hosting environment.
After: Using Gatsby, Gatsby Tabor Theme, Gatsby site hosted on Netlify… and a PWA to boot!

I’m planning to make a quick video of my experience and update this post with it, but I wanted to share what I did here, for reference.

Disclaimer: I don’t recommend moving your front-end to Gatsby and using WordPress as an API unless you’re working with a developer. I’m sure that WPAABES (WordPress as a back end service, you heard it here!) will be available with themes to choose from soon.

Steps I Took to Move to Gatsby

  • I read a LOT of articles and documentation in prep for this.
  • I moved my WordPress blog install over to ⚡ Pantheon ⚡, which allows for a few free development sites on their amazing hosting and infrastructure at no charge. For the purposes of moving to Gatsby, it creates a separate endpoint outside of my main website to build the Gatsby site from. Pretty slick 😎.
  • Followed the setup instructions for the Gatsby Tabor Theme setup (note, read the issues on this repo, the workspace is site and not starter).
  • Switched out all the occurrences of the sample domain for my own in the gatsby-config.js files. At this point, I was able to run yarn workspace site develop and all my content was pulled into my local Gatsby site. Amazing! Note: make sure your theme’s menu is PRIMARY, otherwise you’ll get build errors, see this article.
  • I had some mixed content warnings, probably from years ago before HTTPS was standard. A quick find and replace in my database fixed that.
  • Moved my images to Cloudinary.
  • There was also an issue with site internal links: WordPress by default uses full URLs, including my domain (e.g. https://n8finch.com/whatever-post instead of the relative /whatever-post). So, I ran a quick SQL find-and-replace in the post_content column of the wp_posts table (Note: only do this if you know what you’re doing, are not working with serialized data, and have a backup):
UPDATE wp_posts
SET post_content = replace(post_content, 'https://n8finch.com/', '/');
  • Switch out the Dribbble icon for a Github icon
  • Fixed an issue on the posts archive page with SEO, filed a Pull Request for it as well, #opensource!!!
  • Easily and quickly deployed to Netlify from the repo.

And that was basically it!

Things I’m still working out…

  • I tried to add a manifest to the site to make it a PWA, but got an incompatibility error, and needed to update the GatsbyJS version. However, updating Gatsby broke a lot of other things, so I went ahead and rolled back (and silently thanked the WordPress community that seems to have gotten past a lot of these update-and-break issues!). Turns out I didn’t need to update Gatsby core for the manifest to work!
  • There is currently no favicon for the site, probably related to the manifest I finally got the icon in the right spot of the public file… 😆, only took me 9 attempts!!
  • There’s no comments on the site anymore. I knew that going into this. I don’t have a ton of comments, but there are a few I wanted to preserve. Not sure if I will transfer things to Disqus, code something up, just leave them off.
  • I’m using this Netlify deploy plugin, which works great, but is a manual process, I’ll probably fork it, add in a hook to deploy on publishing a post/page (and maybe updating a post/page?).

Other than that, I couldn’t be happier. Gatsby is a great tool to work with. I will probably roll my own theme, or regular Gatsby install soon, especially since Gatsby Themes are not production ready.

It’s been fun, just what web dev should be!

Go back to the homepage

© 2021, A labor of ❤️, built on Gatsby by Nate Finch