Setup a Gatsby + Wordpress Headless Project

After being a little disenchanted with hosted CMS backends, I decided to come back to my web development first love; Wordpress. Full disclosure I just google'd "how to use colon". Anyway, I had been using Vue.js frameworks (Gridsome and Nuxt.js) for my frontends, but I remembered having fun working with Gatsby some years back so I thought I'd give it another go.

Ya know...get myself out of my comfort zone a lil.

If you've never worked with Wordpress before, you'll need to either set up a Wordpress instance locally or on some hosting service like Dreamhost. Dreamhost is what I use to host my hobby projects and it's really cheap and makes setting up Wordpress easy. If you sign up through this link I get a few bucks.

I'm gonna assume you're setting up a local Wordpress instance though. If you're not familiar with how to do that, follow the Install Wordpress on your own computer guide from the official Wordpress website.

If you've already developed on Wordpress before, chances are you have some kind of theme you've made or swiped from the interwebs. I have maintained a Webpack based starter theme I call Wauble that I use for my projects and you're welcome to head over and download that from Github repo.

Navigate into that directory

cd wauble-master

Install javascript dependencies

npm i

Install PHP dependencies. I think it's just mainly Carbon Fields for meta fields

composer install

After downloading it and copying it into the Wordpress themes directory, activate the theme and let's get rollin'.

Install the following plugins to create a GraphQL endpoint and expose data to it:

• WPGraphQL. This actually creates your GraphQL endpoint and provides the GraphQL explorer in the Wordpress admin.
• WPGatsby. Among things I don't quite grasp yet, this creates GraphQL query types and allows your Gatsby app to talk in a friendly way to your endpoint.
• WP Webhooks. Allows you to send a webhook to our Gatsby host whenever a post or page is updated.
• Yoast SEO. Provides full integrated SEO support for Wordpress.
• Add WP GraphQL SEO. Exposes SEO data from Yoast to our GraphQL endpoint.

If you're brand spanking new to web development, chances are you don't have certain tools installed that are necessary for your Gatsby environment. If that's the case, head over to Gatsby tutorial to Set Up Your Development Environment.

After all that fun stuff is set up, head over to my Gatsby Wordpress Starter that was derived from other repos that I can't remember now.

My Gatsby Wordpress Starter is in active development while I add some styles to it to make it prettier and populate the frontend with more data from WP.

Most of my code for this starter was taken from gatsby-starter-wordpress-blog. If you're having issues with my starter, feel free to use that instead.

Download the code or clone the repo and cd gatsby-wordpress into it.

Install dependences with

npm i

Install the Gatsby CLI to run stuff easier

npm install -g gatsby-cli

In the root of your Gatsby project, edit gatsby-config.js and to point the gatsby-source-wordpress plugin to use your own Wordpress instance's GraphQL endpoint

{
  resolve: "gatsby-source-wordpress",
  options: {
    url: "https://your-wordpress/graphql",
  },
},

At this point you should be able to fire up your frontend and pull data in.

Give it a try

gatsby develop

If that worked, you should be able to pull up localhost:8000 now and see your frontend.

If you any errors or if I missed a critical step or something, please let me know in the comments and I will fix the post.

Gatsby + Wordpress seems to be a great option to take a little more control of your backend as opposed to hosted CMS-es. Of course Wordpress has its quirks and is not for everyone, but a headless instance of Wordpress is a very different experience than the traditional implementation and is attracting many who've sworn off Wordpress in past years.

Hope this little run-through gets you started. Enjoy!