YoVDO

Gatsby Static Site Generator Tutorial

Offered By: freeCodeCamp

Tags

Gatsby Courses Web Development Courses GraphQL Courses Data Management Courses Content Management Courses Styled-components Courses Contentful Courses

Course Description

Overview

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.


Taught by

freeCodeCamp.org

Related Courses

30 Days to Learn Laravel
Laracasts
3D Graphics for Web Developers
Pompeu Fabra University via FutureLearn
A Beginner’s Guide to Web Development with HTML5
Packt via FutureLearn
Accessibility Audit
Amazon Web Services via AWS Skill Builder
Expanding Your JS Skills with Angular
A Cloud Guru