Gatsby and WordPress: Setup


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

Setup

Checkpoint: start up our site locally

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

Setup WordPress and the Gatsby plugin

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
[email protected]
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. [email protected]

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

The Gatsby x WordPress Blog Post series



Tweet