Using Gatsby

Gatsby is a blazing fast modern site generator for React. More info

Articles & Tutorials

Build a coding blog from scratch with Gatsby and MDX (blog.scottspence.me)
Oct 31, 2019
You’re going to build a developer blog with MDX support (for some React components in Markdown goodness), so you will be able to add your own React components into your Markdown posts.
  • Scott Spence
Deploy a Gatsby Site on GitHub Pages for Free (blog.bitsrc.io)
Oct 30, 2019
Learn how to configure Gatsby to easily deploy a blog site on Github Pages.
  • Shaumik Daityari
Play with React Concurrent Mode with Your Gatsby Site (aworkinprogress.dev)
Oct 28, 2019
So the React team released curious cat version for concurrent mode, and I want to try that with my personal sites and side projects, only to realize that by using Gatsby I do not have direct access to my ReactDOM.render(), which I am supposed to change.
  • Wei Gao
Custom Fonts in Gatsby (alligator.io)
Oct 21, 2019
Choosing the right font can add great value to a site and enhance the user experience. The right font-loading strategy, however, can be somewhat of a challenge. That’s why Gatsby provides several developer-friendly solutions for all of our font-loading needs.
  • Juan Villela
MobX and Gatsby (dougwaltman.com)
Oct 17, 2019
I've been moonlighting Gatsby projects in my free time for a couple of years now, while working with Next.js during the day. I've come to love MobX state management with Next, and wanted to bring the goodness to my Gatsby projects. Turns out that it's pretty easy, and I'm going to share the approach I took in a recent project.
  • Doug Waltman
Automating a Gatsby Blog with GitHub and Buddy (alligator.io)
Oct 09, 2019
In this article, you will learn how to build and run a static website capable of handling massive amounts of traffic without requiring expensive and complex hosting infrastructure.
  • Michael Wanyoike
Embedding Videos in Your Gatsby.js Sites (scotch.io)
Oct 08, 2019
The process of adding images is more or less the same. However, videos and GIFs are one level up which is rendered/embedded differently in various web applications, and the embedding process may vary from one framework to another.
  • Maedah Batool
How to Build a Blog with Gatsby and Boostrap (blog.bitsrc.io)
Oct 01, 2019
A complete guide to building a static website with Gatsby.
  • John Au-Yeung
Gatsby vs Next.JS - What, Why and When? (dev.to)
Sep 25, 2019
Ok firstly, I digress, I am a massive fan of both of these "frameworks". I can usually be seen gushing about them on my Twitter or Instagram, however, without a doubt, the question I get asked the most when talking about these tools is which is better? Should I use Next.JS? But I have heard Gatsby is pretty 🔥, maybe I should use that?
  • James Bedford
What is Gatsby and why it's time to get on the hype train (freecodecamp.org)
Sep 25, 2019
Frameworks come and go, and while Gatsby may eventually drift as tech does, the performance and productivity boosts are strong arguments for diving in right away.
  • Colby Fayock
Moving 13 years of WordPress blog to Gatsby Markdown (swizec.com)
Sep 23, 2019
More and more people are creating blogs with Gatsby and that’s exciting as heck! I miss the internet days when everyone had a place to call their own.
Make your designer happier with Gatsby’s image manipulations (itnext.io)
Sep 17, 2019
Gatsby ships with some incredibly powerful plugins for image manipulation, performing operations that would normally require a designer (or an external 3rd-party software) to perform.
  • Aggelos Arvanitakis
How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify (freecodecamp.org)
Sep 11, 2019
When interacting with a backend, a JAMstack app can do everything a mobile app can do, without the tyranny of the app store. This is a fundamental insight that goes as deep as the fight for a more open, secure, decoupled, faster web.
How to Automatically Optimize Responsive Images in Gatsby (sitepoint.com)
Sep 11, 2019
Image optimization — at least in my experience — has always been a major pain when building speedy websites. Balancing image quality and bandwidth efficiency is a tough act without the right tools.
  • Michael Wanyoike
Headless WordPress: Why Gatsby Should Be Next on Your List of Things to Learn (deliciousbrains.com)
Sep 03, 2019
In this post I’ll go over what Gatsby is and why you should think about it for your next WordPress project.
  • Peter Tasker
Using Plugins in Gatsby (alligator.io)
Aug 28, 2019
One of the biggest features of Gatsby.js is their incredible official plugin library. This large collection of Node.js packages taps directly into the Gatsby API, and provides easy ways to extend/add custom functionality to Gatsby websites without adding much extra code. In this short article, we’ll cover the basics of finding and implementing these plugins.
  • Daniel Stout
Build an Infinite Scroll Image Gallery with Gatsby and Netlify Functions (scotch.io)
Aug 20, 2019
In this post, we'll build a performant Infinite Scroll Image gallery using Gatsby.js, which is served over a CDN and uses Netlify functions to serve data from an API during runtime.
  • William Imoh
NextJS vs GatsbyJS - What's the diff? (reacting.dev)
Aug 19, 2019
While both of these frameworks could sometimes be used to hit the same target, they both excel at very different things and also have different costs associated with their implementation.
  • Michael David Friedman
Implementing Microfrontends in GatsbyJS using Ara Framework (itnext.io)
Aug 15, 2019
GatsbyJS is the most popular framework to create static websites. In the software industry, the concept of static site generators is not recent but it’s becoming more popular thanks to the recent evolution of the JavaScript technologies and the introduction of JAMstack.
  • Felipe Guizar Diaz
