Creating your first Gatsby website

Note from 2026: Gatsby still works, but its development has slowed a lot since Netlify acquired it in 2023, with few releases and a much smaller team. For a new content site I would now start with Astro, which this site uses. The Gatsby steps are below, followed by the Astro equivalent.

There is a lot of buzz around static websites and static site generators. If you have been following it, you have heard of Gatsby. Today we'll learn what it is and build a site with it.

What is Gatsby?

Gatsby is a React-based framework for building fast static websites and apps. Pages are built ahead of time, then served as plain files.

Prerequisites

You need Node.js and Git installed.

Create a Gatsby site

In 2021 I installed the Gatsby CLI globally first. The current way needs no global install:

npm init gatsby

It asks a few questions: the site name, the folder, which CMS, which styling system and which plugins. Confirm the settings, and it creates the project.

Run it for the first time

cd my-gatsby-site
npm run develop

Your site is now at http://localhost:8000. The home page lives in src/pages/index.js; edit it and the browser updates as soon as you save.

The same with Astro

npm create astro@latest
cd my-astro-site
npm run dev

The site runs at http://localhost:4321, and the home page is src/pages/index.astro. Astro ships no JavaScript to the browser unless you add it, which keeps content sites fast by default. I wrote about rebuilding this site with it in Launch of munawarahmed.com with Astro.

Either way, you have taken the first step to building your static website. Explore the folder structure, and have fun.