Skip to main content

Tooling

Installing the Gatsby CLI

npm install gatsby-cli --global

Creating a Gatsby Project

gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GIT_REPO]

Using Starter Projects

  • The Gatsby CLI tool lets you install starters
  • Boilerplate Gatsby sites maintained by the community
  • Intended for jump-starting development quickly
  • https://www.gatsbyjs.com/starters/ (hundreds)

Generated Project File Structure

A quick look at the top-level files and directories you'll see in a Gatsby project.

    .
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

Configuration Files

  • gatsby-config.js defines
    • your site’s metadata
    • plugins
    • other general configuration.
  • gatsby-browser.js
    • Interacting with the client-side of Gatsby
    • Respond to actions within the browser (client route changes)
    • Wrap your site in additional components (Ex. Layout)
  • gatsby-node.js
    • Run once in the process of building your site
    • Use its APIs to:
      • Create pages dynamically
      • Add data into GraphQL
      • Respond to events during the build lifecycle

Building Projects

gatsby build
  • build command produces a directory of static HTML and JavaScript files
  • deploy to a static site hosting service

Static Site Hosting

  • Gatsby Cloud
  • Azure
  • Netlify
  • AWS Amplify
  • S3 & Cloudfront
  • Vercel
  • Surge

https://www.gatsbyjs.com/docs/deploying-and-hosting/

Review

  1. How do you create a Gatsby application?
  2. How do you build a Gatsby application and what is the output?
  3. Where can you host a Gatsby site?