See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Tutorial: Learn how Gatsby works

Welcome to Gatsby! The goal of this Tutorial is to help you create a mental model for how Gatsby sites work. You'll build and deploy a blog site using MDX, and along the way you'll learn about how to use Gatsby plugins, the GraphQL data layer, and more!

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

Introduce yourself to the core technologies that power Gatsby, and set up all the tools you'll need to get started on your first Gatsby site.

1. Create and Deploy Your First Gatsby Site

Lay the ground work for your blog by creating a new Gatsby site. You'll also deploy and host your site using Gatsby Cloud.

2. Use and Style React Components

Learn about the different kinds of React components used in a Gatsby site. You'll also learn how to style components using CSS Modules.

3. Add Features with Plugins

Quickly add functionality to your site by using one of Gatsby's many plugins.

4. Query for Data with GraphQL

Meet Gatsby's data layer. You'll learn how to pull data into your components using source plugins and GraphQL.

5. Transform Data to Use MDX

Take a closer look at Gatsby's data layer, including how you can transform data from one type to another.

6. Create Pages Programmatically from Data

Use Gatsby's File System Route API to create pages automatically at build time.

7. Add Dynamic Images from Data

Use the new GatsbyImage component to add performant, dynamic images to your site.

What's Next?

Continue your Gatsby learning journey with these additional resources.

© 2022 Gatsby, Inc.