Getting Started
  • What You Need for this Course
Creating our Gatsby Project
  • Using the Gatsby Docs
  • Creating our Project with the Gatsby CLI
  • Gatsby Starters to Easily Bootstrap New Projects (Optional)
Exploring our Gatsby Project
  • Gatsby Project File Structure
  • Gatsby API Files / Using Git for File Tracking
Pages and Components in Gatsby
  • Creating Pages, Routes and Nested Routes in Gatsby
  • Adding App Structure with Layout Component / Links in Gatsby
Querying Data with GraphQL / GraphiQL IDE
  • Getting Site Metadata with GraphQL and Static Queries
  • Using GraphiQL IDE to run our GraphQL Queries
  • Executing GraphQL Queries in our Gatsby Components
  • Adding / Querying for Custom Fields on Site Metadata
Source Plugins and Static Queries
  • Querying for Filesystem Data with the gatsby-source-filesystem
  • Executing Static Queries from Scratch
Transformer Plugins / Creating a Blog out of Markdown Files
  • Transformer Plugins / Using gatsby-transformer-remark to Transform Markdown
  • Displaying Preview of Markdown Posts in Blog Page
Programmatically Creating Pages with Gatsby
  • Programmatically Creating Slugs for Blog Posts with gatsby-node
  • Programmatically Creating Pages with gatsby-node
GraphQL Arguments, Variables, and Page Queries
  • Using GraphQL Arguments and Variables to Get Individual Posts
  • Fetching Individual Post Data by Slug with Page Queries
Pagination in Gatsby
  • Links to Blog Posts / Programmatically Creating Blog Pages
  • Adding Pagination with Prev Page / Next Page Links
  • Adding Numbered Pagination
Sorting and Filtering with GraphQL Queries / Formatting Dates and Text
  • Sorting, Filtering, Limiting, Skipping w/ GraphQL Arguments / Listing Blog Posts
  • Formatting Dates in Gatsby / Format Function in Moment
  • Formatting Excerpts
  • Time To Read for each Post / Formatting Dates on our Blog Pages
Images in Gatsby / Amazing Responsive Images with Gatsby Image
  • Importing Images in Gatsby / Adding our Site Logo
  • What is Gatsby Image / Why Use Gatsby Image
  • Querying for Images in GraphiQL / gatsby-transformer-sharp Plugin in Action
Advanced Image Concepts in Gatsby / GraphQL Fragments
  • GraphQL Fragments for Easier Image Queries / Displaying Images with Gatsby Image
  • Key Details about Images Served with Gatsby Image
  • Embedding Images in Markdown Files with gatsby-remark-images
Contentful as our Headless CMS / Creating and Managing Products with Contentful
  • Intro to Headless CMS and Contentful / Creating Content Model for our Products
  • Managing Environment Variables within Gatsby / Fetching Products from Contentful
  • Creating our Individual Product Pages / Displaying Contentful Images
  • Querying / Previewing all Products on Products Page
Creating a Shopping Cart / Checkout Functionality with Snipcart
  • Add Ability to Purchase Products with Snipcart
  • Display Shopping Cart Summary in Header
  • Adding Custom NavLinks in Header Component
Deploying our Gatsby Sites with Netlify / Setting up Continuous Integration
  • Using Netlify for Deployment / Continuous Deployment with Github
User Authentication in Gatsby / Netlify Identity
  • Using Netlify Identity for Multi-Factor Authentication in our Site
  • Displaying Private Products for Auth Users