Gatsby and WordPress: Setup

Photo by Billy Huynh on Unsplash

This is the start of a blog post series about creating Gatsby site with content pulled in from a WordPress site.

Setup

• Create a new Gatsby site called “wordsby” gatsby new wordsby, this will create a new site using the starter site.
• Enter your new site: cd wordsby
• Setup a new GitHub repo and push your changes up to your repo

Checkpoint: start up our site locally

• Let’s start our new site up gatsby develop
• Open up your new site on http://localhost:8000
• Open gatsby-config.js in your editor and change siteMetadata.title to something different, notice the site changed after you saved the changes?

If you got stuck, you can check out the following Git hash: 168483273e38b94dd35dd5063a44c4696c69ea11

Setup WordPress and the Gatsby plugin

• Lets setup WordPress, go ahead and sign up for a free WordPress site. It’s fine to uses one of the free non-WordPress.com sites.
• Setup a new developer app that will allow us to connect to the blog: Developer.WordPress.com
  • Make a note of your
  • WordPress URL
  • Credentials (your email address and password that you used to create your blog)
  • Client Id
  • Client Secret
• Install the WordPress plugin npm install --save gatsby-source-wordpress
• Let’s edit our gatsby-config.js

Add the following entry to your plugins section

    {
      resolve: `gatsby-source-wordpress`,
      options: {
        baseUrl: process.env.WORDPRESS_BASE_URL,
        protocol: process.env.WORDPRESS_PROTOCOL,
        hostingWPCOM: (process.env.WORDPRESS_HOSTING_WPCOM === 'true'),
        useACF: (process.env.WORDPRESS_USE_ACF === 'true'),
        verboseOutput: (process.env.WORDPRESS_VERBOSE_OUTPUT === 'true'),
        auth: {
          wpcom_app_clientSecret: process.env.WORDPRESS_CLIENT_SECRET,
          wpcom_app_clientId: process.env.WORDPRESS_CLIENT_ID,
          wpcom_user: process.env.WORDPRESS_USER,
          wpcom_pass: process.env.WORDPRESS_PASSWORD,
        },
        includedRoutes: [
          "**/posts",
          "**/pages",
          "**/tags",
        ],
      },
    },

You’ve probably noticed we’ve made use of environmental variables to store WordPress info. This is good practice and prevents accidental leakage of secrets (storing them in a config file and committing to source control).

Let’s test our credentials by adding them to a .env file

WORDPRESS_BASE_URL=xxx.wordpress.com
WORDPRESS_PROTOCOL=https
WORDPRESS_HOSTING_WPCOM=true
WORDPRESS_USE_ACF=false
WORDPRESS_VERBOSE_OUTPUT=true
WORDPRESS_CLIENT_SECRET=xxx
WORDPRESS_CLIENT_ID=xxx
WORDPRESS_USER=xxx@example.com
WORDPRESS_PASSWORD=xxx

Don’t forget to include .env in your .gitignore (the starter Gatsby site adds it by default, but it’s good practice to check it’s not being tracked by Git).

Whilst the dotenv module is installed as part of Gatsby it’s not enabled by default, so find your module.exports line add this code above it:

require('dotenv').config();

Checkpoint: verify WordPress credentials

Let’s restart the Dev environment using gatsby develop

Let’s go to the graphic explorer http://localhost:8000/___graphql this time. Paste the following graphql query into the left panel and hit the play button:

{
  allWordpressPost {
    edges {
      node {
        title
        excerpt
        tags {
          name
        }
      }
    }
  }
}

If the plugin has successfully loaded and was able to connect to your WordPress blog you should be able to see data on the right panel.

Troubleshooting

If you’ve copied the default WordPress for verbose output then, there the plugin should be in debug mode. Look for the following warning:

warning The gatsby-source-wordpress plugin has generated no Gatsby nodes. Do you need it?

This indicates there was an error parsing one of the values you gave in .env.

If you see the following:

Path: /oauth2/token
The server response was "400 Bad Request"

Then the username or password may be wrong. Test them by logging into WordPress.com.

If you see the following:

=== [ Fetching wordpress__ ] ===
=== [ Fetching wordpress__ ] ===
=== [ Fetching wordpress__ ] ===

I’m currently investigating this, and I believe this could be to do with your email address containing + e.g. joe+wordpress@example.com

If you got stuck, you can check out the following Git hash: 3ee8aae5e0c8d6f45127963f776fd1c9358dd647

To go to the next part of the series, click on the grey dot below which is next to the current marker (the black dot).