Tutorial: Learn how Gatsby works

Welcome to Gatsby! The goal of this tutorial is to guide you through setting up and deploying your first Gatsby site. Along the way, you'll learn some general web development topics as well as the fundamentals of building a Gatsby site.

Note: This tutorial is intended to be as accessible as possible to people without much web development experience. If you prefer to jump straight to code, feel free to skip to the quick start.

0. Set Up Your Development Environment→

We’ll introduce you to core technologies that power Gatsby, and guide you through setting up your development environment.

1. Get to Know Gatsby Building Blocks→

Modify a page, add an image, create a page, make a component, send in props, link between pages, and deploy your site!

2. Introduction to Styling in Gatsby→

Style a page using global CSS and component-level CSS. Style a component with CSS modules.

3. Creating Nested Layout Components→

Install a plugin, create a layout component, and import it into your pages to create a unified style.

4. Data in Gatsby→

Add site metadata to gatsby-config.js and query it with GraphQL to pull it into pages.

5. Source Plugins and Rendering Queried Data→

Use GraphiQL, a GraphQL IDE. Pull data into Gatsby's data layer from the filesystem using a source plugin. Query it with GraphQL

6. Transformer Plugins→

Transform data in Gatsby's data layer using a transformer plugin.

7. Programmatically Create Pages from Data→

Create templated pages that alter routes and display in response to the data passed in.

8. Preparing a Site to Go Live→

Audit the site using Lighthouse. Add progressive web app features like a manifest file and offline support. Add SEO.