How to create a Gatsby project

I. Set up Dev environment

To set up our development server, we need to install Node.js, Git, and Gatsby CLI.

1. Install Node

If you’re using Mac, I recommend installing Node using Homebrew.

brew install node

For other operating systems, please check Node documentation for more information.

2. Install Git

  • For Mac: With Homebrew
brew install git

3. Install Gatsby CLI

Gatsby CLI tool lets us quickly create new Gatsby-powered sites and run commands.

To install Gatsby CLI globally

npm install -g gatsby-cli

To check a list of command and options, run:

gatsby --help

II. Create a Gatsby site

After installing Gatsby CLI, change into the directory where you want to store the project and run the following command


For example

gatsby new my-gatsby-project

If we leave out the starter theme, Gatsby will use the default starter. Check more Gatsby Starter themes.

Then, navigate into your site’s directory and start

cd my-gatsby-project
gatsby develop

III. Gatsby commands

Here is a list of useful commands

  • gatsby develop: Start the Gatsby development server
  • gatsby build: Compile your application and make it ready for deployment
  • gatsby serve: Serve the production build for testing
  • gatsby clean: Wipe out .cache and public directories

IV. Useful pages

V. Folder structure

Our Gatsby project has the following folder structure

  • .cache: where Gatsby stores the cache
  • node_modules: where we keep our dependencies
  • public: where production-ready project lives
  • src: includes pages and components, where we spend most of our time
  • static: set up assets that are publicly available
  • .gitignore: a file indicates which files will be ignored when we push the project to Github
  • gatsby-config.js: sets config for our site, such as plugins, site info
  • package-lock.json: uses for dependencies of dependencies
  • package.json: contains useful information about the project