Intro to MDX in Gatsby (alligator.io)
Aug 15, 2019
In this article we’ll explore the basics of MDX with Gatsby, including some introductory techniques to help you start using it right away.
  • Daniel Stout
How to set up a TypeScript + Gatsby app (blog.logrocket.com)
Aug 14, 2019
In this article, we’ll take one of the starter Gatsby projects and turn it into a TypeScript app.
  • Yomi Eluwande
How to keep state between pages with local state in Gatsby.js (freecodecamp.org)
Aug 14, 2019
When using the static site generator Gatsby you don’t have a base “App” component to play with. That said, there’s no component that wraps around your whole application where you can put your state that needs to be kept between routes/pages.
  • Thomas Weibenfalk
Gatsby, Contentful, and Netlify Walk Into a Bar (alligator.io)
Aug 13, 2019
Static site generators like Gatsby are incredibly developer friendly and make super fast sites, but they’re almost completely inaccessible to non-developers. In this blog post I’ll show you how to change that.
  • Dave Kensell
Simplifying Gatsby Unit Testing using a Jest Preset (dev.to)
Aug 10, 2019
Recently I have been expanding the codebase for my website and blog in order to have a more robust web presence. Part of this of course includes unit testing the source code using Jest.
  • Kepler Sticka-Jones
Building a blazing fast product list with pagination and animations with Gatsby (itnext.io)
Aug 07, 2019
In this tutorial we are going to create a Gatsby site with two pages. The home page with an introduction about the store and some features, and the second page is a product list page with a simple pagination.
  • Nuno Soares
Blazing Fast WordPress Sites With Gatsby (scotch.io)
Jul 31, 2019
Gatsby.js is a free and open-source React.js-based framework which helps developers build blazing-fast websites and apps. JAMstack (JavaScript APIs Markup) is the recent trend and WordPress powers more than 33% of the internet users.
  • Maedah Batool
Gatsby CLI Quick Reference (alligator.io)
Jul 31, 2019
When working with Gatsby.js, we constantly make use of its built-in command line interface (CLI.) This essential tool allows us to do things like creating new projects from starters, launching a dev server with hot-reloading, and generating production builds. Here’s a quick reference guide to help you use it like a pro!
  • Daniel Stout
Working with Images in Gatsby (alligator.io)
Jul 30, 2019
Ensuring that users get the best experience with images on the web can be a tedious task. However, with Gatsby, we can leverage the power of Sharp to get the best performance with a little setup and a rich toolset.
  • Juan Villela
Email Signup Forms with Gatsby and Mailchimp (thetrevorharmon.com)
Jul 24, 2019
In the article, I'll walk you step by step (and provide sample code!) to creating a Mailchimp signup form for Gatsby.
  • Trevor Harmon
Using Airtable With Gatsby (alligator.io)
Jul 22, 2019
Airtable is a cloud-based collaborative database-spreadsheet hybrid application. It offers a flexible and intuitive GUI, reasonable prices, and a full REST API with excellent auto-generated documentation. It also works great as a data source for Gatsby.js, and I’m excited to show you how!
  • Daniel Stout
Handling multi-language support with GatsbyJs (locastic.com)
Jul 19, 2019
Websites are global by nature, but it is becoming increasingly relevant for businesses of all types to create a multilingual website.
  • Ivo Šiško
Using GraphQL Playground with Gatsby (css-tricks.com)
Jul 18, 2019
In this article, we are concerned with the build process, which is powered by GraphQL. This is the part where your data is managed.
  • Adebiyi Adedotun
Making Gatsby a PWA: Service Worker and Web App Manifest (alligator.io)
Jul 18, 2019
Progressive Web Apps (PWAs) allow developers to deliver an app-like experience to the user. Paired with the top-notch performance of Gatsby.js, and you get a blazing fast website.
  • Juan Villela
Adding Sitemaps to Gatsby Websites (alligator.io)
Jul 15, 2019
Thankfully, adding a sitemap to a Gatsby.js project is incredibly simple! Let’s go over how in the post below.
  • Daniel Stout
Using styled-components in Gatsby (alligator.io)
Jul 10, 2019
When creating a new Gatsby.js project, there are several available options for styling. styled-components is one of the most popular CSS-in-JSS solutions, and for good reason. It’s powerful, easy to learn, and it works flawlessly with Gatsby. Let’s explore how to add it into your project!
  • Daniel Stout
Gatsby.js - A powerful Static Site Generator (robinwieruch.de)
Jul 08, 2019
Not long ago, most people argued against a framework like React, Angular or Vue for your personal website. Since then, tools on top of these frameworks – like Gatsby.js for React.js – emerged to make static website development effortless. So if there is no actual demand, why does a static website generator like Gatsby.js do so well?
Building a job board with Gatsby.js, a case study (hackernoon.com)
Jun 08, 2019
Learn how we leveraged Gatsby.js to build a jobs board for software engineers searching for remote roles.
  • Steven Natera
Building a Static Gatsby-based Website with TypeScript (jeffrafter.com)
May 25, 2019
Gatsby is, in many ways, the JavaScript successor to Jekyll. I’ve upgraded several sites to Gatsby (including this one) finding a way to integrate TypeScript as part of the journey.
  • Jeff Rafter
Animated Page Transitions in Gatsby Websites (scotch.io)
May 21, 2019
In this tutorial, we are going to look at a few through which we can add page transitions to our Gatsby applications to make the site a little bit more interesting and fun.
How to build a custom GatsbyJS theme (blog.logrocket.com)
May 21, 2019
Gatsby is a static site generator that is built with React.js, Webpack, and GraphQL. It is used for building very fast websites that have relatively static content, for example, blogs, eCommerce websites, and even company websites.
  • Obinna Ekwuno
