Gatsby Static Site Generator Tutorial

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Embark on a comprehensive 9-hour tutorial to master Gatsby version 3, a powerful static site generator for rapid website development. Create a fully functional recipes website while exploring key concepts such as project setup, page creation, styling with CSS modules and styled-components, working with Gatsby images, and leveraging GraphQL for data management. Dive into advanced topics including integrating with Contentful CMS, programmatic page generation, SEO optimization, and deploying your site to Netlify. Perfect for beginners, this course covers everything from basic Gatsby concepts to complex features, providing hands-on experience in building modern, efficient websites.

Syllabus

) Intro .
) Gatsby Info .
) Course Structure .
) Course Requirements .
) Vs Code .
) Module Intro .
) Install Gatsby-Cli .
) Setup New Gatsby Project .
) Folder Structure .
) First Page .
) Error Page .
) Nested Structure .
) Links .
) Navbar .
) Layout Component .
) CSS Module Intro.
) Inline CSS.
) Global CSS.
) CSS Naming Issues.
) CSS Modules.
) Styled-Components.
) House Cleaning.
) Styles.
) Footer.
) Error Page.
) Contact Page.
) Assets And Icons.
) Navbar Setup.
) Navbar Logic.
) Gatsby Image Info.
) Sandbox Setup.
) Install Plugin.
) Static Image Setup.
) Shared Props And Options.
) Options Example.
) All Layouts.
) Height.
) About Page.
) Hero Page.
) Gatsby And GraphQL Intro.
) Gatsby DataLayer In A Nutshell.
) GraphiQL Interface.
) SiteMetadata.
) First Query.
) Explorer.
) Static Query Vs Page Query.
) UseStaticQuery Hook - Code Exporter.
) UseStaticQuery, GraphQL - From Scratch.
) Field Alias.
) Query Keyword, Name And Gatsby Clean.
) Page Query.
) Install SOURCE-FILESYSTEM Plugin.
) AllFile Field.
) Query Arguments.
) Static Path Fix.
) File - Field.
) SourceInstanceName - Argument.
) Gallery Setup.
) GatsbyImageData - Field.
) Render Gallery.
) GetImage - Helper Function.
) Local VS External Data.
) Headless CMS.
) Contentful.
) Setup Contentful Account.
) Content-Type.
) Content.
) Connect Gatsby - Contentful.
) ENV Variables.
) AllContentfulRecipe - Field.
) AllRecipes Component.
) RecipesList Component.
) Featured Recipes.
) Utils Setup.
) Helper Function.
) TagsList.
) Tags Page.
) Recipe Template Page Setup.
) Recipe Template Page Walkthrough.
) Slugify.
) Query Variables.
) Recipe Template Query.
) Recipe Template Return.
) GATSBY-NODE.JS Setup.
) Create Tag Pages Programmatically.
) Tag Template Return.
) Possible Bug Fix.
) Fonts.
) Contact Form.
) FAVICON.
) SEO Setup.
) SEO - Props.
) SEO - Complete.
) Netlify Info.
) Netlify - Drag And Drop.
) Continuous Deployment.
) Webhooks.