In the previous post, I introduced you to the Gatsby JS framework . The advantages and disadvantages that the framework network brings. Then with this article, I will guide you through the installation and familiarization with Gatsby JS . Before we go into detail, let’s take a look at the Gatsby JS website .
As you can see, on the Gatsby homepage there is an introduction to how the Gatsby -based website works. The website will get data from sources like CMS, Markdown, or api links, Json, .. Then Gatsby will get the data using GraphQL then build the website into .html, .css files on React platform and then deploy Go to hosting to publicize the website.
This is the menu of the Gatsby website, there will be 2 items that you will often come in contact with: Docs, Plugins. Just like WordPress, Gatsby supports an extremely large number of plugins. After learning about the homepage, we will proceed to install Gatsby.
Install Gatsby JS and initialize the project
First you need to install node js and npm. You go to the home page of Node JS to download. Then you open the terminal and use the following command to install Gatsby on your computer:
<code>npm install -g gatsby-cli</code><div><span>1</span></div>
After the installation is complete, the terminal will appear as follows:
Next, move the terminal into the folder where you want the project. Here we start to initialize the project. If you visit Gatsby’s website, you will see that the site is equipped with enough base source themes for all fields, you can refer here . However, I prefer dev from the default base source theme, so I use the following command to create the project:
<code>gatsby new gatsby-site; cd gatsby-site</code><div><span>1</span></div>
You can replace gatsby-site with the name of your project, and the cd command to bring your terminal into the project directory. So the initial step of starting the project is done.
Getting to Know Gatsby JS
Next, how will we test the project we just created? Use the following command to run the project:
<code>gatsby develop</code><div><span>1</span></div>
After executing the command, the terminal will return the following output:
As you can see, the terminal returns 2 links. The first link is http://localhost:8000/ to enter the initialization project
The project returns us 3 pages, you will experience it. And the second link is http://localhost:8000/__graphql so you can access and use GraphQL
The GraphQL tool helps us a lot in getting data from data sources. Not only Gatsby can use GraphQL, but even WordPress, React, Vue, etc. can use it. So we’re done with the setup and getting familiar with Gatsby JS.
summary
Through this article, I have helped you get acquainted with and install and start projects on Gatsby. Through the following article, I will continue to guide you to connect Gatsby with WordPress, and also show you how to use the GraphQL tool .
Thank you.
