How to Build Your Site With WordPress and Gatsby
Build Your Site With WordPress and Gatsby
In this article, we will cover a step-by-step process on how to build your site using WordPress and Gatsby to create a vibrant, static website for yourself. Several applications and systems allow you to build a website if you want a static one. WordPress remains one of the most straightforward ways to go about it, thanks to its speed and ease. The CMS service also allows you to handle your web design and store the accompanying static file resources on your server.
However, a lot of users don’t know how to implement static headless WordPress websites. That’s because it’s challenging to generate static features and install the configurations manually.
Thankfully, Gatsby is one of the leading static website generators that can help you with your site. It has functions that allow users to implement features into their static WordPress websites. Beyond that, you’ll still have to look after the Gatsby and WordPress integration, not forgetting the proper installation and configuration settings as well.
Step-by-step process – build your site using WordPress and Gatsby
Begin By Checking the Requirements
The first step is to introduce Gatsby into your WordPress eCommerce environment by checking that you have the prerequisites for installation. Your system needs to have npm, Git and NodeJS installed. Steps to installing these requirements vary depending on your operating system.
Continue for Gatsby installation
Gatsby is ready for installation once you have Git and NodeJS up and running on your site’s environment. You can do it in your code terminal using the “npm install –g gatsby-cli” command. It’s an automatic command that downloads all Gatsby’s dependency files before it installs the software itself.
Build a Gatsby Website
Creating your Gatsby website requires some technical processes. First, you’ll need to clone the Gatsby starter template with the “gatsby new gatsby-site” command. Also, the code places the cloned template in a registry, “/gatsby-wordpress,” and makes the website’s development version available to you.
Then, you’ll invoke the command “gatsby develop” to open the development version. You can locally visit the site’s template from a browser at this point using http://localhost:8000.
Your site is ready to get built. Introduce as many static files as you wish and build them up with the “gatsby build” command. If you need to view the website’s JavaScript code segments, you can use the “gatsby serve” command. Remember, the serve command needs the build command to work.
Integrate Gatsby with WordPress
You’ve come to the next step – WordPress-Gatsby integration. While you might think the process is straightforward, it takes more effort since both systems use separate code frameworks. You’ll need to install a plugin to make the connection.
Integrating your Gatsby website with WordPress allows you to access your WP blog from the Gatsby site and pull up-to-date resources when you work on your development server. Essentially, Gatsby builds the static web pages with your existing WP templates. You’ll need to make the connection using this command- “npm install gatsby-source-WordPress”.
Complete Gatsby’s Configuration
Open the gatsby-config.js file you have saved to complete the configuration process. In the file, you just need to add a code that looks like this:
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 the code to reflect on your WordPress website. Then, promptly save the file and build your page templates. If the site remains in localhost, you can also use localhost:8888/wordpress to access it instead of the URL.
Build Some Templates for your Gatsby Website
Your Gatsby website needs some page templates to generate posts for the connected WP site automatically. While the source plugin does most of the job for you, it’s essential to build some web page templates manually.
You need to include the following code in your gatsby-node.js file:
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,
},
})
})
}
Wrapping Up
Using Gatsby with your WP site comes with several benefits. First, you’ll experience faster loading times and better security. Also, it allows you to reduce server costs, as you can use any server for your static website.
However, it bears mentioning that you understand the cons as well. You’ll need significant coding skills to configure Gatsby and WordPress. Heavy knowledge of GraphQL and ReactJS is necessary for your website development on the platform. Also, it doesn’t support dynamic content without third-party add-ons.
If you’ve had your mind made up on building your site with Gatsby and WordPress, the above steps can help you get started in no time to build your site easily.
Author’s Bio: Lori Wade is a writer who is interested in a wide range of spheres from eCommerce to web development and new technologies. If you are interested in the above topics, you can find her on LinkedIn. Read and take over Lori’s useful insights!
