Latest Code Tutorials

GatsbyJS Tutorial For Beginners

GatsbyJS: Static site generator for React


GatsbyJS Tutorial For Beginners is today’s leading topic. Gatsby.js is a static PWA (Progressive Web App) generator. Gatsby is a Blazing-fast static site generator for React. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are. You can find more about GatsbyJS on its official website.

GatsbyJS is SEO friendly Static Site Generator. So it is beneficial to create blogs.

GatsbyJS Tutorial For Beginners

As usual, we start our tutorial by installing it on our machine.

Step 1: Install GatsbyJS.

We need to install Gatsby’s CLI using the following command.

npm install -g gatsby-cli

If you find any error in installation, then run in administrator mode.

For creating a new website, type the following command.

gatsby new mjweb


GatsbyJS Tutorial For Beginners

Now, go into the website folder.

cd mjweb

Start a hot-reloading development environment by the following command.

gatsby develop


GatsbyJS - Static site generator for React

It is accessible at http://localhost:8000.

Gatsby React Site Generator


Open the folder in your favorite editor.

code .

Step 2: Gatsby Starters.

The Gatsby CLI tool lets you install “starters.” These are partially built sites preconfigured to help you get moving faster on creating a particular type of website.

For example, to quickly create a blog using Gatsby, you could install the Gatsby Starter Blog by running:

gatsby new blog

Go to that site and install all the dependencies.

npm install

If you don’t specify a custom starter, your site will be created from the default starter.

Several starters can be created.

You can find more about starter templates on this link.

Step 3: Start development server on HTTPs.

Our application can also start on HTTPs using the following command.

sudo gatsby develop --https

It can now run on the localhost with HTTPs protocol.

Gatsby on HTTPs


Step 4: Building with Components.

React’s component architecture simplifies building large websites by encouraging modularity, reusability, and precise abstractions. React has a broad ecosystem of open source components, tutorials, and tooling that can be used seamlessly for building sites with Gatsby.

Let us create a new component inside the src  >>  pages folder. The name of the file is app.js.

// app.js

import React from 'react'

const App = () => (
        <h3>Hello from app component</h3>
export default App

It is a simple React.js component.

Now, if you create new components inside the pages folder, then React routing will automatically define its URL path and its component. In our case, the file name is app.js, so the path becomes app and component is App. So it maps automatically and now browses the following URL: https://localhost:8000/app

You can see that the template is the parent component, but the child component is also rendering, and the child component is our app.js file. 

So, if you need to create more and more pages, then you merely create an inside pages folder.

Adding a 404 Page.

You can place a 404.js page inside the pages directory. When you try to access the page that is not accessible, then it can show this page. There is already a 404.js page is built inside the pages directory.

Adding Images

You can import images as a Javascript module using a webpack.

Let us take an image and copy our images inside the pages directory.

Now, in our app.js file, we can import the image like this.

// app.js

import React from 'react'
import user from "./Krunal.jpg"; 

const App = () => (
        <h3>Hello from app component</h3>
        <img src={user} />
  export default App

Now, you will be able to see the image. If you open that image in another tab then you can see that the image is hosted on public >>  static directory with a modified name. So behind the scenes, it renames and copy that image inside public  >> static directory.

Step 5: Production Build

You can build an optimized build using the following command.

gatsby build

Gatsby will perform an optimized production build for your site generating static HTML and per-route JavaScript code bundles.


You can see many options on Gatsby’s official website.

Finally, GatsbyJS Tutorial For Beginners is over. In upcoming tutorials. We will build a blog and deep dive into the GatsbyJS.

1 Comment
  1. Mihir says

    Hi Krunal,

    I am a front end developer in an IT company and currently, I am learning Gatsby.js for one project and I am searching about Gatsby and I found your article It is an amazing article. I would like to tell thank you for this article and can you tell me how I can connect Gatsby as a front end with WordPress?

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.