Alright! So you’ve made it through Part 1 and Part 2, now for the final chapter in the series!

Part 3 — The Real Deal

Now that we’ve pulled in posts from our WordPress blog into our Gatsby app successfully, let’s configure Netlify, so we look more official with our domain name. Instead of using kaleigh-tech-tutorial.netlify.app we'll be using kaleigh.tech as the domain name.

Domain Management

Head over to Netlify and open up your site’s settings and scroll down to “Domain Management.”

Image for post
Image for post

Click on the button “Add Custom Domain”, type in your domain name, and verify that you are indeed the owner.

Image for post
Image for post

Once it took me back to my settings, I saw this error…don’t worry, we’ll fix it:

Image for post
Image for post

Scroll back up to custom domains and click on your domain name’s…


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:

Image for post
Image for post

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…


I love Gatsby. I love WordPress. I love Gatsby and WordPress together. Earlier this year I set up a couple of sites using existing WordPress sites that I managed and created all-new designs and front-end experiences for both. In this series, I’m going to walk you through the whole thing- we’ll set up a new site that uses WordPress as the headless CMS with Gatsby. I’ll start from the very beginning so if you don’t know anything about Gatsby or WordPress, this will hopefully get you up and running with ease. …

About

Kaleigh

👩🏼‍💻software engineer and senior consultant

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store