Tutorial: Build Your Site With WordPress and Gatsby

Creating a static website with WordPress is possible with headless WordPress. These types of websites load faster, because static files are saved on your server. The question is, how do you build a headless website with WordPress?

This is where a static site generator like Gatsby comes in. These generators help you build feature-rich static websites in WordPress. However, you need to integrate them correctly with your WordPress installation to get the most out of them. This integration includes installing, generating, and configuring WordPress Gatsby. 

In this article, we’ll look at what Gatsby is and why you might want to use it with WordPress. We’ll then detail how to use Gatsby and whether you should. Let’s get started!

What Is Gatsby?

Simply put, Gatsby is a static site generator. This means that Gatsby generates the static HTML files that are uploaded to your website’s server. When a visitor lands on your site, these static files are served to their browser, instead of the dynamic content WordPress generally offers. 

To generate these files, Gatsby fetches data for your website from a range of sources. This includes existing websites, API calls, and flat files through GraphQL. Your static website is then built based on the configurations you have set. 

As compared to other static site generators, Gatsby is relatively new. However, this has not stopped many companies from trying it out. One of the largest examples is the Airbnb Engineering & Data Science blog, which is powered by Gatsby.

Why Use Gatsby With WordPress?

As it is possible to create a static website with WordPress, you might wonder why you should use WordPress and Gatsby together. While WordPress is powerful on its own, Gatsby offers some benefits you might want for your website, including faster speeds and lower server costs. Understanding the advantages and disadvantages of Gatsby can help you make an informed decision. 

Pros of Using Gatsby

Gatsby offers a range of benefits that any website can take advantage of, including:

• Faster loading speeds. Static websites load faster than dynamic ones, and this can impact your Search Engine Optimization (SEO). Page loading speeds is a signal used by search engines, and affects your website’s bounce rates. 
• Reduced server costs. Dynamic websites require compatible technology stacks and servers. Static websites do not, and you can host them on any server. This can reduce your server costs. 
• Improved security. Static websites provide improved security. The static HTML files served don’t offer much for hackers to work with. If these files are lost for any reason, you can also regenerate them with Gatsby.

Your website can benefit from all of these advantages. However, you should weigh them against the disadvantages of using Gatsby. 

Cons of Using Gatsby

No software system is perfect, and Gatsby does have a few drawbacks you need to know about:

• Technical knowledge needed. Gatsby is built on ReactJS and uses GraphQL. To use it, some understanding of JavaScript is necessary. You’ll also need to have basic knowledge of GraphQL to build a website. 
• No dynamic content. Gatsby only generates static websites. If you want dynamic content such as contact forms, they need to be redirected through a third-party provider. 

While many developers find that the pros of Gatsby outweigh the cons, both are important to understand in advance.

How Do I Use Gatsby with WordPress?

Setting up Gatsby can take some time, and there are certain steps you’ll need to take. You need to install Gatsby before you can start generating your site and configuring it. In addition, there are a few initial considerations to make.

Step 1: Check the Prerequisites

Before you can install Gatsby, you need to install NodeJS and npm in your website environment. Git is also required for code management. The steps to install the prerequisites vary, depending on the operating system you run. 

If you have Windows, you can install NodeJS and Git through the installer on the download page. The same is possible with Mac. However, if you run Linux, a package installer such as apt is required. 

Step 2: Install Gatsby

After installing NodeJS and Git, you can start installing Gatsby. The easiest method to do this is using the following command in your software terminal:

npm install -g gatsby-cli

This command runs the installer automatically. It will first download and install all dependencies before installing Gatsby. Once that’s complete, you can start creating your first Gatsby website. 

Step 3: Create a Gatsby Site

To create your Gatsby website, you’ll need to run the following command:

gatsby new gatsby-site

This command clones the Gatsby starter template, and places it in the directory /gatsby-wordpress. Once the cloning and installation are complete, you can open the development version of the site. This is done using the following command:

gatsby develop

While the development environment is running, you can locally visit your new website. In your web browser, enter http://localhost:8000 and your default template should open.

If you see this page, you can start building your website. This means creating the static files in those website’s public directory. The following command automatically starts the production of tohse static files:

gatsby build

This command also generates the pre-route JavaScript code bundles for your website. You can then use the serve command to locally display your new website:

gatsby serve

This command will only work if you have already run the build command. 

Step 4: Connect Gatsby to WordPress

You now have a basic static website, but you need to integrate it with WordPress. This points your Gatsby site to the address of your WordPress blog, enabling it to pull the latest data when you run the development server. Once connected, Gatsby will build a static website based on your current WordPress template. 

To connect the two, you’ll need to install the Gatsby plugin for WordPress. The following command will take care of that:

npm install gatsby-source-wordpress

After installing the plugin, you can start configuring Gatsby.

Step 5: Configure Gatsby

To configure Gatsby, you need to work with the gatsby-config.js file. In that file, add the following code:

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseUrl: `wpexample.com`,
        protocol: `https`,
        // is it hosted on wordpress.com, or self-hosted?
        hostingWPCOM: false,
        // does your site use the Advanced Custom Fields Plugin?
        useACF: false
      }
    },
  ]
}

Update this code to point to your WordPress website. If your website is locally hosted, after baseUrl you can use localhost:8888/wordpress instead of your website’s URL. After saving the file, you’ll need to build your page templates. 

Step 6: Build Page Templates

Building page templates enables Gatsby to generate a post for every page on your WordPress website. The source plugin will pull the data you need from WordPress for these pages, but you’ll have to create the design template. 

In your gatsby-node.js file, add the following code:

const path = require(`path`)
const { slash } = require(`gatsby-core-utils`)
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  // query content for WordPress posts
  const result = await graphql(`
    query {
      allWordpressPost {
        edges {
          node {
            id
            slug
          }
        }
      }
    }
  `)
  const postTemplate = path.resolve(`./src/templates/post.js`)
  result.data.allWordpressPost.edges.forEach(edge => {
    createPage({
      // will be the url for the page
      path: edge.node.slug,
      // specify the component template of your choice
      component: slash(postTemplate),
      // In the ^template's GraphQL query, 'id' will be available
      // as a GraphQL variable to query for this posts's data.
      context: {
        id: edge.node.id,
      },
    })
  })
}

After calling all the data from WordPress, Gatsby will generate a page for each post. Using the develop command, you can navigate to each new page using the generated URL. 

Should I Use Gatsby for WordPress?

While Gatsby can improve the speed and security of your website, it is not the right choice for everyone. If your website has static content that does not change often, Gatsby can be beneficial. However, if you need dynamic content on your website, traditional WordPress might be the better choice. 

Do The Most With Your Site on WP Engine

Gatsby is an effective static website generator that you can easily integrate with WordPress. There are steps you need to follow to install and configure the system. You also need to have some knowledge of Gatsby and GraphQL before you start. 

Static content can improve the speed and security of your website, but you need the right host as well. WP Engine offers the best WordPress hosting and insightful resources for your website to create an excellent digital experience. This leaves you with more time to focus on development!