Headless WordPress + Gatsby + Netlify continuous deployment
Update (10/27/2019): I’ve taken what I’ve learned here and launched Static Fuse where you’ll find Gatsby Themes and more developer tools and references like this article.
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?
- Gatsby has a great community that is seemingly getting stronger.
- Server Side Rendering out of the box.
- GraphQL out of the box.
- Netlify is free to start and is incredibly fast (and easy) to configure.
- WordPress as API will become the norm. (Speculative, but come at me bro).
Dependancies
- Gatsby WordPress Netlify running locally with remote GitHub repository
- A Netlify account (Free)
- A WordPress installation
- LittleBot Netlify plugin installed
One: Spin up Gatsby + WordPress + Netlify starter
- Fork Gatsby WordPress Netlify
- Clone your forked repository
npm install --global gatsby-cli
(if you don’t have Gatsby CLI installed)- In the root of your project
yarn install
- Open your
gatsby-config.js
file and change the baseUrl to your WordPress url - Run
yarn develop
— notgatsby develop
Two: Netlify
Signup for a Netlify account if you don’t already have one.
- Create a new site
- Select “GitHub” from “Continuous Deployment”
- Search and select your repository
- Click “show advanced”
- Click “new variable”
- Add a deploy key
DEPLOY_ENV
with a value oflbn_published_stage
- Click “deploy site”
- Under Settings > Build & Deploy click “add build hook”
- Name something that signifies environment (stage or production)
- (Optional) Click “site options” and then “change site name”. Rename to something that signifies this is the environment (stage or production).
- Repeat the process above a second time to create a production environment. Change the
DEPLOY_ENV
tolbn_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.data.justinwhall.com/ for its data source. which is no more than a stripped down _s theme.
Four: Install LittleBot Netlify plugin
- Download or clone the LittleBot Netlify plugin and install on your source WordPress site.
- Find your build hooks on Netlify Settings > Build & Deploy
- 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.