Deep Dive

“The fastest auto dealership site in the world” Hundreds of hours of perf learnings, distilled

Tutorial: Learn how Gatsby works

The goal of this tutorial is to help you create a mental model for how Gatsby sites work by building and deploying a blog site using MDX. Along the way, you'll learn 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.