New writing setup: Gatsby.js and WordPress as a headless CMS

As I proposed in my Gatsby.js retro, I finally transitioned this blog from using Markdown files stored in git to using WordPress as a headless CMS (diff here). It’s still a statically-generated site and it still uses Gatsby.js. The only thing that changed is how the underlying data is stored and managed.

My writing workflow now looks like this: I write on my self-hosted WordPress instance, saving drafts as needed. I used the web interface for this blog post but I can use any writing tool that WordPress supports. For example, I wrote the last post about Meadow’s seed funding announcement from bed on the WordPress iOS app.

When I’m done writing a blog post, I click “Publish” on WordPress, which tells Netlify via webhook to kick off a new Gatsby build. The build process grabs all my WordPress content using a GraphQL WordPress plugin, and re-publishes my updated blog onto Netlify. Lest you think this is a bespoke system I invented, it’s all officially supported by Gatsby. They publish and maintain the Gatsby source plugin (gatsby-source-wordpress), as well as the WordPress plugin (WPGatsby) to make this all work. Their documentation and tutorials were also quite helpful.

I briefly considered leaving Netlify behind in favor of Gatsby Cloud for the tighter integration and so I could take advantage of Gatsby Cloud’s CMS preview feature, but after hearing that Netlify acquired Gatsby, I’m glad I didn’t. As with all acquisitions, the future of the acquired company is now unclear.

Despite my griping about Gatsby’s dependency on GraphQL, re-platforming my blog’s content took me less than a day because the structure of the GraphQL queries were largely the same, even though they were pulling data from entirely different sources.

I am sure to retro this new blogging setup in a few years, but so far it’s been working well. Writing on a professional-grade authoring experience is a huge upgrade compared to what I was doing before.