Cheat Sheet

The Gatsby team has created a resource that you might find useful when building a Gatsby site: a cheat sheet with all the top commands and development tips! Feel free to download and print yourself a copy (and tape it by your workstation!). For related online information, visit Quick Start and Commands (Gatsby CLI).

Get the PDF: gatsby-cheat-sheet.pdf

Page 1

Cheat Sheet - page 1

Page 2

Cheat Sheet - page 2

Gatsby Cheat Sheet contents

v1.0 for Gatsby 2.xLatest version

Top Docs

Gatsby Docs

gatsby.dev/docs

Gatsby on GitHub

github.com/gatsbyjs/gatsby

Gatsby Tutorial

gatsby.dev/tutorial

Quick Start
(for intermediate and advanced developers)

gatsby.dev/quick-start

Gatsby Starters

gatsby.dev/starters

Quick Reference Guide

gatsby.dev/recipes

Adding Images

gatsby.dev/image

Gatsby Node APIs

gatsby.dev/api

Querying with GraphQL

gatsby.dev/graphql

Deploying and Hosting

gatsby.dev/deploy

Using Gatsby Link

gatsby.dev/link

Static Query

gatsby.dev/static-query

How to Contribute

gatsby.dev/contribute

gatsbyjs.com

twitter.com/gatsbyjs

Gatsby CLI Commands

First, install the global executable:
npm install -g gatsby-cli

Run gatsby --help for a list of commands and options.

gatsby new my-site-name

Create a new local Gatsby site using the default starter (see “Quick Start Commands” in this cheat sheet on how to use other starters).

gatsby develop

Start the Gatsby development server.

-H, --host

Set host. Defaults to localhost

-p, --port

Set port. Defaults to env.PORT or 8000

-o, --open

Open the site in your (default) browser for you

-S, --https

Use HTTPS

gatsby build

Compile your application and make it ready for deployment.

--prefix-paths

Build site with link paths prefixed
(set pathPrefix in your config)

--no-uglify

Build site without uglifying JS bundles
(for debugging)

--open-tracing-config-file

Tracer configuration file (OpenTracing compatible). See gatsby.dev/tracing

gatsby serve

Serve the production build for testing.

-H, --host

Set host. Defaults to localhost

-p, --port

Set port. Defaults to 9000

-o, --open

Open the site in your (default) browser for you

--prefix-paths

Serve site with link paths prefixed (if built with pathPrefix in your gatsby-config.js)

gatsby info

Get helpful environment information which will be required when reporting a bug at github.com/gatsbyjs/gatsby/issues.

-C, --clipboard

Automagically copy environment information to clipboard

gatsby clean

Wipe out Gatsby’s .cache and public directories.

T-Shirts, Hats, Hoodies, and more!

Sign up for the Gatsby Newsletter and get 30% off your Gatsby Store purchase! (gatsby.dev/store)

Sign up at gatsby.dev/discount

Quick Start Commands

Create a new Gatsby site using the “Blog” starter:
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog

Navigate into your new site’s directory and start it up:
cd my-blog-starter/
gatsby develop

Your site is now running at http://localhost:8000!

You’ll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about it at gatsby.dev/tutorial

For more Gatsby starters, visit gatsby.dev/starters.

Helpful File Definitions

Each of these files should live at the root of your Gatsby project folder. See gatsby.dev/projects

gatsby-config.js — configure options for a Gatsby site, with metadata for project title, description, plugins, etc.

gatsby-node.js — implement Gatsby’s Node.js APIs to customize and extend default settings affecting the build process

gatsby-browser.js — customize and extend default settings affecting the browser, using Gatsby’s browser APIs

gatsby-ssr.js — use Gatsby’s server-side rendering APIs to customize default settings affecting server-side rendering