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.
We’ll introduce you to core technologies that power Gatsby, and guide you through setting up your development environment.
Modify a page, add an image, create a page, make a component, send in props, link between pages, and deploy your site!
Style a page using global CSS and component-level CSS. Style a component with CSS modules.
Install a plugin, create a layout component, and import it into your pages to create a unified style.
Add site metadata to gatsby-config.js and query it with GraphQL to pull it into pages.
Use GraphiQL, a GraphQL IDE. Pull data into Gatsby's data layer from the filesystem using a source plugin. Query it with GraphQL
Transform data in Gatsby's data layer using a transformer plugin.
Create templated pages that alter routes and display in response to the data passed in.
Audit the site using Lighthouse. Add progressive web app features like a manifest file and offline support. Add SEO.