Skip to content
A Gatsby + WordPress starter for continuous deployment to Netlify
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
content 1st v2 commit Jun 15, 2019
src fix syntax error Jun 15, 2019
static 1st v2 commit Jun 15, 2019
.eslintignore first Jun 17, 2018
.eslintrc.json first Jun 17, 2018
.stylelintrc first Jun 17, 2018
LICENSE 1st v2 commit Jun 15, 2019 readme Jun 15, 2019
gatsby-config.js update page and config Jun 15, 2019
gatsby-node.js refactor gatsby node Jun 15, 2019
package-lock.json 1st v2 commit Jun 15, 2019
package.json update page and config Jun 15, 2019
yarn.lock refactor gatsby node Jun 15, 2019


Gatsby + Headless WordPress + Netlify Starter

A starter skeleton that leverages the WordPress API for Gatsby. Support for Continuous integration with Netlify. Publishing posts call the Netlify build hook. Deploy to Netlify stage or production enviroment when updating a WordPress post or page.


This Project was forked from the default Gatsby Starter

Production Demo

Stage Demo

Getting Started

  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


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. (Optional) Repeat the process above a second time to create a production environment. Change the DEPLOY_ENV to lbn_published_production Optionally rename accordingly.

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 for its data source. which is no more than a stripped down _s theme.

Install LittleBot Netlify plugin (Optional. Can be used without this if you don't care about building on publish.)

  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 


Support for Gutenberg out of the box. If you are using the classic editor, 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.


Using this starter requires configuring the gatsby-config.js file. You really only need to change BaseUrl, and hostingWPCOM if you're using rather than

  resolve: 'gatsby-source-wordpress',
  options: {
    // The base url to your WP site.
    baseUrl: 'YOUR_WORDPRESS_URL',
    // sites set to true, set to false
    hostingWPCOM: false,
    // The protocol. This can be http or https.
    protocol: 'http',
    // Use 'Advanced Custom Fields' Wordpress plugin
    useACF: true,
    auth: {},
    // Set to true to debug endpoints on 'gatsby build'
    verboseOutput: false
  • Update GraphQL queries to match your WordPress Content. This is the query currently on the index page. You either need to add ACF's in your WordPress to match the query (in this case Project and Date), or you need to remove those aspects of the query. The featured_media isn't a problem -- it'll work even if you have posts without featured images.
allWordpressPost {
      edges {
        node {
          featured_media {
          author {
            avatar_urls {
          acf {
          categories {
          tags {
  • Finally, you'll probably want to update the SiteConfig to match your info, because right now it has mine. 🤠
You can’t perform that action at this time.