How to create a searchable log with Gatsby (medium.freecodecamp.org)
May 16, 2019
I recently wanted a way to quickly jot down things I learn throughout the day, or lessons I want to keep in mind. But that’s not enough — I also need to be able to search these logs so I can find exactly what I’m looking for right away. That’s exactly what I’m going to show you how to build today.
  • Amber Wilkie
Securing Gatsby with Auth0 (auth0.com)
Apr 24, 2019
Learn how to set up Auth0 for identity management in a Gatsby static site.
  • Sam Julien
Convert the Gatsby default starter blog to use MDX (dev.to)
Apr 11, 2019
In this guide we're going to cover converting the Gatsby default blog starter to use MDX.
  • Scott Spence
How to set up GatsbyJS authentication with Auth0 (medium.freecodecamp.org)
Mar 11, 2019
In this tutorial, I’ll be showing you how to use Auth0 which is an authentication and authorization platform to add authentication to your GatsbyJS application and to your serverless function on Netlify.
  • Michael Ozoemena
How to get started with Gatsby 2 and Redux (medium.freecodecamp.org)
Feb 28, 2019
Gatsby + Redux is a powerful combination when building static web-apps with dynamic features. With Gatsby 2, it has never been easier to get up and running. Today, I’m going to guide you through the steps needed.
  • Carl-Johan Kihl
Setting up a GatsbyJS starter with TypeScript, ESLint, Prettier and pre-commit hooks (dev.to)
Feb 24, 2019
In this article, we'll set up the Gatsby default starter blog with TypeScript, ESLint, Prettier and run these before every commit with lint-staged and husky.
  • Arden de Raaij
Content Management with Gatsby, Contentful & Netlify (itnext.io)
Feb 18, 2019
Gatsby, Contentful, Netlify — The Triple Threat For Content Management Success.
  • Babs Craig
From Zero to Deploy: how I created a static website from scratch using Netlify + Gatsby (medium.freecodecamp.org)
Feb 18, 2019
After my first year working as a frontend web developer, I got the idea to have my own personal site. It’d be a platform to showcase my work, share content, and serve as a creative outlet for me outside of work. Here, I’ll walk you through my experience building the site from zero to deploy.
  • Eden Adler
How to Build a Documentation App With Gatsby and Cosmic JS (hackernoon.com)
Feb 15, 2019
Documentation?… Documentation. Let’s say for a second that you want to create a way to easily publish and read docs, err… documentation. By the end of this read you will be able to do just that, all with the power of Gatsby (a static site generator) and Cosmic JS (an easy to setup and use Content Management System).
  • Jacob Knaack
How to: Build a blog with Gatsby and GraphCMS (medium.com)
Feb 11, 2019
I want to show you how easy it can be to create an extremely fast and customizable blog site using some of the newest and greatest technologies in JavaScript today.
  • Tom Settle
Reading Data From A JSON File With Gatsby + GraphQL (dev.to)
Feb 08, 2019
Use gatsby-transformer-json to read data from a local JSON file and dynamically generate list items in a React component.
  • Emma Wedekind
Running a Gatsby Starter as a Theme (christopherbiscardi.com)
Feb 07, 2019
Gatsby themes introduce a new model for building Gatsby sites and apps. However, due to the recency of themes being available, the majority of the ecosystem is still in starters that could better serve their users as themes.
  • Chris Biscardi
Building JAMstack Applications with Gatsby and AWS Amplify Framework (medium.com)
Feb 05, 2019
When it comes to performance these days, it’s not uncommon to hear the term “JAMstack”. JAMstack stands for JavaScript, APIs, and Markup. The idea being to create static markup with JavaScript that is powered by communicating with APIs.
  • Kurt Kemple
Why Themes? (gatsbyjs.org)
Jan 31, 2019
As some of you might have heard (or hoped), we’re working on adding theme support to Gatsby. This blog post is a short intro into how we’re thinking about themes for Gatsby.
Using React Context API with Gatsby (gatsbyjs.org)
Jan 31, 2019
Let’s do a deep dive into how this feature was actually implemented step by step using React Context, Gatsby, and a Theme Provider to implement a dark mode UI!
  • Muhammad Muhsin
Flamingo, women’s body care brand from Harry’s, chooses Gatsby for critical ecommerce launch, 5X faster page loads (gatsbyjs.org)
Jan 30, 2019
Here’s some of our conversation with Tim Brown, Senior Software Engineer and Johnny Lin, Engineering Manager at Harry’s.
  • Linda Watkins
Start a Blog in 2019 with Gatsby.js and Netlify (daveceddia.com)
Jan 30, 2019
Here in Part 1, we’ll cover the nuts and bolts of getting a Gatsby blog set up and deployed.
Getting started with Emotion and Gatsby (christopherbiscardi.com)
Jan 27, 2019
Emotion is a library for authoring and composing CSS rulesets in a performant way. Here's how to get started using it with Gatsby.
  • Chris Biscardi
Custom Live Preview for Gatsby Sites with Heroku (awesomereact.com)
Jan 22, 2019
Lets start with setting up a Gatsby Dev Server on Heroku for live preview.
  • Andreas Keller
