How to Create a Blog with Gatsby and WordPress CMS

January 05, 2024

Hello World!

If you are reading this, it means that I have successfully created and deployed a website. The technology stack used for this website includes Gatsby for the front-end, Netlify for deployment, and WordPress CMS for the blog, which is hosted on Dreamhost. This post serves as a quick reference guide for anyone who wants to recreate this website. So, let’s get started!

Step 1: Create a Dreamhost Account

I used Dreamhost for the backend hosting. My primary reason for choosing it was its affordability and its seamless integration with WordPress. However, feel free to conduct your own research and opt for a different hosting provider. Your choice of hosting service should not have any significant impact on the steps outlined in this article.

Step 2: Add Website

Access the “Manage My Websites” section from the Dreamhost dashboard. Click on the “+ Add Website” button to start creating a new website.

When setting up, select the “Create a Subdomain” option. You can choose any subdomain prefix you like. For instance, if your domain name is “Awesomewebsite.com,” you can use “blog.awesomewebsite.com” or “wordpress.awesomewebsite.com.” As for my website, I opted for “CMS” as the prefix.

screenshot of the dreamhost options for entering a subdomain. shows two fields, the first field is an input to choose a subdomain with placeholder text that says "Blog"

To proceed, you need to select a hosting option for your website. Because you are hosting real WordPress data, select the “Shared Starter” plan and click “Set Up Website” to finish the new site creation wizard.

screenshot of the diffferent hosting options at Dreamhost. There are 4 options, Shared Starter, Redirect Domain, Mirror Domain and Park Domain

Step 3: Install WordPress

Once you have completed the setup of your new website, proceed to the “WordPress” section in the side menu. From there, select “Install WordPress”. Then, choose your recently created domain name from the website dropdown and follow the on-screen instructions to install WordPress on your domain.

After successfully installing WordPress on your domain, you can go back to managing your websites. Click on the ellipses next to your domain name and select “WordPress” to launch the WordPress Dashboard.

Next, navigate to the Plugins page from the side navigation menu and install the following plugins:

WP Gatsby
WP Super Cache
WPGraphQL

Congrats, you are now ready to connect your WordPress account to your Gatsby site!

Step 4: Use a Gatsby WordPress Starter

Websites can be quite challenging to create, that’s why I opted to use a starter template and customize it according to my requirements. The starter template I suggest using can be accessed through this URL: https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-wordpress-blog/.

I chose it because of its minimalistic design and simple folder structure. To get started, you can either clone the repo directly from github, or if you have NPM installed on your machine, you can run:

npx gatsby new gatsby-starter-wordpress-blog

Once you have successfully cloned the starter, open the project in VS Code (or your code editor of choice). We are ready for the next step.

*Note: using this starter includes all the required Gatsby Plugins. However, if you decide to use another starter, compare the included plugins within the gatsby-config.js file to ensure that no plugins are missing.

Step 5: Add Queries

To connect your website to the WordPress CMS, you need to make a change in the gatsby-config.js file. In the options of the `gatsby-source-wordpress` plugin, you should update the URL. The new URL should be the domain name you created followed by ‘/graphql’. For example, if your website’s domain name is ‘CMS.Awesomewebsite.com’, the new URL should be ‘CMS.Awesomewebsite.com/graphql’.

    resolve: `gatsby-source-wordpress`,
      options: {
        // the only required plugin option for WordPress is the GraphQL url.
        url:
          process.env.WPGRAPHQL_URL ||
          `https://wpgatsbydemo.wpengine.com/graphql`,
      },

Making this update to your gatsby-config.js file, combined with the previous step of installing plugins in WordPress, is all you need to do to access your blog posts created in WordPress. You can serve a development build of your project on your localhost by running Gatsby Develop in your terminal. This will allow you to confirm whether you can see the blog posts from your WordPress site.

Step 7: Create a Netlify Account

Navigate to https://www.netlify.com/ and click “Sign Up” to create a Netlify account. Use your Github login and grant all required permissions for Netlify to access your Github repositories.

Step 8: Deploy

After logging in, access “Sites” from the side menu, select “Add New Site,” and then choose “Import an existing project.”

To deploy your Gatsby project on Netlify, select the “Deploy with Github” option and locate your repository. If you haven’t created a custom build script, you can leave the deployment configurations as is and Netlify will automatically detect your Gatsby site and use NPM Run Build. However, if you have a custom build script, you can add it here. Double-check all the settings and once you’re satisfied, click on “Deploy” to begin the process.

Congratulations! If there are no errors, your site will be successfully deployed to a randomly generated Netlify URL. You can review your site’s configuration and, if you wish, update your site to a custom domain name.