Introduction and Getting Started with GatsbyJS

GatsbyJS is a free, open-source React-based static site generator.  It is specifically built with performance in mind and delivers 2-3x fast results as compared to some kind of applications built using different tools.

Pre-Requisites:

Before you start working with Gatsby, it’s better to have some prior knowledge of JavaScript, ES6, React and obviously HTML and CSS.

Misconceptions about Gatsby:

It is a general misconception about Gatsby which may be due to the slogan that it’s a static site generator which makes people think, what if we have to use dynamic content? Brace yourselves, everyone, because the answer is YES! You can use dynamic content without any problem in Gatsby.

Get Started:

So now as we know what Gatsby is, let’s get started:

First of all, you should have the latest version of NodeJS installed on your system. If you don’t have Node installed, you can visit the NodeJS website (link provided at the bottom) to install Node.

Now open the terminal and install Gatsby CLI:

npm install -g gatsby-cli (this command installs Gatsby CLI globally on your system)

Gastby CLI will help us use specific functionality like creating new website, running development server and creating production build etc.

Now let’s create a new project using CLI. Run the following command in terminal:

gatsby new gatsby-site-name

This command will generate a new website for us which is ready to run (no configuration required whatsoever) HURRAAAYYY!

Running Development Server:

In order to start the development server, use the following command in terminal:

gatsby develop

It will start a hot-reloading development environment on port 8000. You can access the website using URL: localhost:8000

Project Breakup:

By now you have installed and seen the running demo website. Time to explore the code don’t you think! Open project in your favorite text editor, I prefer Visual Studio Code, but you can choose whichever code editor you feel comfortable with.

Once you will open the project on the code editor, you will see the following project structure: