Gatsby.js Tutorials

Welcome to Gatsby! We’re glad you’re here. The goal of this tutorial is to guide you through setting up and deploying your first Gatsby site using a starter template. As we walk through that process, we’ll introduce some more general web development topics, and go over the underlying structure of a Gatsby site.

The full tutorial is intended to be as accessible as possible to people without much web development experience (yet!) — no need to be an expert. If you prefer to jump straight to code, feel free to skip the step-by-step tutorial and see the quick start page.

Gatsby fundamentals

• Set up your development environment: We’ll introduce you to core technologies that power Gatsby, and guide you through setting up your development environment.
• Get to know Gatsby building blocks: Starting new projects, developing, and deploying sites.
• Introduction to using CSS in Gatsby: Explore libraries like Typography.js and CSS Modules.
• Building nested layouts in Gatsby: Layouts are sections of your site that are reused across multiple pages like headers and footers.

Intermediate tutorials

In these intermediate tutorials, you’ll learn how to pull data from almost anywhere into your Gatsby site with GraphQL.

• Querying for data in a blog: Create a blog and use a GraphQL query to pull your site title into the blog header.
• Source plugins and rendering queried data: Use a source plugin to pull Markdown blog posts into your site and create an index page with a list of blog posts.
• Transformer plugins: Use a transformer plugin to transform your Markdown blog posts into a form the blog can render.
• Programmatically create pages from data: Learn how to programmatically create a set of pages for your blog posts.
• Preparing a site to go live: Learn how to audit your site for performance and best practices for accessibility, SEO, and more.

Theme tutorials

Gatsby themes abstract all of your default configuration (shared functionality, data sourcing, design) out of your site and into an installable package.

This means that the configuration and functionality aren’t directly written into your project, but rather versioned, centrally managed, and installed as a dependency. You can seamlessly update a theme, compose themes together, and even swap out one compatible theme for another.

Learn more about using and building themes with the Gatsby theme tutorials.

Additional tutorials

There are many use cases for Gatsby, some of which aren’t covered in the first set of tutorials to keep you focused while learning. Gatsby’s Additional Tutorials section is a collection of resources showing how to complete even more Gatsby tasks step-by-step, such as using source plugins for images and CMS content.

Go deeper with additional Gatsby tutorials.