NAV
Coding Example

Introduction

Welcome to the series of Gatsby tutorial!

Your great interest of learning take you here. I will try to explain GATSBY in very simple word, hopefully that will be really worthy for you.

In this series I will try explain everything about Gatsby you need know, from the starting to deploy in real server. Lets begain…

What is Gatsby?

Gatsby GatsbyJS is basically a static site generator framework based on React ReactJS. If you don’t know what is React then you can read my another series written for React in here & also can watch video tutorial from our video tutorial series or from youtube.

In very simple word you can generate a static website by Gatsby. A static website is group of HTML pages, can be included bunch of images as well as CSS, JS to make the website beautiful. In the static website all of your content are written in the HTML pages which means content are same for all visitors.

Who needs a static website?

Suppose you own a small or can be a large company and want to have a website where you want to publish your fixed services your company does then static website is best for you. Another example can be portfolio website, where you make a showcase of your exprience, example of previous works, education etc. The static website loads really faster then the dynamic website.

Gatsby also can be used to generate static Wordpress content.

if you want you can read more about Gatsby, you can do it from their official Gatsby website.

Getting started with Gatsby

So, We already know about Gatsby. Now lets learn how to get started it easily on your Windows or MAC operating system. As you have already Gatsby is made on ReactJS so, you should have basic knowledge about React & Javascript.

Before you start your development of your static website, you need to install npm a package install for NodeJS. If you don’t know how to install NodeJS then you can visit their official documentation to know more about NodeJS & how to install it your local computer.

Windows

Get started Gatsby on Windows

npm install -g gatsby-cli

Open up the NodeJS command prompt that comes as a part of the application in Windows, which you can run from your start menu. Also you can setup NodeJS in your windows environmental variable so you can call it from anywhere. If you don’t know how to setup environmental variable in your windows google it. Run the following command in the command prompt. This command will install Gatsby CLI globally. So, later you can call it from anywhere in your local machine folder.

npm install -g gatsby-cli

MAC OS

Get started Gatsby on MAC OS

npm install -g gatsby-cli

Open your terminal and run the commmand. you can type the command nodejs in the terminal to start the NodeJS command prompt.

npm install -g gatsby-cli

Linux

Get started Gatsby on Linux OS

sudo apt update
sudo apt install nodejs npm
npm install -g gatsby-cli

Open your terminal and run the commmand. you can type the command nodejs in the terminal to start the NodeJS command prompt.

sudo apt update
sudo apt install nodejs npm
npm install -g gatsby-cli

The installer takes care of all dependencies for the package. Once the installation is successful, you are ready to create your first GatsbyJS site.

You can find additional informaton form Gatsby official website to Get Started Quickly

Create New Website

How to create a new website with Gatsby?

Create a new website with Gatsby

gatsby new my-site

To create a Gatsby site, you need to run the following command in the NodeJS command prompt.

gatsby new my-site

gatsby is the command form GatsbyJS new to create a new website &my-website is your website name.

You can see a new folder called my-site with all the required files & folders.

How to run your the development server?

To start the development server created with Gatsby

cd my-site
gatsby develop

Go to the folder by run this command in your command prompt cd my-site. Then run this command gatsby develop.

cd my-site gatsby develop

Your website should be up and running!

Congratulation! you have created your first Gatsby website!