• $47

Up and Running with Gatsby

  • Closed

Gatsby is an incredible Jamstack platform for building static and dynamic sites. Whether you're building a sales site, a personal portfolio or blog, or wanting to migrate from WordPress to React web development, Gatsby is an amazing tool for the job.

Learn Gatsby from scratch.

If you've ever tried to learn a new platform like Gatsby, you might have tried reverse engineering an existing template or starter project. This seems like a good idea in theory, but as you muddle through it starts to be difficult to understand whether bugs or problems are inherent to the framework or part of the starter project.

I built the Gatsby course I wish existed. Instead of throwing a bunch of irrelevant technologies at you, we start with a very simple default starter and gradually add to it piece by piece. We cover:

  • Gatsby basics like linking and routing
  • Images in Gatsby
  • Markdown and MDX
  • Styling options like CSS modules and styled components
  • SEO
  • Deployment
  • and much more

By the end, you'll feel like you have the skills you need to start building awesome Gatsby projects.

Let's dive in!

This course is also available on Thinkster.io with a Pro membership.

Contents

Course Intro

About this Course
Preview
Course Welcome
Gatsby Core Concepts
Course Philosophy
Preview
Course Repo Walkthrough
Preview

First Steps with Gatsby

Install Gatsby CLI
Preview
Clone Hello World Project
Preview
Basic Project Structure
Preview
Gatsby Development Server
Adding Pages
Assignment: Create Hotel Site
Hotel Site Solution
Gatsby Link
Assignment: Links
Links Solution
Chapter Recap

Basic Layouts

Chapter Intro
Preview
Basic Layout Component
Preview
Assignment: Add Layout to About
Adding a header component
Controlling Layouts with Props
Assignment: Nav Bar
NavBar Solution
Layouts Wrapup

Styling in Gatsby

Styling Intro
Preview
Inline CSS
Preview
Global styles
Global Styles in gatsby-browser
Assignment: Change Fonts
Solution: Change Fonts
CSS Modules
Assignment: CSS Modules
Solution: CSS Modules
Intro to CSS in JS
Installing Styled Components
Using Styled Components
Assignment: Styled Components
Solution: Styled Components
Styling Recap

Data in Gatsby

Overview of Data in Gatsby
Preview
Add Site Metadata
Preview
GraphiQL Explorer
Use Site Data in Static Query
Page Queries
Assignment: Queries
Solution: Page Query
Solution: Static Query
Chapter Recap

Working with Markdown

Chapter Intro
Preview
Adding MDX
Preview
Adding a Custom Layout
Extracting a Default Layout
Assignment: Create Events Page
Solution: Events Page
Add files as sources
Looking at Files with GraphiQL
Creating Slugs
Creating Pages
Correction Event Page Layout
Event Page Query
Finishing the Event Layout
Assignment: Date and Frontmatter
Solution: Date and Frontmatter
Events Index Query
Events Index Code
Chapter Recap

Working with Images

Chapter Intro
Preview
Importing Images
Preview
The Static Folder
Gatsby Image and Sharp
Adding Image Plugins to Config
Building an Image Query
Using the Image Query
Assignment: Add Image to About
Solution: About Image
Updating Events Query
Add Images to Frontmatter
Extract Image Component
Inline Images in Markdown
Assignment: Add Images to Markdown
Solution: Add Images to Markdown
Chapter Recap

Taking Gatsby to Production

Chapter Intro
Preview
Fixing the Build: Part 1
Fixing the Build: Part 2
Install React Helmet
Preview
Use React Helmet in Layout
Assignment: SEO Component
Solution: SEO Component
Deploy to Netlify
Chapter Recap
Thank You and Where to Go From Here

  • $47

Up and Running with Gatsby

  • Closed

Gatsby is an incredible Jamstack platform for building static and dynamic sites. Whether you're building a sales site, a personal portfolio or blog, or wanting to migrate from WordPress to React web development, Gatsby is an amazing tool for the job.