Gatsby

Frontend Masters: Introduction to Gatsby

Spend A Full Day Immersed in Gatsby with Jason Lengstorf

In this workshop, 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