/gatsby-intro

Code for the Introduction to Gatsby course.

Primary LanguageJavaScriptMIT LicenseMIT

Gatsby

Frontend Masters: Introduction to Gatsby

In this course, learn to build blazing fast apps and websites with React using Gatsby, a static PWA (Progressive Web App) generator. Over 50% of people will abandon a mobile site if it takes more than 3 seconds to load. Unless you’re willing to give up half of your potential customers, performance is no longer optional on the modern web. Fortunately, there are a lot of tools available to help you build screaming fast websites. Unfortunately, there’s a frighteningly large number of performance considerations, and many of them are easy to get wrong.

What You’ll Learn

  • Learn how to leverage free, open source tools including Gatsby, React, and GraphQL to build high-performance websites.
  • Deliver an excellent experience to your users by providing only critical assets on load and prefetching assets for subsequent page loads.
  • Implement performance best practices, such as the PRPL pattern, lazy loading assets, and more.
  • Learn to build and deploy blazing fast websites in the fraction of time.
  • Create websites quickly with performance baked in.
  • Deploy your sites for free in minutes with Netlify.

Installation Instructions

For windows users, go through the installation instructions for cross-env and add it to your package.json develop script.

  1. npm install
  2. npm run develop
  3. Open http://localhost:8000/

Course Slides (hit the right/down arrow keys to progress through the slides)

Prerequisites

  1. Have a text editor installed, i.e. VSCode
  2. Have the Gatsby CLI (gatsby-cli) installed globally by running: npm install -g gatsby-cli

Course Errata

The gatsby-mdx plugin was deprecated in favor of gatsby-plugin-mdx.

Fixed code: See this commit to migrate to gatsby-plugin-mdx

Video: Jason installs this plugin in the Rendering Components in MDX video at 1 minute, 32 seconds.

View the step4/mdx-blog branch for final code for the section.

An additional config line needs to be added to configure gatsby-remark-images.

Fixed code: See this commit to configure gatsby-remark-images'

Video: Jason configures remark images in the Adding Optimized Images to Post at 1 minute, 49 seconds.

View the step6/blog-images branch for final code for the section.