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

2. Install Git

• For Mac: With Homebrew

brew install git

• For Linus: Check this documentation

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

gatsby new <PROJECT NAME> <STARTER THEME>

For example

gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-hello-world

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

• Gatsby starter
• Gatsby plugins
• JAMstack themes where you can search for Gatsby themes

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