There is a lot of buzz around building a static website and Static Site Generators, if you have been following this trend you definitely would have heard about Gatsby.

Today, We will learn about Gatsby and how to build a website using it.

What is Gatsby?

Gatsby is React based frontend framework for creating integrated static websites and apps.

Prerequisites

Before diving into building your Gatsby website you need Node and Git installed.

After that, we need to install Gatsby CLI

npm install -g gatsby-cli

This will allows us to quickly create Gatsby sites and run development commands.

Creating a Gatsby website

Now, open your terminal and run

gatsby new

This will walk you through a set of questions like site name, folder, cms, styling, and other plugins, Then type yes when prompted to confirm settings.

Screenshot 2021-03-31 at 12.48.05 PM.png

Running Gatsby for the first time

Once the installation is done go to your Gatsby website directory, in our case it is

cd first-gatsby-site

and run the following command to start the server

yarn develop

this will start the server, and by default, your website will be available on http://localhost:8000

Screenshot_2021-03-31 Home Page.png

the homepage content is available on src/pages/index.js, you can start editing the content and the site will get updated in real-time as you save.

We are glad you took the first step in building your static website.

Feel free to explore your Gatsby folder structure till next time.

Join the Newsletter

Subscribe to get latest updates on Jamstack, How-to guides and best Jamstack templates in your inbox

We respect your privacy. you can Unsubscribe at any time.

© 2022 Stackrole • Proudly built on Jamstack with Gatsby and Strapi • Hosting by Netlify

Stackrole — Jamstack Marketplace - Curated marketplace for Jamstack templates | Product Hunt