Skip to content

Getting Started With Gatsby

Gatsby/

Gatsby is a static site generator framework that uses React. It builds your project into bunch of files that are ready to be read by the browser. There is no server that prepares each view with data, therefore page load times are very fast.

Gatsby can populate pages with data from all kinds of sources at build time, such as, Markdown files or APIs that serve JSON.

Prerequisites

Make sure to have the following software installed before you set up Gatsby.

  1. Node 14.15.0 or newer and npm

    node -v
npm -v

  2. Git

    git --version

Installing Gatsby CLI

Gatsby CLI is a tool for creating, developing and building Gatsby projects.

Open your terminal application and install Gatsby CLI.

npm install -g gatsby-cli

By default, Gatsby gathers anonymous usage data to improve its service.

You can disable or enable the collection of your information whenever you want.

gatsby telemetry --disable
gatsby telemetry --enable

Creating New Project

Run the following command to start creating your project in your current working directory.

gatsby new

The setup will ask you a few questions, such as, the name of your project and what Gatsby plugins you would like to install.

Don’t worry about that for now and just press the Enter key to select the first option — “No (or I’ll add it later)“.

In the final question, using arrow keys, pick the “Done” option without selecting anything else.

You should see the following output in your terminal.

Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder  my-project

? Shall we do this? (Y/n) ‣ Yes

Press Enter to finalize the setup.

Congratulations, you have created your own Gatsby project.

Enter the project’s directory, run gatsby develop and go build something awesome.

cd your-project-name
gatsby develop

Using a Starter Project

Gatsby CLI offers the ability to start a new project from existing templates that the Gatsby community has created. They can be found here — https://www.gatsbyjs.com/starters.

For example, you can quickly create a blog using Gatsby’s blog starter.

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog