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

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.org

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 `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!

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

Edit this page on GitHub