Turning the Static Dynamic: Gatsby + Netlify Functions + Netlify Identity (gatsbyjs.org)
Dec 26, 2018
Today I’d like to show you how you can incrementally add functionality to a Gatsby static site with Netlify Functions, and then add authentication with Netlify Identity to begin a proper Gatsby app.
Why you should use GatsbyJS to build static sites (medium.freecodecamp.org)
Dec 04, 2018
Gatsby has been growing over time, and I’m glad to see it in use by a huge number of sites like marketing sites, blogs, and generated static pages.
  • Ajay NS
How to leverage your React skills with static site generator Gatsby.js (medium.freecodecamp.org)
Dec 03, 2018
Sometimes a dynamic single-page app is overkill. You just need to get some attractive information on the internet. Welcome back to static sites.
  • Amber Wilkie
Introduction to Gatsby (flaviocopes.com)
Nov 28, 2018
Gatsby is a platform for building apps and websites using React
How to deploy a static Gatsby app to Heroku (medium.freecodecamp.org)
Oct 24, 2018
This tutorials explains how to set up the deployment of a static GatsbyJS project with Heroku and Github. You will learn how to create a…
  • Kristin Baumann
Gatsby vs Next (blog.jakoblind.no)
Sep 20, 2018
Lately Gatsby and Next have gotten lots of attention. At first glance, they both seem very similar.
Announcing Gatsby 2.0.0 (gatsbyjs.org)
Sep 17, 2018
We’re incredibly pleased to announce the 2nd major release of Gatsby!
How I made my portfolio website blazing fast with Gatsby (medium.freecodecamp.org)
Aug 12, 2018
If you are thinking of building a static site with React and want it to perform as fast as a cheetah, you should consider using GatsbyJS.
  • Maribel Duran
Announcing new Gatsby Company (gatsbyjs.org)
May 24, 2018
Together with my co-founder, Sam Bhagwat, I’m thrilled to announce the formation of Gatsby Inc. Based on the open source project Gatsby I founded, Gatsby the company will make feature-rich and blazing-fast websites easier to build and run.
JAMstack with Gatsby, Netlify and Netlify CMS (medium.com)
Feb 01, 2018
I’ve recently migrated Dona Rita’s website from Jekyll to Gatsby. I’d like to share my process with you, as well as a few tips about building a JAMstack site with Gatsby, Netlify and Netlify CMS.
  • Pedro Duarte
Build a Static Blog using GatsbyJS (blog.manifold.co)
Jan 31, 2018
In this article, we will be building a static site using Gatsby.js.
Gatsby.js: How to set up and use the React Static Site Generator (medium.freecodecamp.org)
Jan 04, 2018
Gatsby is a static site generator for React that released its first major version last month.
  • Aman Mittal
How to build a React and Gatsby-powered blog in about 10 minutes (medium.freecodecamp.org)
Dec 28, 2017
We’ll take a deep dive into Gatsby and some of its features by creating an imaginary static blog called CodeStack.
  • Emmanuel Yusufu

Video Guides & Talks

Build a Gatsby Site With Nest.js (youtube.com)
Nov 05, 2019
What is Nest.js, and how does it make building APIs easier? In this episode, Ryan Chenkie teaches us how to create a GraphQL API using Nest.js, then builds a Gatsby site using the data.
  • Jason Lengstorf
  • Ryan Chenkie
Keynote - Gatsby Days London 2019 (youtube.com)
Nov 01, 2019
Keynote speech by Kyle Mathews, CEO and co-founder of Gatsby, from the Gatsby Days London conference on Sept. 30th, 2019 at the Congress Centre. Learn about what's new in Gatsby and what the future looks like!
Using WordPress as a Source for Gatsby (youtube.com)
Oct 30, 2019
A look into the advantages and possibilities that WordPress offers as source for Gatsby. How to use WpGraphQL and the ACF extension. A demo of how to use ACF Flexible content to make a custom builder.
  • Alexandra Spalato
Gatsby as a Create React App Replacement (youtube.com)
Oct 28, 2019
GatsbyJS and create-react-app are similar in that can help you set up an application and removes much of the configuration headache; however, Gatsby offers more. In this talk we'll consider some reasons why Gatsby could be a CRA replacement.
  • Khaled Garbaya
What Can Gatsby Plugins Do? (youtube.com)
Oct 22, 2019
Gatsby’s ecosystem is one of its biggest strengths. In this webinar, we dive into plugins — the heart of Gatsby’s ecosystem — to learn how they work and hear stories from community creators who’ve built and shipped popular, powerful plugins.
  • Jason Lengstorf
ImpossibleFoods.com: Combining Gatsby + Contentful for Speed, Scale and Flexibility (youtube.com)
Oct 22, 2019
Both brands and users have high expectations for websites today, and these expectations are constantly getting higher. To satisfy them, your site must offer blazing-fast performance, unique and engaging bespoke experiences, and optimize for attracting new visitors, generating leads, and providing a positive return on investment.
  • Ashley Geo
  • David Fonnegra
IBM and Gatsby Themes: Driving Impact Through Design (youtube.com)
Oct 22, 2019
Watch this webinar to learn how IBM’s open source design system, Carbon Design System, is using Gatsby themes to easily create new sites with a unified look and feel. Gatsby themes empowers the team to build something that looks like IBM without any prior React knowledge.
  • Alison Joseph
  • Vincent Picone
  • Chris Biscardi
Gatsby & WordPress - Pros / Cons w Overview (youtube.com)
Oct 08, 2019
In this video from my Gatsby & Headless WordPress course I go over how these two tools can be used together and some of the pros and cons.
  • Zac Gordon
