Build a Website for your business in 7 Simple Steps with Gatsby WordPress

WordPress is commonly used CMS for website development and the most traditional method of building your website. The revolution came with the static site generators where the static site front end was established. Gatsby is the static site generator and WordPress is used as headless for making fast websites that are more efficient. Gatsby WordPress templates enable you to create Jamstack websites. 

Pre-conditions for setting up Gatsby WordPress

 If you need to develop your website or convert it from a legacy system to modern stack Gatsby WordPress based, there are certain requirements

  • Basic familiarity with React and JavaScript. Here are becoming started guides for React and JavaScript.
  • Basic understanding of Gatsby and the way dynamic pages are created. Here may be a link to a superb step-by-step tutorial guide to finding out Gatsby.
  • Familiarity with WordPress and a working installation. Here are guides to assist get you started.

 Step 1

 First, let’s found out a WordPress site for a knowledge source. this might be an already existing site or a fresh one. Even an area WordPress installation is ok.

Start by installing a few plugins in WordPress. We’ll use WPGraphQL to enable GraphQL API in WordPress and open up WordPress as a knowledge source. Once activated, the GraphQL API is displayed within the WordPress dashboard. 

Step 2

Setup Gatsby site by installing the plugin of Gatsby through the dashboard option in WordPress gatsby directory of the project with the command. Install and configure the gatsby-source-graphql plugin. even as we did when fixing WordPress, we’ve to put in and configure WPGraphQL within the Gatsby site.

Step 3

Gatsby makes use of two APIs, onCreateNode and creates pages, and tutorial contains an in-depth explanation on how they’re implemented. 

Step 4

We’re getting to create two template files for our content, one for posts and one for pages. We’re using the post title twice, one because the SEO page title and one because the post heading and therefore the post content as a Post component.

Step 5

The create Pages API is a component of the Node APIs that Gatsby exposes. It essentially instructs Gatsby to feature pages. the only difference is prefixing the trail with blog/ and replacing the “page” with “posts” throughout the code.

Step 6

 WordPress features a navigation management feature that permits us to construct menus using links to pages, posts, archives, taxonomies, and even custom links. we would like to make navigation for the main menu in WordPress and send it to GraphQL where we will query it for our site.

Step 7

It is important to line up a menu, A link to our homepage, which can be a custom link pointing to our site’s index. The default page that WordPress creates a replacement WordPress installation.

Deploy and Grow

This gives us continuous deployment where the location rebuilds automatically when changes are pushed to the repo. If we would like an identical process whenever changes are made in WordPress — like publishing a post or editing a page. 

Related Posts