Part 2 — The Connection

Now let’s go back to our Gatsby site that we set up in Part 1, and get it hooked up to our WordPress site, and pull in some blog posts!

Gatsby Plugins

Open up gatsby-config.js in your text editor.

First I’m going to edit the siteMetadata from the defaults to make the site my own:

There are so many great Gatsby plugins, but for the sake of this tutorial, we’ll only install what we need to connect WordPress.

Normally I’d install the gatsby-source-wordpress plugin, but since it is going to be updated soon, let’s try out the new one.

Run:

npm install gatsby-source-wordpress-experimental

Next, we’ll go back and edit our gatsby-config.js file and add a .env file to the project. It will be ignored by gitignore.

This is what mine looks like, minus my login info for my WordPress site.

Here’s what we’ll add to gatsby-config:

#web-development #gatsbyjs #javascript #wordpress #react