Gatsby and WordPress is an interesting combo to watch. On one hand, it makes perfect sense. Gatsby can suck up data from anywhere, and with WordPress having a native REST API, it makes for a good pairing. Of course Gatsby has a first-class plugin for sourcing data from WordPress that even supports data from popular plugins like Advanced Custom Fields.
On the other hand, Gatsby is such a part of the JAMstack world that combining it with something as non-JAMstack-y as WordPress feels funny.
Here’s some random thoughts and observations I have about this pairing.
- Markus says this combination allowed him to “find joy again” in WordPress development.
- A world in which you get to build a WordPress site but get to host it on Netlify, with all their fancy developer features (e.g. build previews), is certainly appealing.
- Scott Bolinger has a five-minute tour of his own site, with the twist of some of the pages can be statically-built, and other parts dynamically loaded.
- There is a GraphQL plugin for WordPress, which I suppose would be an alternate way to yank data in a Gatsby-friendly way. Jason Bahl, the wp-graphql guy, literally works for Gatsby now and has “Development sponsored by Gatsby” as the plugin’s Twitter bio. It’s unclear if this will be the default future way to integrate Gatsby and WordPress. I sort of suspect not, just because the REST API requires no additional plugin and the GraphQL plugin takes a little work to install. Anecdotally, just installing it and activating it triggers a fatal error on my site, so I’ll need to work with my host on that at some point because I’d love to have it installed.
- We see big tutorial series on the subject, like Tim Smith’s How To Build a Blog with WordPress and Gatsby.js.
- Getting a WordPress site on static hosting seems like a big opportunity that is barely being tapped. Gatsby is just an early player here and is focused on re-building your site the React way. But there are other tools like WP2Static that claim to export a static version of your WordPress site-as is then upload the output to a static host. Ashley Williams and Kristian Freeman get into that in this video (starting about 20 minutes in) and host the result on a Cloudflare Workers site.
I recently built a site (https://bricsfilmfestival.com.br) using the WP + Gatsby + Netlify stack and I can tell you it really is a joy. The main downside, I would say, it’s the build process. Even though it only takes a minute or two, clients who have already worked with WP miss the instantaneity of posting something and seeing it already online. It also took me some adjusting after the initial deploy to avoid build errors caused by bad markup (the old “copied from MS Word” problem).
Two things to add:
1) https://www.getshifter.io/
2) The Gatsby + WP combo certainly is interesting. Unfortunately, now that means there needs to be more budget. That is, the ability and willingness to pay for WP and then Gatsby (to fix it). There’s got to be a better way.
If only we could get live previews like Prismic… I’ve even considered using my Gatsby components in a normal React site, to give the marketing team a preview of what something will look like.
I recently tried mixing these two and come up with https://nirvana.netlify.com.
Love it.
The future of Gatsby Source WordPress is WP Graphql. Read all about it here:
https://github.com/gatsbyjs/gatsby/issues/19292
Running a WP+Gatsby combo at the moment because the old site was running WP and we didn’t want to lose the old posts and familiar (for non-devs) editor tools but now that we fully migrated to headless WP, keeping a server with DB and PHP just for the editor seems… overkill.
Thought: it someone wanted to convert their existing WordPress site, that is a pretty standard WordPress install, to a Gatsby site, and write it up for CSS-Tricks, that’d be a pretty cool guest post series.
… Or WordPress and Gridsome (with Vue) could be even cooler
You should check out frontity. It’s an all in one WordPress, static site, server side rendered react framework. It’s pretty dope.
Let me know if you’d like someone to do a write up on that. I recently rebuilt my portfolio site using it.
Anyone heard about Frontity (frontity.org) ?
This could be a joy for devs, but it could bring lots of hurdles for clients. Using two different systems like this represent more pieces to manage, more technical burden and less freedom for the client.
So, solutions like WPStatic or Shifter, which keep the focus on WordPress itself, may offer the same good results with less potential issues. It could be the best option for the client, businesswise.
Video: Jason Bahl, Muhammad Muhsin: Using WordPress With Static Site Generators
Thanks Chris, for sharing our WordCamp US video!
I’ve had a few problems with WP2Static. However, Simply Static has been amazing. It hasn’t been updated in a while, but still works great on current version of WordPress (5.3.2).
A good guide for Simply Static:
https://www.brianshim.com/webtricks/wordpress-static-site-generator/
And I also made a post building on Brian’s about it:
https://ryandaniels.ca/blog/guide-to-wordpress-static-site/