Introduction to Gatsby, v2

Table of Contents

• 

  Introduction

  00:00:00 - 00:10:10 View Transcript

  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

  00:10:11 - 00:13:33 View Transcript

  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.

• 

  Course Code Setup

  00:13:34 - 00:19:50 View Transcript

  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

  00:19:51 - 00:31:43 View Transcript

  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

  00:31:44 - 00:36:23 View Transcript

  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

  00:36:24 - 00:50:06 View Transcript

  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

  00:50:07 - 00:59:54 View Transcript

  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.

• 

  Add SEO Meta with React Helmet

  00:59:55 - 01:15:27 View Transcript

  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

  01:15:28 - 01:24:25 View Transcript

  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

  01:24:26 - 01:28:48 View Transcript

  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

  01:28:49 - 01:38:01 View Transcript

  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

  01:38:02 - 01:45:27 View Transcript

  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.

• 

  Pages in Markdown

  01:45:28 - 01:50:57 View Transcript

  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

  01:50:58 - 02:04:16 View Transcript

  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

  02:04:17 - 02:10:10 View Transcript

  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

  02:10:11 - 02:23:23 View Transcript

  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

  02:23:24 - 02:29:04 View Transcript

  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.

• 

  Optimizing Images

  02:29:05 - 02:45:31 View Transcript

  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

  02:45:32 - 02:53:04 View Transcript

  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

  02:53:05 - 02:58:15 View Transcript

  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

  02:58:16 - 03:04:10 View Transcript

  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

  03:04:11 - 03:15:41 View Transcript

  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.

• 

  Loading Data from a Headless CMS

  03:15:42 - 03:25:11 View Transcript

  Jason live codes pulling data from Sanity using the gatsby-source-sanity plugin, query through the retrieved data, and discusses how Gatsby can create pages based on file names. There are many headless CMSs that have a Gatsby source plugin available to access the data stored there.
• 

  Creating Pages from Third-Party Data

  03:25:12 - 03:34:14 View Transcript

  Jason demonstrates Gatsby's ability to generate pages from third-party data without using custom code. This file naming convention will generate a GraphQL query which will be used by Gatsby to generate a page for each matching return.
• 

  Creating a Listing of Third-Party Data

  03:34:15 - 03:45:32 View Transcript

  Jason walks through pulling in a list of episodes along side the MDX by querying GraphQL for the third-party data and discusses the benefits of using Gatsby to keep a site updated. A student's question regarding if Gatsby will update the build automatically with a new posting is also covered in this segment.

• 

  Deploying a Gatsby Site Using Netlify

  03:45:33 - 04:01:18 View Transcript

  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 netlify.app 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

  04:01:19 - 04:05:05 View Transcript

  Jason wraps up the course by providing some resources for continued learning about Gatsby and giving some encouraging words to go out, build, and publish something.