Gatsby Days London, 2019 Keynote (youtube.com)
Sep 30, 2019
Learn about what's new in Gatsby and what the future looks like!
Build a Gatsby Transformer Plugin for Cloudinary (youtube.com)
Sep 20, 2019
In a marathon solo stream, Jason builds out most of a Gatsby transformer plugin to upload local files to Cloudinary and add support for using Cloudinary images in gatsby-image.
  • Jason Lengstorf
Deploy a Gatsby Site + API Using ZEIT Now (youtube.com)
Sep 19, 2019
How simple can it be to create a website, get a custom domain, build a serverless API, configure automatic deployments, and take the whole thing live? With ZEIT’s suite of tools, it can be pretty dang simple.
  • Jason Lengstorf
  • Leo Lamprecht
Advanced GraphQL Techniques in Gatsby (youtube.com)
Sep 12, 2019
Can a GraphQL node get data from two different places? Can we use GraphQL to normalize data form different sources? Mikhail Novikov will teach us advanced GraphQL patterns with Gatsby so you can create extremely powerful apps and websites.
  • Jason Lengstorf
  • Mikhail Novikov
Thoughts on Gatsby (youtube.com)
Sep 09, 2019
I just finished making my website using Gatsby.js and talk about my experience and some thoughts I had on it.
Set up Strapi as a CMS for Gatsby (youtube.com)
Sep 05, 2019
Strapi is an open source, self-hosted Node.js headless CMS, which makes it a great option for setting up a Gatsby site. On this episode, David Kartuzinski (https://twitter.com/kai_dawei) joins to teach us how to set up Strapi from scratch to power a Gatsby site.
  • Jason Lengstorf
  • David Kartuzinski
Build Your Own Meme Website (youtube.com)
Aug 29, 2019
Sara Vieira is the queen of memes. On this episode, she joins to teach us how to build a fun, silly website to showcase her many amazing memes and make them interactive.
In Depth gatsby-image Tutorial (youtube.com)
Aug 27, 2019
In this video from my Gatsby Basics course I walk through how to use the Gatsby Image component in a number of different ways.
  • Zac Gordon
Using Contentful and Gatsby Together (youtube.com)
Aug 26, 2019
Contentful provides a flexible, powerful content management back-end, which pairs really well with Gatsby. In this episode, Khaled Garbaya will teach us how to use Contentful to power Gatsby sites.
  • Jason Lengstorf
  • Khaled Garbaya
Data Visualization in React Using Gatsby (youtube.com)
Aug 21, 2019
How can you create data visualization that works well in progressive web apps? On this episode, Swizec Teller joins to teach us how to use D3, React, and Gatsby to create SSR-friendly data visualizations for high performance dataviz.
Design systems and MDX in Gatsby (youtube.com)
Aug 16, 2019
Creating design systems with great documentation and examples can be a pain. MDX makes it far less painful — on this episode, Kathleen McMahon joins to teach us how to create excellent documentation for a design system using MDX and Gatsby.
  • Jason Lengstorf
  • Kathleen McMahon
Gatsby & WordPress (youtube.com)
Aug 15, 2019
In this talk from the 2019 JavaScript for WordPress Conference, Alfredo Navas-Fernandini introduces the Gatsby React framework and how it can be used to create blazing fast static sites with WordPress.
  • Alfredo Navas-Fernandini
More Gatsby and WordPress and ACF (youtube.com)
Aug 15, 2019
In this talk from the 2019 JavaScript for WordPress Conference, Alexandra Spalato goes into more depth on how to integrate WordPress, GraphQL, ACF and More with Gatsby.
  • Alexandra Spalato
Build a Video App With Twilio + Gatsby (youtube.com)
Aug 13, 2019
Did you know you can create collaborative video chat apps really fast using Twilio and Gatsby? Nathaniel Okenwa teaches us how to integrate Twilio's developer-friendly APIs with Gatsby to create an interactive video chat app.
  • Jason Lengstorf
  • Nathaniel Okenwa
Loading and Filtering API Data in Gatsby (youtube.com)
Aug 08, 2019
How does Gatsby load data from other platforms and sources? And how do we actually use that data once it’s loaded? On this episode, Brittney Ball pairs with Jason to create a source plugin and build a site using its data.
  • Jason Lengstorf
  • Brittney Ball
Cron Jobs and Scheduling Gatsby Builds (youtube.com)
Aug 06, 2019
How do you schedule a post to go live in the future when using Gatsby? In this stream, Kelly Vaughn pairs with Jason to dive into scheduled content with cron jobs, webhooks, and other strategies for postdated content.
  • Jason Lengstorf
  • Kelly Vaughn
Build a Gatsby + Drupal website (youtube.com)
Aug 01, 2019
If you work with Drupal and need a high-performance front-end, Gatsby is a great option! In this stream, Grant Glidewell teaches us how to use Decoupled Drupal with Gatsby to build flexible, high-performance websites and apps.
  • Jason Lengstorf
  • Grant Glidewell
Building websites with Gatsby (youtube.com)
Jul 29, 2019
Join Laurie Barth as she pairs with Jason to learn more about what Gatsby can do to make building your website fun and fast!
  • Jason Lengstorf
  • Laurie Barth
Gatsby + WordPress with WPGraphQL (youtube.com)
Jul 25, 2019
Did you know WordPress & Gatsby are great together? In this stream, Jason Bahl teaches us how to use WordPress with Advanced Custom Fields and WPGraphQL to create an powerful, flexible admin dashboard, then query and display that data in a Gatsby site.
  • Jason Lengstorf
  • Jason Bahl
Build a site showcase Gatsby theme (part 2) (youtube.com)
Jul 22, 2019
For the Theme Jam website, we need to build a showcase. Since submissions are being tracked in Airtable, we’ll build a Gatsby theme to load Airtable data and display showcase entries.
  • Jason Lengstorf
Build a shopping cart with promotion codes with Gatsby (themes) (youtube.com)
Jul 22, 2019
In this stream we will cover how to add promotion codes to our Moltin cart using Gatsby and storing the cart + promotions in a custom context provider we created.
  • Jamie Barton
Beyond Static: Dynamic Web Applications with Gatsby (youtube.com)
Jul 20, 2019
For most of us, “static sites” only work for simple sites, like personal blogs. But static sites can do so much more! In this talk, learn how Gatsby uses React and GraphQL to help you build apps that combine the performance and workflow benefits of static sites with the flexibility and power of server-driven sites, all in a modern dev stack!
  • Dustin Schau
Build an RSS feed-powered podcast site (youtube.com)
Jul 18, 2019
Join Amberley Romo and Jason as they build out support for a podcast theme to take a podcast RSS feed and turn it into a full website. This episode digs into Gatsby source plugin internals, linking between data nodes, and debugging Gatsby APIs.
  • Jason Lengstorf
  • Amberley Romo
Build a shopping cart with Gatsby (themes) (youtube.com)
Jul 18, 2019
We'll cover the basics to get you started fetching cart items from an ecommerce API.
  • Jamie Barton
Build a site showcase Gatsby theme (part 1) (youtube.com)
Jul 16, 2019
For the Theme Jam website, we need to build a showcase. Since submissions are being tracked in Airtable, we’ll build a Gatsby theme to load Airtable data and display showcase entries.
  • Jason Lengstorf
Docs and examples in Gatsby themes (youtube.com)
Jul 16, 2019
How do you create clear, helpful documentation and demos for Gatsby themes? In this livestream, Horacio Herrera pairs with Jason to add documentation and an example to a theme.
  • Jason Lengstorf
  • Horacio Herrera
Gatsby and GraphQL: Today and the Future (youtube.com)
Jul 11, 2019
Gatsby uses GraphQL in a pretty unique way — type inference, automatic filter and connection generation.
Building your first Gatsby theme (youtube.com)
Jul 08, 2019
Join Emma Wedekind as she pairs with Jason to build her first Gatsby theme!
  • Jason Lengstorf
  • Emma Wedekind
Composing and styling Gatsby themes (youtube.com)
Jul 03, 2019
Gatsby themes open up a lot of incredible opportunities, and theme-ui might just be the perfect tool for making themes composable, interoperable, and even more powerful. Brent Jackson will teach us how to build even better Gatsby themes with theme-ui!
  • Jason Lengstorf
  • Brent Jackson
Next.js vs Gatsby for SEO (youtube.com)
Jul 03, 2019
I explain the differences between how Next.js and Gatsby work and which one I recommend for good SEO.
Build a Gatsby podcast theme (youtube.com)
Jun 13, 2019
Learn along with Henry Zhu and Jason Lengstorf as we extend Amberley Romo’s podcast theme. We dive into modifying the Syntax.fm podcast player to work with Gatsby themes!
  • Jason Lengstorf
  • Henry Zhu
Use Airtable as a CMS for Gatsby (youtube.com)
May 30, 2019
Airtable is like Excel with rocket boosters. Learn along with Jason as Giovanni Briggs from Airtable teaches us how to build a Gatsby site using Airtable as the CMS.
  • Jason Lengstorf
  • Giovanni Briggs
Add Algolia search to your Gatsby site (youtube.com)
May 16, 2019
Adding custom search to your site doesn’t need to be hard! Bram Adams from the Algolia team will teach us how to implement a custom search on a Gatsby site.
  • Jason Lengstorf
  • Bram Adams
The Great Gatsby Bootcamp - Full Gatsby.js Tutorial Course (youtube.com)
May 15, 2019
In this tutorial, you will learn everything you need to build and launch your first site with Gatsby. You’ll build a website from scratch and learn how to get it deployed to production.
  • Andrew Mead
Gatsby and Themes The Future of Gatsby (youtube.com)
May 01, 2019
Themes are coming very soon to Gatsby, and this talk will do a deep dive on what they are, how to use them, and the types of amazing content you can create easily with a framework that people love: Gatsby.
  • Dustin Schau
The Great Gatsby Bootcamp (youtube.com)
Apr 15, 2019
Learn how to create fast websites and web applications with Gatsby. You’ll use Gatsby, React, and GraphQL to build an entire CMS-powered website from scratch.
  • Andrew Mead
Create a realtime web app with Hasura and Gatsby (youtube.com)
Mar 14, 2019
Learn how to add realtime updates to your apps using Hasura and Gatsby.
  • Jason Lengstorf
  • Vladimir Novick
Gatsby Tutorial Walkthrough Parts 0 & 1 - Course Prep Live Stream (youtube.com)
Mar 04, 2019
This live stream is part of the prep for my "Headless WordPress with Gatsby" course coming soon.
  • Zac Gordon
Multi-language websites with GraphCMS and Gatsby (youtube.com)
Feb 21, 2019
Learn how to build an internationalized website using GraphCMS and Gatsby.
  • Jason Lengstorf
  • Jesse Martin
Learn React Hooks: Live Examples and How Hooks Work With Gatsby (youtube.com)
Feb 14, 2019
Learn all about React Hooks and how they change the way we write components. Sidhartha Chatterjee teaches Jason Lengstorf what it means to write and refactor code with React Hooks, and shows off some new hooks that were just added to Gatsby.
  • Jason Lengstorf
  • Sidhartha Chatterjee
Build a Gatsby Theme With John Otander (youtube.com)
Feb 07, 2019
Gatsby Themes are the Next Big Thing™ for building web sites and apps. In this stream, John Otander teaches Jason Lengstorf how to build a Gatsby theme from scratch, how to use it, and how to create child themes.
  • Jason Lengstorf
  • John Otander
When Should You Use GatsbyJS? (youtube.com)
Feb 07, 2019
I explain how I choose between GatsbyJS, Next.js, and CRA for projects.
Build a Portfolio Site with Sanity.io and Gatsby (youtube.com)
Jan 31, 2019
Espen Hovlandsdal teaches Jason Lengstorf how to build a portfolio site using Sanity.io and Gatsby. Along the way, there are some really mind-blowing moments for content editing, including real-time collaboration, live updates, and image editing.
  • Jason Lengstorf
  • Espen Hovlandsdal
Building a movie website with Gatsby PT2 (youtube.com)
Jan 08, 2019
Making https://shitty-horror-movie.club using gatsby
Building a movie website with Gatsby PT1 (youtube.com)
Jan 08, 2019
Making https://shitty-horror-movie.club using gatsby
High-Performance Images Using Gatsby with Emma Wedekind (youtube.com)
Jan 04, 2019
Emma Wedekind and Jason Lengstorf work on converting Emma’s portfolio page to use `gatsby-image` for better performance and user experience. Along the way they talk about StaticQuery, GraphQL, and how Emma designs websites.
  • Jason Lengstorf
  • Emma Wedekind
Implementing a "Blur Up" image component (youtube.com)
Jan 04, 2019
In this video we'll be using promises to see how a Gatsby style "Blur Up" image component could be created.
Add Cypress to a gatsby app (youtube.com)
Dec 20, 2018
I've got a little gatsby app, let's see how we can add Cypress to test it!
How Gatsby Does High-Impact, Low-Effort UX Research (and You Can Too!) (youtube.com)
Dec 17, 2018
Learn about UX research best practices, how Gatsby does it, and the importance of user testing when building a website.
  • Shannon Soper
Introducing Gatsby Themes (youtube.com)
Dec 17, 2018
Learn from Chris Biscardi, Independent Consultant at Gatsby, about Gatsby Themes.
  • Chris Biscardi
Move Fast, Don't Break Things: Trends in Modern Web Dev with Mediacurrent (youtube.com)
Dec 17, 2018
Learn about the decoupling of the CMS and a case study about a Drupal and Gatsby website.
  • Ben Robertson
Power of Positioning: Selling Gatsby to Clients (youtube.com)
Dec 14, 2018
In this 30 minute talk, learn about the paradigm shift happening in website development and how to position the value of modern web technologies to your clients.
  • Linda Watkins
Gatsby Days: How We Got Here and The Future of Website Development (youtube.com)
Dec 14, 2018
Kyle Mathews, creator of Gatsby, talk about the future of website development and how Gatsby is the open source software that will take you there.
Beyond Static With Gatsby & Apollo (youtube.com)
Dec 05, 2018
In this talk, learn how Gatsby & Apollo help you build apps that combine the performance and workflow benefits of static sites with the flexibility and power of server-driven sites.
  • Jason Lengstorf
Gatsby & TypeScript (youtube.com)
Dec 01, 2018
Learn how to set up Gatsby with TypeScript and how to replace PropTypes with TypeScript interfaces in both functional and class based components.
Installing Gatsby (youtube.com)
Sep 18, 2018
I'm doing some research on gatsby. Let's see what it takes to get this installed and running from the perspective of a newcomer.
Gatsby JS Crash Course (youtube.com)
Apr 12, 2018
This is a 1 hour crash course on Gatsby JS which is a static site generator that runs on React and GraphQL. We will be creating a static site along with a Markdown based blog using a few plugins. We will also deploy our Gatsby site to Netlify.
Advanced Web Performance Optimizations (youtube.com)
Mar 31, 2018
As web developCome join Kyle Mathews, founder of Gatsby, as he talks about modern web performance. You'll learn the tools & techniques you can start using today to make your React sites super fast. We’ll discuss code splitting, "link preload", greedy prefetching, header optimizations, service workers, and more using Gatsby as a case study for these techniques.
React-Based Content Management with Netlify CMS & Gatsby (youtube.com)
Mar 30, 2018
This talk will show how to use Netlify CMS with a Gatsby-based site, to build high-performant and infinitely-scalable sites with git-based content editing, a user friendly UI, and live browser previews - all without a backend.
  • Matt Biilmann
How to make a Contact Form in Gatsby with Netlify (youtube.com)
Mar 10, 2018
In this video we build a contact form that will work with Netlify's form service.
GatsbyJS — How to Create The Fastest Sites In The World (youtube.com)
Oct 02, 2017
Gatsby is a modern JavaScript web framework that let’s you build the fastest websites in the world. It combines the fast performance of static websites, modern browser capabilities like and service workers, and the powerful abstractions, excellent tools, and client capabilities of the webapp world.
Moving My Personal Site To GatsbyJS (youtube.com)
Jul 10, 2017
In this stream, I'll be moving my website off Meteor and onto GatsbyJS.
Review: GatsbyJS - Static site generator for ReactJS (youtube.com)
Jul 09, 2017
Gatsby looks absolutely awesome! You should check it out!
  • Jamie Barton
A First Look at Gatsby, a Static Site Generator for React (youtube.com)
Jul 07, 2017
In this video, I give a first look into the exciting new static site generator, Gatsby.

Courses & Video Series

Gatsby JS Basics (javascriptforwp.com)
Aug 27, 2019
In this course we learn the basics of how to use Gatsby JS, the React framework for building static sites.
  • Zac Gordon
Gatsby And Contentful - The Headless CMS Approach (youtube.com)
Feb 04, 2019
In this tutorial we'll start from scratch building a blog with Gatsby and Contentful.
  • Sebastian Eschweiler
Gatsby - Static Site Generator For React - Complete Guide (udemy.com)
Jan 12, 2019
Build Awesome Ultra-Fast Websites With React And GraphQL, Get Started With JAM Stack And The Headless CMS Approach.
  • Sebastian Eschweiler
Pro Gatsby 2 (leveluptutorials.com)
Nov 02, 2018
Learn how to build the fastest websites on the planet with this Gatsby v2, a new static site generator using React.
Headless WordPress (leveluptutorials.com)
Apr 30, 2018
Learn how you can build a headless WordPress site with ease using both Next.js or Gatsby
Pro Gatsby (leveluptutorials.com)
Feb 26, 2018
In Pro Gatsby, you'll learn how to build extremely fast websites in React with the hottest static site generator around.
Build a Blog with React and Markdown using Gatsby (egghead.io)
Dec 08, 2017
In this course, you’ll build a Gatsby site that transforms Markdown documents from your local filesystem into HTML
  • Taylor Bell

Podcast Episodes

Chris Biscardi on Gatsby Themes and Developing a Content Pipeline (reactpodcast.com)
Sep 05, 2019
We talk about what Gatsby Themes are, why they promise to bring a new wave of shareability to Gatsby sites, and what you need to know to start using them.
Gatsby Themes (syntax.fm)
Jun 05, 2019
In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general.
Gatsby for Skeptics (fullstackradio.com)
May 22, 2019
In this episode, Adam talks to Jason Lengstorf about Gatsby, and why using React and GraphQL to build something even as simple as a blog is not as crazy of an idea as it sounds.
  • Adam Wathan
  • Jason Lengstorf
Building Static Sites with Gatsby with Ajay NS (devchat.tv)
Apr 02, 2019
Ajay talks about his article "Why you should use GatsbyJS to build static sites" on Medium and why he felt the need to write it.
  • Lucas Reis
  • Justin Bennett
  • Charles Max Wood
  • Ajay NS
Gatsby vs Next (syntax.fm)
Feb 20, 2019
In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, and more!
CUBS #6: Gatsby (spec.fm)
Jan 29, 2019
Yep, we're talking about Gatsby again. We chat about our latest projects with Gatsby (and a poor explanation of themes), and go over some of the pain points we ran into.
  • Una Kravets
  • Chris Dhanaraj
Gatsby with Jason Lengstorf (thewebplatformpodcast.com)
Oct 25, 2018
Gatsby brings together React, Webpack and modern JavaScript in a way that makes a performant experience the default experience. In this weeks episode join us with Jason Lengstorf and learn how Gatsby can do this and some of the other great products that Gatsby are working on.
  • Justin Ribeiro
  • Danny Blue
  • Leon Revill
  • Jason Lengstorf
Jason Lengstorf on GatsbyJS (egghead.io)
Sep 14, 2018
Jason talks about Gatsby's plans to compete with the more seamless WordPress model. He also talks about gatsby's differences from WordPress and the use cases for each service.
  • Jason Lengstorf
The Great GatsbyJS (changelog.com)
Jul 18, 2018
From open source project to a $3.8 million dollar seed round to transform Gatsby.js into a full-blown startup that’s building what’s becoming the defacto modern web frontend. In this episode, we talk with Jason Lengstorf about this blazing-fast static site generator, its building blocks and how they all fit together, the future of web development on the JAMstack (JavaScript + APIs).
  • Jason Lengstorf
  • Adam Stacoviak
  • Jerod Santo
Gatsby.js w/Jason Lengstorf (spec.fm)
Apr 17, 2018
This episode features the great Jason Lengstorf and we're talking about Gatsby!
  • Una Kravets
  • Chris Dhanaraj
  • Jason Lengstorf
Setting Up and Getting Used to Gatsby with Aman Mittal (devchat.tv)
Apr 10, 2018
In this episode of React Round Up, the panel discuss setting up and getting used to Gatsby with Aman Mittal. Aman is a computer science graduate, has been working in web development for the past two years, and has worked with companies such as freeCodeCamp. He has been working with React for the past 6 months and started working with Gatsby in January of 2018. They talk about what Gatsby is, why you would want to use it, and what a simple Gatsby site would look like.
GatsbyJS with Kyle Mathews (softwareengineeringdaily.com)
Aug 17, 2017
Kyle Mathews is the creator of GatsbyJS. He joins the show to describe why he created Gatsby–the high level goals and low level engineering decisions. We also discuss how Kyle intends to take Gatsby beyond just an open source project and turn it into a business.

Libraries

gatsby (gatsbyjs.org)31808
v2.13.51
Aug 05, 2019
Build blazing fast, modern apps and websites with React