Kukuh  Pratama

Kukuh Pratama

1625108700

Beginner Gatsby JS - Build a Beautiful Blog with Gatsby.js

This course was recorded in 2020. It still has a lot of valuable learnings. Learn how to create a personal blog with light and dark modes. Gatsby JS is based on React JS and GraphQL and I’ll show how to build the project from scratch.

Starter files: https://github.com/weibenfalk/beginner-gatsby-starter-files/

  • 0:00 - Intro
  • 01:09 - What is Gatsby?
  • 06:21 - Introduction to the project
  • 08:29 - Starter files
  • 12:00 - Setup - Gatsby CLI
  • 16:34 - Setup - Folder Structure
  • 22:22 - Setup - Dependencies
  • 27:51 - Setup - Copy from Starter files
  • 30:51 - Setup - Plugins and config
  • 38:26 - Setup - Absolute imports45:37 - Tech - OPTIONAL - Markdown
  • 49:36 - Tech - OPTIONAL - Markdown files in project
  • 54:02 - Tech - OPTIONAL - GraphQL
  • 56:55 - Tech - OPTIONAL - GraphQL Query types in Gatsby
  • 1:00:21 - Tech - OPTIONAL - GrqphiQL Editor
  • 1:03:10 - Tech - OPTIONAL - Styled Components
  • 1:06:37 - Tech - OPTIONAL - Styled Components - Some alternatives
  • 1:08:43 - Global Styles - Colors and themes
  • 1:16:20 - Global Styles - CSS
  • 1:27:37 - Layout - Explained
  • 1:30:24 - Layout - Cleanup project
  • 1:36:33 - Layout - Index
  • 1:41:16 - Layout - useMetaDataQuery hook
  • 1:48:59 - Header - useSiteConfigQuery hook
  • 1:56:11 - Header - Index
  • 2:00:50 - Header - Styling
  • 2:05:51 - Header - Menu - Index
  • 2:12:14 - Header - Menu - Styles
  • 2:18:41 - Header - Hamburger - Index
  • 2:23:01 - Header - Hamburger - Styles
  • 2:32:12 - Header - Mobile menu - Index
  • 2:36:03 - Header - Mobile menu - CSS
  • 2:47:25 - Home Page - Index
  • 2:54:59 - Home Page - Page query
  • 3:04:00 - Home Page - Image query
  • 3:10:44 - Home Page - Hero - Index
  • 3:14:37 - Home Page - Hero - useHeroQuery hook
  • 3:22:42 - Home Page - BGImage - Index3:26:17 - Home Page - BGImage - CSS
  • 3:33:40 - Home Page - Hero - CSS3:41:56 - Home Page - BlogPostCard - Index
  • 3:47:42 - Home Page - BlogPostCard - CSS
  • 3:54:43 - Home Page - Finished for now
  • 4:03:12 - Light and Dark mode - ModeProvider and Context
  • 4:09:56 - Light and Dark mode - Gatsby Browser API
  • 4:11:57 - Light and Dark mode - Mode button
  • 4:17:25 - Light and Dark mode - Implementing Mode button
  • 4:23:49 - Pages and Posts - slugs
  • 4:31:22 - Pages and Posts - GraphQL query4:38:25 - Pages and Posts - templates
  • 4:49:34 - Pages and Posts - Dynamically create pages
  • 4:58:28 - Archive and Pagination - Node
  • 5:05:21 - Archive and Pagination - Index template
  • 5:11:46 - Archive and Pagination - Page Navigation - Index
  • 5:19:10 - Archive and Pagination - Page Navigation - CSS
  • 5:25:32 - Deploy - Netlify
  • 5:28:59 - Deploy - Gatsby Cloud

Support me by subscribing to this channel ❤️

Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀
Check out my premium courses at https://www.weibenfalk.com

—

Find me somewhere below:

Website: https://www.weibenfalk.com
Udemy: https://www.udemy.com/user/thomas-928/
Linkedin: https://www.linkedin.com/in/thomas-weibenfalk-76356611/
Twitter: https://twitter.com/weibenfalk
Github: https://github.com/weibenfalk
FreeCodeCamp: https://www.freecodecamp.org/news/author/thomas-weibenfalk/
Dev.to: https://dev.to/weibenfalk

#gatsby #web-development #webdev

Beginner Gatsby JS - Build a Beautiful Blog with Gatsby.js