I see many WordPress users making a switch away from WordPress to Gatsby. However, I think the two technologies are a good match. Let’s find out!
When I first came across the official Gatsby site a year ago, I was glad to see the mention of WordPress on its homepage (under Data Sources > CMSs). To be precise, that’s what drew me in – and has kept me hooked .
When you move away from WordPress, you lose a lot of the good things that WordPress provides out of the box. Having worked with WordPress + Gatsby for many months, I noticed it has the effect of leveraging the best of both worlds – the power of the CMS that powers a third of all websites and the speed of a static site generator. To be fair, Gatsby can be considered a powerful web application framework that happens to excel at static pages.
GatsbyWPThemes.com
Having worked with these two technologies and having gone full-time consultant, Educator Zac Gordon generously discussed an exciting project with me. It was essentially to port the Twenty Nineteen WordPress Theme over to a Gatsby Theme.
Hussain and I started working on it at end of February 2019 and V1 of the project was live in two weeks. I wrote an in-depth tutorial for JS for WP blog on how you can create a similar project. Kudos to Jason Bahl for helping make quick decisions on this and iterate with code in record time. Thanks to Alexa for helping troubleshoot some issues during development. I think we worked quite well as a team!
This project was used by Josh Pollock to power his Gatsby + WordPress site. Check out his introductory post here.
We are currently working on V2 of the project. So stay tuned.
Lessons learned doing Gatsby + WordPress
I started this combination in September 2018 and have had both moments of joy and frustration with it. Here are some lessons I learned along the way.
Enjoy a free (and open-source) CMS
As I mentioned previously, WordPress is a great Content Management System. Moving away from it means losing all of its benefits you are accustomed to, such as Published/Modified Date, Categories, Tags, Author and of course Gutenberg, not to mention Pages, Custom Post Types, and Advanced Custom Fields. It’s difficult to get an end-user to modify MD(X) files. Getting them to sign up on a WP site, however is relatively simpler. That’s the reason I think most of my clients prefer this approach.
ACF Repeater Issue
When working with gatsby-source-wordpress, I had a few Repeater fields on a project I was working on. Unfortunately, this would throw errors when none of the fields inside the Repeater had a value. Jason Bahl is working on WPGraphQL ACF and this may solve the issue I am having. To clarify, gatsby-source-wordpress converts the REST API endpoints to GraphQL and stitches the schema. Apparently, this causes issues and that’s where WPGraphQL comes in to solve those issues.
Hosting on Netlify and remote rebuilds
Since Gatsby sites are static in nature, they have to be rebuilt each time you make a change to the WordPress side. My favorite way to host Gatsby sites is on Netlify. I’m simply amazed at how much Netlify offers for free. When developing a WordPress + Gatsby site, you are essentially building two separate projects – therefore a decoupled front-end. For instance, you can host your WP site on Pantheon (or your own hosting provider) and the Gatsby site on Netlify (or any hosting provider of choice). The advantage with hosting on Netlify is “Build Hooks”. You get a URL that you can send a POST request to, to rebuild your Gatsby site. The neat thing is, I wrote a plugin (forked from WP Gatsby plugin) to configure the Build Hook within your WordPress dashboard. With this plugin, you can trigger a rebuild of your Gatsby site on Netlify from your WordPress admin dashboard itself. Pretty neat, eh?
Gatsby Themes are fun
When I first began building Gatsby + WordPress sites, I built it as a normal site generally using the Default Gatsby Starter. With the introduction of themes, however, things get a bit neater. You can abstract away the look of the site + data fetching and transformation to the theme. The site itself can be used if you want to add more pages onto just the Gatsby side (without having it on WordPress e.g. Contact Form). I have enjoyed working on Gatsby Themes, although it needed a bit of a head-wrapping at first.
Gatsby community rocks!
When building with Gatsby, I ran into issues many a times. The community around Gatsby was very welcoming and helped me out a lot. For example, StaticQuery wouldn’t work inside of themes when the theme name started with a name other than gatsby-theme-. I sought help from Chris Biscardi and John Otander, who responded although it was night for them. I ended up spending eight hours troubleshooting and later told them about the issue. Gatsby Team now has a dedicated Slack channel for Theme Support which I gladly joined. I now ask whatever issues I have on this channel, and get responses quickly.
Sending a PR for Gatsby is a joy
I love to contribute to open source – purely because the feeling of knowing thousands of people are benefiting from your code cannot be explained. The Gatsby team, however, took it to the next level. They provide swag for contributions to encourage more Pull Requests (PRs) from even newcomers. I happened to write a post on their blog with help from Dustin Schau who helped improve it.
I plan to contribute more and unlock Level 2 swag 🙂
Next steps
That was a glimpse into my small journey with Gatsby + WordPress. I plan to continue with V2 of Twenty Nineteen Gatsby Theme and other exciting Gatsby work. Meanwhile, if you have any ideas with Gatsby or WordPress, feel free to hit me up and let’s talk!
Leave a Reply