Gatsby Demystified: A complete course on how Gatsby V3 works

Deploy a Gatsby v3 site to Google Firebase by configuring hosting, installing firebase-tools, logging in, initializing hosting, building a static site with Gatsby, and deploying the public directory.

Build your Gatsby project with Gatsby build to generate the static site in the public folder, then serve it locally with Gatsby serve and view it at localhost:9000.

Explore the Gatsby pages folder, where the core content lives (index, page two, 404), and learn how hot reload, builds, and serving reveal your site's structure.

Explore how the images folder is linked in Gatsby config and located by the Gatsby source filesystem for your pages.

Start with a white canvas, strip Gatsby's starter to bare bones, and customize it. Tear apart the starter to build a reusable library for future projects.

Strip the default Gatsby design styles to create an empty canvas, then run Gatsby develop to verify success, while removing layout and header inline styles for a bare-bones, customizable template.

Create and test a custom.css file, assign a purple body background to verify linking in the layout, then replace inline styles and import React Bootstrap as the design template.

Edit the root readme.md to customize the Gatsby default starter, rename it Haydon's new default starter, then commit, push to GitHub, and test by downloading.

Bootstrap a Gatsby v3 project by downloading a GitHub template, creating a new project folder with Gatsby new, and running Gatsby develop to mirror the starter setup.

Discover how a Bootstrap 12-column grid uses containers, rows, and columns to build responsive layouts with breakpoints like xs, sm, md, and lg.

Explore various grid options in React Bootstrap, adjust column sizes across xs, sm, md, lg, and xl breakpoints, and understand offsets, spacing, and responsive container row and column layouts.

Set up a new Gatsby project from a starter template, install dependencies, and run Gatsby develop to view localhost:8000; use graph qol to pull image metadata from the images folder.

Explore how the all file option fetches and displays file data from the images folder, showing ids, base names, extensions, modified time, and pretty size to map content.

Sort data in Gatsby v3 by the base field in GraphQL, choose ascending or descending, and apply the sorted allFile results to your page.

Install a Gatsby hello world project from the template, create it with gatsby new, add images, plugins, and react bootstrap, then run gatsby develop to view localhost:8000.

Locate and set up the gatsby-source-filesystem plugin by configuring gatsby-config.js with the images folder, install via npm, and run gatsby develop to view all file edges and relative paths.

Set up the gatsby-plugin-image by importing static image, Gatsby image, and yet image, load an example photo with a react-bootstrap container, and enable multi-format, responsive images for faster loading.

Learn how to implement a full-width Gatsby background image using the gbimage-bridge in Gatsby v3, including importing the image, renaming assets, and configuring the container for proper height.

Explore how to integrate Google fonts and YouTube videos into a Gatsby v3 project, emphasizing responsive design and practical insights from how Gatsby image works.

Set up a Gatsby v3 project by using a default template from GitHub, copy code into your repo, run Gatsby develop to verify, and enable markdown files with a plugin.

Install the gatsby-transformer-remark plugin via npm to enable markdown (MMD) file support in Gatsby, configure it, and load markdown files in your project.

Learn to query markdown data with GraphQL in Gatsby, using front matter fields like title and image to fetch and display MarkdownRemark data on the index page.

Create slugs in gatsby-node by implementing onCreateNode, using createFilePath to build page paths, and attaching a slug field to markdown remark nodes for dynamic linking.