This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Table of Contents
Introduction
Introduction
Jason Lengstorf introduces Gatsby, mentions the course prerequisites, and explains that Gatsby builds default settings that make starting and deploying apps to production a smooth process.
What is Gatsby
Jason defines Gatsby as a progressive web app generator that allows users to work on an app offline, normalizes third-party data, and generates only static assets. Gatsby follows the PRPL pattern, push, render, pre-cache, and lazy-load.
Gatsby Advanced Features Overview
Jason gives an overview of advanced features in Gatsby, such as theming and theme composition, by writing up bundled functionality and style, and schema customization.
Course Overview
Jason states that the first part of the course will focus on building a custom Gatsby theme, the second part will be about installing a custom theme on an existing site, the third part about will be about building a site using the docs theme, and the fourth part will be about setting up a dynamic app with client-side GraphQL using Apollo.
Gatsby Theme Set Up
Benefits of Gatsby Themes
Jason explains the major benefits are of using a Gatsby theme over of a boilerplate. A theme is an npm package, each theme is a different part of a website (main page, blog, e-commerce etc.) that can be updated easily using npm.
Workspace Setup
Jason explains that a yarn workspace allows working on two different packages simultaneously, and demonstrates how to create workspaces and themes in Gatsby.
preBootstrap Hook
Jason configures the newly created theme and sets it up with a preBootstrap hook, a node that allows access to a Gatsby API. The content path is also built in this section.
mkdirp Library
Jason uses the mkdirp library, a JavaScript library, which creates directories recursively. This allows the user to create as many directories as necessary within a theme.
Gatsby Theme & MDX Files
Loading MDX Files
Jason demonstrates how to create an mdx file, and how to install the Gatsby source file system, the necessary Gatsby mdx dependencies, and the use External MDX hook to determine if MDX should be used inside a theme. MDX is a markdown that allows the use of embedded JSX.
Layout Component
Jason demonstrates how to build a layout component that organizes the different data layers.
Schema Customization
Jason demonstrates how to create a schema customization, which will allow users to query the different parts of a webpage that need to be rendered using GraphQL under the hood.
MDX Nodes
Jason demonstrates how to create MDX nodes using the onCreateNode hook, and explains that nodes are data structures in Gatsby.
Configuring Resolvers
Jason builds a pass through resolver, allowing the docs page to handle requests for MDX data.
Templates
Jason creates a docs template file, demonstrates how to query a page in Gatsby using GraphQL, and verifies that the page query setup on GraphQL runs, before adding it to the query docs-page-template file.
Creating an MDX Page
Jason explains what Gatsby looks for and executes when rendering a page. How to render a page, its MDX content, and its layout is also discussed.
Theme UI
Theme UI Plugin
Jason demonstrates how to add the Gatsby theme UI plugin, how to access the theme UI props, and how to use the Gatsby sx property to improve the theme UI.
Component Shadowing
Jason introduces component shadowing in Gatsby, which overrides a file in another theme or plugin without needing to modify the source code.
Global Styles
Jason demonstrates how to add global styles, uses global styles to remove the margin and padding in the body, and adds a cautionary note to use global styles sparingly so that there is no conflict with the theme UI.
JSX Pragma
Jason adds more styles to the docs page, and demonstrates how to access the theme as an argument passed to a function.
useStaticQuery Hook
Jason demonstrates how to use the useStaticQuery hook to get data from a GraphQL query by creating a table of content, and linking different pages to the table.
Syntax Highlighting
Jason explains that the main use of a docs theme is the ability to show code snippets, and demonstrates how to add syntax highlighting to the snippets.
React Live
Jason demonstrates how to install React Live to be able to interact with code snippets, and explains that it is one of the essential features when building a documentation page or a docs theme.
Using Themes
Install a Theme
Jason demonstrates how to install an external theme and adds it to the theme developed in the previous section. Instead of creating brand new themes, features from one theme can be used in another.
Theme UI Setup
Jason gives an overview of the third site to be built during this course, and explains that the UI needs to be improved by installing a theme.
Styling with Theme UI
Jason adds styling to the third site using theme UI by importing the layout component into the different website pages.
Inline Styling with sx
Jason continues to improve the UI by adding styling to the layout component, and importing the component into the different pages. The styling is added inline using sx, a Gatsby prop.
Images & Cloudinary
Jason explains how to improve the user experience of the website built in this section by adding images, and demonstrates how to use the cloudinary API. Cloudinary is a platform that stores images.
Using External Images
Jason demonstrates how to add image queries to a page using GraphQL, and Cloudinary.
Extending Theme UI Variants
Jason demonstrates how to use the layout component created for the current site, and use it with the docs theme live coded in a previous section.
Theme Composition
Jason demonstrates how to use multiple themes together to have a higher amount of utilities with less development work.
Routing
Setting up Dynamic Routes
Jason demonstrates how to install the Netlify CLI to create the client side of a new project, a website that allows to search for and query data.
Client Routes
Jason live codes a form for the search page started earlier on this course, a search query, routes and redirects using netlify.
Rendering Results
Jason demonstrates how to query an API using GraphQL, and builds a result component that helps display the data queried.
Querying with Apollo Client
Jason demonstrates how to install the Apollo Client dependencies, and explains how to render load, and render results.
Routing Q&A
Jason answers questions from the audience about the reach router library, serverless functions when making API calls, pre-built data, and TypeScript support in Gatsby.
