Gatsby Static Site Generator Tutorial

Ecommerce Empire Academy

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:

✏️ Course from John Smilga of Coding Addict. Check out his channel:

⭐️ 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:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

33 thoughts on “Gatsby Static Site Generator Tutorial”

    1. Beksultan Omirzak

      Yeap, I agree with you. I got some react courses but I don’t know it makes me confusing so I took John’s react course. It helped me to learn to react easily and clearly !!

    2. Bro do you know which courses should I learn to do these following :-

      ~ To create a pirated version of a paid software
      ~ To download videos from DRM protected website.

      I don’t want to download them using apps or websites, I want to learn how to do those stuffs.

      Sorry, My English is bad 🙂

  1. I guess this is a good place to ask this because I’m a beginner. But I can make a really nice static site for a friend or a client, but what I really need is a backend that they can interact with like a CMS. If people build a project like this recipes page, presumably for a client, what tools do you use to hand over the page so that the client who is not as technically savvy can interact with the content and add new things from an admin side?

    1. You can use strapi or contentful headless CMS or any other headless CMS per say.
      They mange the contents. You source the data from these CMS to frontend.

    2. @siemen_subbaiah
      Bro do you know which courses should I learn to do these following :-

      ~ To create a pirated version of a paid software
      ~ To download videos from DRM protected website.

      I don’t want to download them using apps or websites, I want to learn how to do those stuffs.

      Sorry, My English is bad 🙂

      But please reply me 🥺🥺🥺

    3. Christina Giancola

      Hi Kyle! I’m taking on a first freelance project and am facing similar questions — was wondering if you could share what solutions you’ve implemented and if you have any other general advice/tips. Thanks!

    1. Bro do you know which courses should I learn to do these following :-

      ~ To create a pirated version of a paid software
      ~ To download videos from DRM protected website.

      I don’t want to download them using apps or websites, I want to learn how to do those stuffs.

      Sorry, My English is bad 🙂

  2. John is so awesome man. The guy rolls out 9-10 hour full tutorials for absolutely free. I just recently finished this full course on udemy. It’s full of real world projects. Loved it!

    1. Bro do you know which courses should I learn to do these following :-

      ~ To create a pirated version of a paid software
      ~ To download videos from DRM protected website.

      I don’t want to download them using apps or websites, I want to learn how to do those stuffs.

      Sorry, My English is bad 🙂

  3. John once again after React js omg I cannot miss watching his video on gatsby, Thankyou so much Boss…

  4. great content, this channel is to be congratulated, it seems it doesn’t have much content about Rust language, it would be a good video suggestion

  5. Hi, I m a bit stock on how to add a modal. In React we have the index.html and I can add a div outside the div “root” and add a modal / overlay. Gatsby creates the index.html when build for deployment. So my question is how to add the modal if there is no index.html during development. Thank you !

  6. Hey tanks for your tutoriel !
    Could you remove the parenthesis that wrap timecodes ? It seems to block chapters display in the player

  7. Илья Лысков

    Awesome, please remove the parenthesis that wrap timecodes. It seems to block chapters display in the player

  8. the word recipe doesnt look real anymore…but other than that this has been a great tutorial. Thank you!

  9. Akter Uddin Rony

    This is one of the best Gatsby Tutorial for free.
    I have been looking for so long for a structured tutorial like this.
    Thanks John for the initiatives.

Comments are closed.