Gatsby Introduction

Gatsby Introduction
Gatsby is an open-source, modern website framework that builds a static site generator built with ReactJS and powered by GraphQL. Gatsby allows anyone to create fast-growing engaging websites and applications. You can get data from the REST API and show the pages or posts on the websites, API calls, and flat files through GraphQL.Gatsby Introduction

In WordPress, we create dynamic websites, which need a server to run its PHP and Mysql. With the gatsbyJs, it is possible to create a static version of WordPress by generating a list of HTML pages for all the content on your site. It fetches all your WordPress content with GraphQL. GraphQL is a query language for APIs. Now without wasting to much time in the introduction, we start the project
We will cover the following points in this article.
Install Gatsby
Create GatsBy Project
Build Gatsby Site

Install Gatsby</43>
Before installing Gatsbyyou need to install two main things on your system. If it did not install yet you can install it by the below guideline. Make sure if your system is Mac or Linux then you can use sudo before all the command but as I am working on a window, in that case, you don’t need to add sudo
1) Node (you can download it by this link Download Nodejs)
2) NPM (Install NPM globally on your system by below command)

//For window system
npm install npm -g

//For Linux or Mac system
// you need to add the password after hit the below command 
sudo npm install npm -g

After installing this you need to check this with below command. Open a new command line window and type the below command

node -v
npm -v

You will get the response like below image

Now your system is ready for installation of Gatsby
1) Type the below command then Enter for Gatsby dependencies globally.

  npm install -g gatsby-cli

Create GatsBy Project

Now your system is ready for creating gatsby projects. Run the following command to create projects. At the end of the command is the name of your project or folder in which gatsby install.

//gatsby new NameOfTheProject
  gatsby new gatsby-wp

Now its clone the default gatsby starter template. If you want you can change it and use any other gatsby theme

From the below command you can go inside the project directory and run the gatsby project

cd gatsby-wp
gatsby develop

You can see the site URL on the command window http://localhost:8000. Run this URL on the browser your gatsby website is ready

Build Gatsby Site

Your site is ready to build. The following command creates the static files in the public directory. You can upload it to a server, make sure you can upload the files on the root directory of the server.

gatsby build

Leave a Reply

Your email address will not be published. Required fields are marked *