React, Gatsby, & Wordpress Static Site: Gatsby and Wordpress Setup (part 2)

Learn to use the well known Wordpress admin without all the nonsense templating.

In part 2 we will be setting up our Gatsby configuration, Wordpress backend, and Netlify deploy. Once we finish, we will have our site building on any code or Wordpress content changes! Feel free to checkout the project overview in Part One.

Wordpress

Feel free to create any remote Wordpress site, but I’m going to quickly spin up a free site at https://www.000webhost.com/. The only caveat with the gatsby starter we are going to use is that you need to create a page and a post (with a tag) in order to get rolling 🎢.

Gatsby

Gatsby’s getting started documentation is excellent, but feel free to follow along here.

Getting Started

Install Gatsby as a global package. Now gatsby will be a cli command.
npm install -g gatsby-cli

We are also going to install a Gatsby starter project, which will be a Wordpress boilerplate.

gatsby new REPOSITORY_NAME https://github.com/GatsbyCentral/gatsby-starter-wordpress

Now I can just cd lorenaledezma.com and run gatsby develop to start up my project. It should look something like

You should see this on http://localhost:8000/

Configuration

Now we are going to update our gatsby-config.js file in order to add our environment variables (for Wordpress auth).

You can see we have added process.env.HTACCESS_USER and process.env.HTACCESS_PASSWORD to our auth block. We have also added dotenv package in order to pull in a .env.development file where we define HTACCESS_USER and HTACCESS_PASSWORD for our npm builds.

Also update the baseURL to the url of your new Wordpress site.

And this is what our environment variable file looks like. It needs to be in the root directory.

Be sure to add .env* to your .gitignore file so you don’t add your creds to source control

Netlify

Setup an account with Netlify if you haven’t already. Follow this tutorial to add your github repository and setup a site (create a repo w/ code before hand). If any of the setup options are confusing, please reference the Gatsby docs (like npm run build as the build command or that /public is our source directory).

Once your site is added, you will want to add your environment variables to the project at Settings → Deploys → Build Entironment Variables `settings/deploys#build-environment-variables`. Add both HTACCESS_USER and HTACCESS_PASSWORD .

This means that when Netlify runs npm run build it will have access to our credentials

Wordpress Next Steps

Now we want to add our authorization to our site and also install a plugin to deploy our new static once we create or update our content.

Install two plugins and follow the instructions in the README.

WP-API/Basic-Auth

lukethacoder/wp-webhook-deploy-netlify

Use you admin Wordpress user’s credentials for the environment variables. Also feel free to test out the wp-webhook-deploy-netlify plugin, as you should see it successfully building (from the netlify app dashboard) when you click deploy button.

If you’re adding Advanced Custom Fields to your site, be sure to update your gatsby-config.js with useACF: true .

Part Three

For Part 3️⃣ we will be diving into Gatsby’s react components! Please comment with any questions or comments! 🔥