Introduction to Gatsby, v2
Table of Contents
IntroductionJason 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 OverviewJason 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 SetupJason 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 LinksJason 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 MetadataJason 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&AJason 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 HelmetJason 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 LayoutJason 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 StylesJason demonstrates how to set up global CSS styles and import those styles into the layout component to be used throughout the site.
Gatsby Layout Q&AJason 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 MarkdownJason 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 MDXJason 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 FrontmatterJason 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 MDXJason 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 PostsJason 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 ImagesJason 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 ImagesJason 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 EffectsJason 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 MDXJason 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 GraphQLJason 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 CMSJason 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 DataJason 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 DataJason 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 NetlifyJason 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.