Gatsby Static Site Generator Tutorial

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=RaTpreA0v7Q

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

#############################

New on site