Gatsbyjs is a static site generator that uses React as front end library to build sites and web applications. There are a lot of modern paradigms that Gatsby takes care for its developer behind the scenes to start building and launch their project.
Another thing I like about Gatsbyjs is its ever-growing data plugin ecosystem. It lets a developer fetch data directly into a Gatsby generated application using GraphQL. If you decide to use Gatsby you will be enjoying the power of the latest web technologies such as React.js, Webpack, GraphQL, and Node.js.
In this tutorial we are going to setup a simple Gatsbyjs site to see how it is scaffoled and build.

Advantages of using Gatsbyjs

There are many advantages of choosing GatsbyJS to build your next website over other existing stacks and static generators. Here are some of them.

• HTML code is generated server side
• Pre-configured Webpack based build system, thus, no need to spend time on this if you do not want too
• Optimized for speed. Gatsby loads only critical parts, so that your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so that clicking on the site feels incredibly fast.
• Easily extensible by plugin ecosystem
• Automatic routing based on your directory structure. Thus, no need for using a separate routing library

Installing the GATSBYJS CLI

We will be using npm to install our first and basic tool that we need to setup any Gatsbyjs project. This is a CLI tool that is recommended by GatsbyJS team to start with a new project. You can use yarn too.
In your terminal, type the following code:
npm install –global gatsby-cli
Yes, the CLI tool must be installed as a global dependency. To start a new project type:
gatsby new first-gatsby-site

After the installation and setuping up a new project is complete, we can run the project to see if it is working correctly. Run gatsby develop from terminal to see the site running live at http://localhost:8000. In your browser window, the default Gatsbyjs application looks like this.

Leave the command running since it enables Hot Reloading. Now any change we make to our project will be reflected directly, without refreshing the page. Currently, this application contains two pages. Hence, the bare minimum routing is already done for us.

Project Structure

Every Gatsby project contains at least these files. This might be familiar since directories such as node_modules, public, are common paradigms over the web and JavaScript community. It also contains package.json, that holds the metadata of any modern Javascript application.
Our concern are the directory src and file gatsby-config.js. The directory contains files related to our current application and the other contains metadata information.
Inside the src/ there are two sub-directories: layouts/ and pages/. The layouts/ contain further two files: index.css and index.js. These serve as the starting point of our application.

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import Helmet from 'react-helmet';

import './index.css';

const Header = () => (
    <div
        style={{
            background: 'rebeccapurple',
            marginBottom: '1.45rem'
        }}
    >
        <div
            style={{
                margin: '0 auto',
                maxWidth: 960,
                padding: '1.45rem 1.0875rem'
            }}
        >
            <h1 style={{ margin: 0 }}>
                <Link
                    to="/"
                    style={{
                        color: 'white',
                        textDecoration: 'none'
                    }}
                >
                    Gatsby
                </Link>
            </h1>
        </div>
    </div>
);

const TemplateWrapper = ({ children }) => (
    <div>
        <Helmet
            title="My First Gatsby Site"
            meta={[
                { name: 'author', content: 'amanhimself' },
                { name: 'keywords', content: 'sample, something' }
            ]}
        />
        <Header />
        <div
            style={{
                margin: '0 auto',
                maxWidth: 960,
                padding: '0px 1.0875rem 1.45rem',
                paddingTop: 0
            }}
        >
            {children()}
        </div>
    </div>
);

TemplateWrapper.propTypes = {
    children: PropTypes.func
};

export default TemplateWrapper;

Since it uses Reactjs as the core for writing applications, you need to be familiar with it, especially the JSX to understand the above code. The Header component contains the styles and markup that is currently serving as the header of our application. It is reflected on every page by TempplateWrapper which is our main layout component in the application.
The Link tag you are seeing is the way Gatsbyjs let the users navigate from one page to another. It is required from gatsby-link library that comes with our Gatsbyjs project as a dependency. The react-helmet library that serves the purpose of attaching header information in HTML. Just like react-helmet you can use other react dependencies in a Gatsbyjs project.

The App Pages

The pages/ contain rest of the pages that build up the application. They are plain React components. Let us take a look at the index.js file inside this directory that currently serves as the main page of our application.

import React from 'react';
import Link from 'gatsby-link';

const IndexPage = () => (
    <div>
        <h1>Hi people</h1>
        <p>Welcome to your new Gatsby site.</p>
        <p>Now go build something great.</p>
        <Link to="/page-2/">Go to page 2</Link>
    </div>
);

export default IndexPage;

Similarly, you will find the code in page-2.js. In our browser window, we try to navigate to the second page, do notice the URL of the site when the second page loads.

It is same as the file name. We are also using Link tag from Gatsby to navigate back to the homepage. Let’s add another page to our site. Inside the pages directory, create a new file page-3.js.

import React from 'react';
import Link from 'gatsby-link';

const ThridPage = () => (
    <div>
        <h1>Third Page</h1>
        <p>This is my first Gtasby site</p>
        <Link to="/page-2/">Back to Page 2</Link>
        <br />
        <Link to="/">Go back to the homepage</Link>
    </div>
);

export default ThridPage;

Now, add the link of third page to the homepage. Open index.js file.
import React from ‘react’;
import Link from ‘gatsby-link’;

const IndexPage = () => (

);

export default IndexPage;

The Navbar

In this section, we will add a navbar or a navigation menu to visit all the three different pages in our application with ease. Open layouts/index.js and inside Header component, add the following.

                     fontSize: 'x-large'
                            }}
                            to="/"
                        >
                            Home
                        </Link>
                    </li>
                    <li style={{ display: 'inline-block', marginRight: '1rem' }}>
                        <Link
                            style={{
                                color: 'white',
                                textDecoration: 'none',
                                fontSize: 'x-large'
                            }}
                            to="/page-2"
                        >
                            Page 2
                        </Link>
                    </li>
                    <li style={{ display: 'inline-block', marginRight: '1rem' }}>
                        <Link
                            style={{
                                color: 'white',
                                textDecoration: 'none',
                                fontSize: 'x-large'
                            }}
                            to="/page-3"
                        >
                            Page 3
                        </Link>
                    </li>
                </ul>
            </h1>
        </div>
    </div>
);

It is nothing but JSX code all over it. On saving the file, the results are reflected immediately on the homepage and on every page.

Deploying this Static site

So far we have come out with a bare minimum static site that serves the purpose of this walk-through. The last step that I want to focus is on deployment. I will be using GitHub Pages for deployment.
To deploy a project on GitHub pages make sure your current working directory is initialized as a git repository and hosted on GitHub. If that is good, let us add a module called gh-pages as a dev dependency.

npm install –save-dev gh-pages
Add a deployment script in package.json:

"scripts": {
  "deploy": "gatsby build --prefix-paths && gh-pages -d public",
}

We know that gatsby.config.js is the main manifesto file for any Gatsbyjs project. Thus, we need to add the pathname prefix of the repo like below.

module.exports = {
    siteMetadata: {
        title: `Gatsby Default Starter`
    },
    pathPrefix: `/first-gatsby-site`
};

From the terminal execute the following command.
npm run deploy
The site will be live on .