Table of Contents
Introduction
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
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
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.
Markdown
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
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
Loading Data from a Headless CMS
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
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
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.