Gatsby Demystified: A complete course on how Gatsby V3 works

Compare hosting Gatsby projects using Firebase and Netlify, detailing free plans and paid tiers, including data transfer, storage, bandwidth, and build minutes.

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.

Explore the Gatsby config, including site metadata, title, description, author, plugins, and theming. Learn how to stop and restart Gatsby to apply config changes and see updates on localhost:8000.

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.

Explore how Gatsby organizes a site using components, layout, and SEO metadata, focusing on the layout.js structure, header, content, and footer to compose 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.

Learn to install React Bootstrap in a Gatsby template using npm, import components in the layout, and override bootstrap defaults for consistent styling across projects.

Upload your template to GitHub, create a new repository, and push the initial changes to main using git commands and the built-in gitignore from the 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 React Bootstrap builds on vanilla Bootstrap to craft responsive Gatsby sites, using grid rows and columns and the evolution from Twitter Bootstrap to Bootstrap 4.5.

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.

Explore how GraphQL acts as a universal language in Gatsby, pulling metadata, images, and content from WordPress and other sources via plugins.

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.

Learn how to use a Gatsby page query to fetch file data, bind it to a data variable, and render it on the index page.

Transform raw GraphQL data into human-friendly output by applying a date format to the modified time. Copy and paste the result to improve readability and enable alphabetical sorting.

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.

Install the Gatsby plugin image, plugin sharp, and transformer sharp alongside the source file system, then save and run Gatsby develop to ensure no errors.

Learn how the gbimage-bridge plugin powers Gatsby v3 background image and how to install Gatsby plugins with npm.

Install react-bootstrap via npm to enable a container layout with rows and columns for the project.

Set up css in a Gatsby v3 project by creating a success folder, importing react bootstrap styles, and wiring a custom.css, then test the index page on localhost:8000.

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.

Discover the power of Gatsby static image: reference images with relative paths, set alt text and blurred placeholders, and compare responsive behavior and performance against traditional image tags.

Learn how to derive accessible alt information from GraphQL data in a Gatsby v3 project, including string manipulation to create meaningful image descriptions for accessibility.

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.

Set up a Gatsby template from a GitHub repo, integrate Google fonts via a blank CSS file, and boot the Gatsby development server to preview the starter design.

Learn how to add Google fonts to a Gatsby v3 project by importing from fonts.google.com, applying a font family to headings, and preloading the font for fast rendering.

Preload Google fonts in Gatsby with the preload fonts plugin by installing via npm or yarn, updating package.json and gatsby-config, and running npm run preload fonts alongside Gatsby develop.

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.

Build a Gatsby project and render a responsive YouTube video using react bootstrap and bootstrap's embed responsive, achieving a 16 by 9 video inside a two-column layout.

Discover how markdown files with front matter power content in Gatsby and render profiles with pictures and text. Build links, pull content from Parktown files, and design with Riak bootstrap.

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.

Learn how to implement slugs and links in Gatsby v3, wire node.fields.slug into queries, link titles to slugs, and pull html content into famous people pages.

Learn how to sort data in Gatsby by using front matter fields and set the order to ascending, arranging markdown remarks by title from A to Z.