Gatsby Static Site Generator Tutorial

Learn how to use Gatsby (Version 3) in this full course for beginners. Gatsby is a static site generator that makes it quick to develop websites. You will learn how to create a recipes site. 💻 Code: https://github.com/john-smilga/gatsby... ✏️ Course from John Smilga of Coding Addict. Check out his channel:    / @codingaddict   ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Intro ⌨️ (0:00:56) Gatsby Info ⌨️ (0:02:46) Course Structure ⌨️ (0:03:28) Course Requirements ⌨️ (0:05:09) Vs Code ⌨️ (0:06:02) Module Intro ⌨️ (0:07:29) Install Gatsby-Cli ⌨️ (0:09:29) Setup New Gatsby Project ⌨️ (0:15:07) Folder Structure ⌨️ (0:29:42) First Page ⌨️ (0:38:26) Error Page ⌨️ (0:41:01) Nested Structure ⌨️ (0:44:41) Links ⌨️ (0:51:21) Navbar ⌨️ (0:56:26) Layout Component ⌨️ (1:05:44) CSS Module Intro ⌨️ (1:06:47) Inline CSS ⌨️ (1:08:27) Global CSS ⌨️ (1:14:01) CSS Naming Issues ⌨️ (1:17:50) CSS Modules ⌨️ (1:28:04) Styled-Components ⌨️ (1:40:51) House Cleaning ⌨️ (1:48:33) Styles ⌨️ (1:53:05) Footer ⌨️ (1:56:31) Error Page ⌨️ (1:57:38) Contact Page ⌨️ (2:03:45) Assets And Icons ⌨️ (2:10:56) Navbar Setup ⌨️ (2:20:11) Navbar Logic ⌨️ (2:24:51) Gatsby Image Info ⌨️ (2:28:30) Sandbox Setup ⌨️ (2:34:36) Install Plugin ⌨️ (2:38:15) Static Image Setup ⌨️ (2:45:41) Shared Props And Options ⌨️ (2:50:20) Options Example ⌨️ (2:58:10) All Layouts ⌨️ (3:04:29) Height ⌨️ (3:09:04) About Page ⌨️ (3:18:56) Hero Page ⌨️ (3:25:19) Gatsby And GraphQL Intro ⌨️ (3:28:39) Gatsby DataLayer In A Nutshell ⌨️ (3:30:20) GraphiQL Interface ⌨️ (3:36:35) SiteMetadata ⌨️ (3:42:14) First Query ⌨️ (3:51:27) Explorer ⌨️ (3:53:52) Static Query Vs Page Query ⌨️ (3:55:18) UseStaticQuery Hook - Code Exporter ⌨️ (4:01:34) UseStaticQuery, GraphQL - From Scratch ⌨️ (4:12:05) Field Alias ⌨️ (4:15:06) Query Keyword, Name And Gatsby Clean ⌨️ (4:18:19) Page Query ⌨️ (4:25:20) Install SOURCE-FILESYSTEM Plugin ⌨️ (4:35:33) AllFile Field ⌨️ (4:41:50) Query Arguments ⌨️ (4:50:03) Static Path Fix ⌨️ (4:51:26) File - Field ⌨️ (4:54:48) SourceInstanceName - Argument ⌨️ (4:56:56) Gallery Setup ⌨️ (5:00:47) GatsbyImageData - Field ⌨️ (5:08:56) Render Gallery ⌨️ (5:20:41) GetImage - Helper Function ⌨️ (5:25:23) Local VS External Data ⌨️ (5:26:50) Headless CMS ⌨️ (5:28:49) Contentful ⌨️ (5:29:37) Setup Contentful Account ⌨️ (5:33:14) Content-Type ⌨️ (5:40:07) Content ⌨️ (5:47:36) Connect Gatsby - Contentful ⌨️ (5:52:36) ENV Variables ⌨️ (5:58:48) AllContentfulRecipe - Field ⌨️ (6:05:57) AllRecipes Component ⌨️ (6:15:00) RecipesList Component ⌨️ (6:26:59) Featured Recipes ⌨️ (6:37:50) Utils Setup ⌨️ (6:42:47) Helper Function ⌨️ (6:50:27) TagsList ⌨️ (6:54:14) Tags Page ⌨️ (7:00:22) Recipe Template Page Setup ⌨️ (7:04:57) Recipe Template Page Walkthrough ⌨️ (7:14:00) Slugify ⌨️ (7:18:15) Query Variables ⌨️ (7:27:05) Recipe Template Query ⌨️ (7:34:27) Recipe Template Return ⌨️ (7:46:45) GATSBY-NODE.JS Setup ⌨️ (7:50:43) Create Tag Pages Programmatically ⌨️ (8:08:36) Tag Template Return ⌨️ (8:20:07) Possible Bug Fix ⌨️ (8:26:53) Fonts ⌨️ (8:32:40) Contact Form ⌨️ (8:37:16) FAVICON ⌨️ (8:39:23) SEO Setup ⌨️ (8:45:40) SEO - Props ⌨️ (8:51:34) SEO - Complete ⌨️ (9:01:05) Netlify Info ⌨️ (9:01:58) Netlify - Drag And Drop ⌨️ (9:05:32) Continuous Deployment ⌨️ (9:14:44) Webhooks 🎉 Thanks to our Champion and Sponsor supporters: 👾 Wong Voon jinq 👾 hexploitation 👾 Katia Moran 👾 BlckPhantom 👾 Nick Raker 👾 Otis Morgan 👾 DeezMaster 👾 AppWrite -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp