Headless WordPress + Gatsby + Netlify continuous deployment

What is this? TL;DR

WordPress as a CMS. Front end built with Gatsby. Deployment to Netlify on post publish or update. Support for staging and production environments.

Why WordPress + Gatsby + Netlify?

  1. Gatsby has a great community that is seemingly getting stronger.
  2. Server Side Rendering out of the box.
  3. GraphQL out of the box.
  4. Netlify is free to start and is incredibly fast (and easy) to configure.
  5. WordPress as API will become the norm. (Speculative, but come at me bro).

Dependancies

  1. Gatsby WordPress Netlify running locally with remote GitHub repository
  2. A Netlify account (Free)
  3. A WordPress installation
  4. LittleBot Netlify plugin installed

One: Spin up Gatsby + WordPress + Netlify starter

  1. Fork Gatsby WordPress Netlify
  2. Clone your forked repository
  3. npm install --global gatsby-cli (if you don’t have Gatsby CLI installed)
  4. In the root of your project yarn install
  5. Open your gatsby-config.js file and change the baseUrl to your WordPress url
  6. Run yarn develop — not gatsby develop

Two: Netlify

Signup for a Netlify account if you don’t already have one.

  1. Create a new site
  2. Select “GitHub” from “Continuous Deployment”
  3. Search and select your repository
  4. Click “show advanced”
  5. Click “new variable”
  6. Add a deploy key DEPLOY_ENV with a value of lbn_published_stage
  7. Click “deploy site”
  8. Under Settings > Build & Deploy click “add build hook”
  9. Name something that signifies environment (stage or production)
  10. (Optional) Click “site options” and then “change site name”. Rename to something that signifies this is the environment (stage or production).
  11. Repeat the process above a second time to create a production environment. Change the DEPLOY_ENV to lbn_published_production Optionally rename accordingly.

Three: Install WordPress

Install WordPress on the server of your choice or use an existing site. I recommend a stripped down theme with no front end like this. For example, this site uses https://gatsbynetliflydemo.justinwhall.com/ for its data source. which is no more than a stripped down _s theme.

Four: Install LittleBot Netlify plugin

  1. Download or clone the LittleBot Netlify plugin and install on your source WordPress site.
  2. Find your build hooks on Netlify Settings > Build & Deploy
  3. Add build hooks to your WordPress install under WP Admin > Settings > LittleBot Netlify 

Five: Publish!

Visit any post or page and you’ll see that the default “Publish” metabox has been replaced with:

If you update or publish a post with an environment checked, your post will be published to that environment. Likewise, if you update/publish with an environment unchecked, A post will be removed from that environment. For example, if you uncheck both environments and update, the post will be removed from both. If you publish/update with both environments checked, the post will be published to both.

Posting code? Do it like this:

⟨pre⟩⟨code⟩ var foo = 'bar'; ⟨/code⟩⟨/pre⟩