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.

Dependencies

LittleBot Netlify installed and activated on the source WordPress installation.

This Project was forked from Gatsby WordPress Starter

Which was forked from Gatsby Advanced Starter

Production Demo

Stage Demo

Getting Started

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 -- not gatsby develop

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 of lbn_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 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 https://gatsbynetlifydemo.justinwhall.com/ for its data source. which is no more than a stripped down _s theme.

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

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.

Features

WordPress plugin for Gatsby
Configured to work with WordPress Advanced Custom Fields
Auto generated Navigation for your Wordpress Pages
Minimal UI and Styling -- highly customizable
Styled Components

Plus these features from Gatsby Advanced Starter,

Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
Separate components for everything
High configurability:
- User information
- User social profiles
- Copyright information
- More!
Author segment
- Name
- Location
- Description
- Links
- Follow Me button
Posts in Markdown
- Code syntax highlighting
- Embed YouTube videos
- Embed Tweets
Tags
- Separate page for posts under each tag
Categories
- Separate page for posts under each category
Disqus support
- Notifications about new disqus comments
Google Analytics support
NPM scripts for GitHub Pages deployment
Social features
- Twitter tweet button
- Facebook share/share count
- Reddit share/share count
- Google+ share button
- LinkedIn share button
- Telegram share button
SEO
- Sitemap generation
- robots.txt
- General description tags
- Schema.org JSONLD (Google Rich Snippets)
- OpenGraph Tags (Facebook/Google+/Pinterest)
- Twitter Tags (Twitter Cards)
RSS feeds
Loading progress for slow networks
Offline support
Web App Manifest support
Development tools
- ESLint for linting
- Prettier for code style
- Remark-Lint for linting Markdown
- write-good for linting English prose
- gh-pages for deploying to GitHub pages
- CodeClimate configuration file and badge

Example:

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

{
  resolve: 'gatsby-source-wordpress',
  options: {
    // The base url to your WP site.
    baseUrl: 'YOUR_WORDPRESS_URL',
    // WP.com sites set to true, WP.org 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 {
            source_url
          }
          author {
            name
            avatar_urls {
              wordpress_24
              wordpress_48
              wordpress_96
            }
          }
          date
          slug
          title
          modified
          excerpt
          id
          acf {
            project
            date
          }
          categories {
            name
          }
          tags {
            name
          }
          content
        }
      }
    }

Finally, you'll probably want to update the SiteConfig to match your info, becuase right now it has mine. 🤠
Suggestions:
- Use the Prism WP Plugin to pass code blocks down.
- If you give an ACF to a single post, you must give it to EVERY post, or GraphQL gets confused.

Notes

Ruben Harutyunyan did most of the hard work with Gatsby Advanced Starter. The rest of the credit is due to Gatsby.

WARNING: Make sure to edit static/robots.txt to include your domain for the sitemap!

drhitchcockco/gatsby-wordpress-netlify-starter