Getting Started

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.

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.