Introduction to Gatsby, v2

Jason Lengstorf

Jason Lengstorf

Learn With Jason
4 hours, 4 minutes CC
Introduction to Gatsby, v2

Course Description

Learn to build blazing-fast apps and websites with React using Gatsby! Starting from scratch, you’ll learn to code a full blog app. Use GraphQL in Gatsby for storing and retrieving data, create pages and posts with MDX, optimize your images automatically with the gatsby-image, and load 3rd party data to display in components. Then deploy your brand new blog website to Netlify for the world to see!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: September 21, 2021

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 13 minutes
  • Introduction
    Jason Lengstorf introduces the course by sharing some personal background, discussing the difference between Gatsby framework and Gatsby cloud, and providing a summary of what Gatsby is and what it is built on. Gatsby is built on ReactJS and GraphQL, is opinionated on file structure, has a focus on faster load times, and is a great option to build static websites fast.
  • Course Overview
    Jason provides an overview of what will be covered in this course and provides course resources. Initial site setup, pages and linking, GraphQL, SEO and metadata, shared layouts, global and scoped styles, MDX, image optimization, third-party data, generated pages, and deployment.

Gatsby Basics

Section Duration: 46 minutes
  • Course Code Setup
    Jason walks through forking the course repo, discusses the source code, repo dependencies, and included scripts. This project uses node version 16.6.1, but Gatsby only requires version 12 or above.
  • Creating a Page
    Jason discusses the function of pages in Gatsby, walks through how to create pages, and answers a student's question regarding if Gatsby can handle TypeScript files. How to create the simplest Gatsby site, what happens when gatsby develop and gatsby build are run, a walk through of the inspect and network view, and a demonstration of the site running with JavaScript disabled are also covered in this segment.
  • Creating Links
    Jason live codes links between the index and about pages with Gatsby's built-in Link component and demonstrates what happens under the hood when a link is clicked. Using Gatsby's built-in Link component will speed up navigation by avoiding reloading the entire site upon switching pages.
  • Adding & Querying Site Metadata
    Jason walks through adding metadata: the site url, title, description, and image to the project by using the gatsby-config file, demonstrates querying the development site metadata using the GraphQL explorer, and answers student's question regarding how Gatsby handles trailing slashing in links. How to use Gatsby's useStaticQuery to write a query and use the result without having to understand Gatsby's data flow is also demonstrated in this segment.
  • Gatsby & GraphQL Q&A
    Jason answers students' questions: how to use a mutation to create and update with Gatsby and GraphQL, how to get data from an asynchronous source, if GraphQL is compatible with other data layers, and if there is a simpler way to load json data to GraphQL. How to make data queries on the fly and the differences are between Gatsby and Next are. also covered in this segment.

SEO & Layout

Section Duration: 45 minutes
  • Add SEO Meta with React Helmet
    Jason walks through installing React Helmet, adding plugins to the gatsby config file, pulling out default site meta data, exporting a prop called Seo that accepts props of metadata, and returning those SEO tags to manage how the site looks across social media. Configuring the SEO tags for both the index and about pages are covered in this segment.
  • Creating a Layout
    Jason demonstrates how to create shared layouts in Gatsby by creating a Layout function that can be exported and wrapped around the content of a page. Creating a Layout allows for consistency in the site's meta tags and header markups.
  • Add Global CSS Styles
    Jason demonstrates how to set up global CSS styles and import those styles into the layout component to be used throughout the site.
  • Add Scoped Styles with CSS Modules
    Jason walks through indicating a CSS module to Gatsby, coding the CSS styling, and importing the newly coded scoped styles as if they were JavaScript classes. Once the module's class names are attached to elements in the layout, the site styling will update accordingly.
  • Gatsby Layout Q&A
    Jason answers student's questions regarding what extension is being used to display the syntax highlighting, if there is documentation on migrating a site to Gatsby, how to add a CSS reset, and if Gatsby has a history call. Why the variables are not set in the global.css and accessed in the layout is also discussed in this segment.


Section Duration: 43 minutes
  • Pages in Markdown
    Jason provides a recap of what has been covered in the course so far and introduces writing page content in Markdown. Writing content in MDX allows for the ability to pull in a React component while still writing mainly Markdown.
  • Setup Pages in MDX
    Jason walks through adding MDX support by adding an MDX source plugin for the file system, updating the gatsby-config with plugin configurations, creating posts, and setting a default layouts for posts. Overriding the default layout and a student's question regarding making the configuration generic are also covered in this segment.
  • Add MDX Frontmatter
    Jason demonstrates sending in config with Markdown using Frontmatter, setting post metadata, and querying MDX and Frontmatter in GraphiQL. Setting more detailed filters for queries and what other information is provided by frontmatter in GraphiQL is also briefly discussed in this segment.
  • Creating a Layout for MDX
    Jason live codes creating a post layout for MDX by creating a new component that grabs the Frontmatter data to update the search engine values for each post. Student questions regarding what the maximum number of blog posts Gatsby can handle and if data could be pulled down from another source at runtime.
  • Show Recent MDX Posts
    Jason walks through building a list of blog posts on the home page, sorting the query data by date and fields, and using the queried data to create a list of blog posts on the homepage.

Image Handling & Optimization

Section Duration: 46 minutes
  • Optimizing Images
    Jason discusses effects of lengthy image load times, walks through installing plugins that help cut down image load times, creating image settings, and querying for Gatsby image data. Compressing images to reduce file size using an application called Squoosh is also demonstrated in this segment.
  • Styling Images
    Jason demonstrates how to define scoped styles for an image and how to add a static image to the home page with the StaticImage component. This component will take a src and alt prop, but also allows additional configurations including setting the placeholder style and image resizing dimensions.
  • Loading Effects
    Jason discusses what Gatsby does under the hood with the StaticImage tag including reserving the space used by the image to reduce cumulative layout shift. Different image loading effects including blurred, dominant color, and tracedSVG are also demonstrated in this segment.
  • Optimizing Images in MDX
    Jason demonstrates how to optimize images in MDX automatically for standard Markdown-style images with gatsby-remark-images plugin, which helps avoid accidentally shipping large images to production. Unlike the StaticImage images, Markdown images will always be the full width of the content area by default.
  • Query Images from GraphQL
    Jason walks through querying images from GraphQL in Gatsby with page querying and a GatsbyImage component. The GatsbyImage component accepts a data object that includes all the details of the image such as placeholders, dimensions, and everything else it needs to render an optimized image.

Third-Party Data

Section Duration: 29 minutes


Section Duration: 15 minutes
  • Deploying a Gatsby Site Using Netlify
    Jason demonstrates how to deploy a Gatsby site to Netlify using the Netlify CLI, discusses some of the entries in the Netlify deploy log, and answers student questions regarding if the domain can be changed and if Gatsby can be used for an ecommerce site. Netlify will automatically choose the version of node due to the previously added nvmrc file and pull in all of the site dependencies.

Wrapping Up

Section Duration: 3 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now