Live 2-day Gatsby training with Kyle Mathews! Sign up for NYC in May!
Search by Algolia

Gatsby.js Tutorial

We’re so happy you decided to try using Gatsby. This tutorial has an initial introduction plus seven more parts that’ll walk you from getting started developing and building Gatsby sites to deploying a finished and polished high performance static PWA.

Note: If you prefer a quick start rather than step-by-step tutorial, see the getting started page.

This tutorial is for everyone! You do not need to be a programmer or React.js expert. We’ll walk you through things.

  1. Programming basics: If you are new to programming, go here for an introduction to some basics like terminal, code editors, and browser consoles.
  2. Introduction to Gatsby basics: Starting new projects, developing, and deploying sites.
  3. Introduction to using CSS in Gatsby: Explore libraries like Typography.js and CSS Modules.
  4. Building nested layouts in Gatsby: Layouts are sections of your site that are reused across multiple pages like headers and footers.

Advanced tutorials

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

  1. Querying for data in a blog: Create a blog and use a GraphQL query to pull your site title into the blog header.
  2. Source plugins and rendering queried data: Use a source plugin to pull Markdown blogposts into your site and create an index page with a list of blogposts.
  3. Transformer plugins: Use a transformer plugin to transform your Markdown blogposts into a form the blog can render.
  4. Programmatically create pages from data: Learn how to programmatically create a set of pages for your blogposts.

Was this helpful? edit this page on GitHub