Gatsby Static Site Generator Tutorial

Gatsby Static Site Generator Tutorial

freeCodeCamp.org via freeCodeCamp Direct link

) Intro

1 of 97

1 of 97

) Intro

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Gatsby Static Site Generator Tutorial

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ) Intro
  2. 2 ) Gatsby Info
  3. 3 ) Course Structure
  4. 4 ) Course Requirements
  5. 5 ) Vs Code
  6. 6 ) Module Intro
  7. 7 ) Install Gatsby-Cli
  8. 8 ) Setup New Gatsby Project
  9. 9 ) Folder Structure
  10. 10 ) First Page
  11. 11 ) Error Page
  12. 12 ) Nested Structure
  13. 13 ) Links
  14. 14 ) Navbar
  15. 15 ) Layout Component
  16. 16 ) CSS Module Intro
  17. 17 ) Inline CSS
  18. 18 ) Global CSS
  19. 19 ) CSS Naming Issues
  20. 20 ) CSS Modules
  21. 21 ) Styled-Components
  22. 22 ) House Cleaning
  23. 23 ) Styles
  24. 24 ) Footer
  25. 25 ) Error Page
  26. 26 ) Contact Page
  27. 27 ) Assets And Icons
  28. 28 ) Navbar Setup
  29. 29 ) Navbar Logic
  30. 30 ) Gatsby Image Info
  31. 31 ) Sandbox Setup
  32. 32 ) Install Plugin
  33. 33 ) Static Image Setup
  34. 34 ) Shared Props And Options
  35. 35 ) Options Example
  36. 36 ) All Layouts
  37. 37 ) Height
  38. 38 ) About Page
  39. 39 ) Hero Page
  40. 40 ) Gatsby And GraphQL Intro
  41. 41 ) Gatsby DataLayer In A Nutshell
  42. 42 ) GraphiQL Interface
  43. 43 ) SiteMetadata
  44. 44 ) First Query
  45. 45 ) Explorer
  46. 46 ) Static Query Vs Page Query
  47. 47 ) UseStaticQuery Hook - Code Exporter
  48. 48 ) UseStaticQuery, GraphQL - From Scratch
  49. 49 ) Field Alias
  50. 50 ) Query Keyword, Name And Gatsby Clean
  51. 51 ) Page Query
  52. 52 ) Install SOURCE-FILESYSTEM Plugin
  53. 53 ) AllFile Field
  54. 54 ) Query Arguments
  55. 55 ) Static Path Fix
  56. 56 ) File - Field
  57. 57 ) SourceInstanceName - Argument
  58. 58 ) Gallery Setup
  59. 59 ) GatsbyImageData - Field
  60. 60 ) Render Gallery
  61. 61 ) GetImage - Helper Function
  62. 62 ) Local VS External Data
  63. 63 ) Headless CMS
  64. 64 ) Contentful
  65. 65 ) Setup Contentful Account
  66. 66 ) Content-Type
  67. 67 ) Content
  68. 68 ) Connect Gatsby - Contentful
  69. 69 ) ENV Variables
  70. 70 ) AllContentfulRecipe - Field
  71. 71 ) AllRecipes Component
  72. 72 ) RecipesList Component
  73. 73 ) Featured Recipes
  74. 74 ) Utils Setup
  75. 75 ) Helper Function
  76. 76 ) TagsList
  77. 77 ) Tags Page
  78. 78 ) Recipe Template Page Setup
  79. 79 ) Recipe Template Page Walkthrough
  80. 80 ) Slugify
  81. 81 ) Query Variables
  82. 82 ) Recipe Template Query
  83. 83 ) Recipe Template Return
  84. 84 ) GATSBY-NODE.JS Setup
  85. 85 ) Create Tag Pages Programmatically
  86. 86 ) Tag Template Return
  87. 87 ) Possible Bug Fix
  88. 88 ) Fonts
  89. 89 ) Contact Form
  90. 90 ) FAVICON
  91. 91 ) SEO Setup
  92. 92 ) SEO - Props
  93. 93 ) SEO - Complete
  94. 94 ) Netlify Info
  95. 95 ) Netlify - Drag And Drop
  96. 96 ) Continuous Deployment
  97. 97 ) Webhooks

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.