Using Gatsby

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

Articles & Tutorials

Using GraphQL Playground with Gatsby (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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? (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
Nov 28, 2018
Gatsby is a platform for building apps and websites using React
How to deploy a static Gatsby app to Heroku (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 an RSS feed-powered podcast site (
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) (
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) (
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 (
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 (
Jul 11, 2019
Gatsby uses GraphQL in a pretty unique way — type inference, automatic filter and connection generation.
Building your first Gatsby theme (
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 (
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 (
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 (
Jun 13, 2019
Learn along with Henry Zhu and Jason Lengstorf as we extend Amberley Romo’s podcast theme. We dive into modifying the podcast player to work with Gatsby themes!
  • Jason Lengstorf
  • Henry Zhu
Use Airtable as a CMS for Gatsby (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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? (
Feb 07, 2019
I explain how I choose between GatsbyJS, Next.js, and CRA for projects.
Build a Portfolio Site with and Gatsby (
Jan 31, 2019
Espen Hovlandsdal teaches Jason Lengstorf how to build a portfolio site using 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 (
Jan 08, 2019
Making using gatsby
Building a movie website with Gatsby PT1 (
Jan 08, 2019
Making using gatsby
High-Performance Images Using Gatsby with Emma Wedekind (
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 (
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 (
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!) (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
Jul 10, 2017
In this stream, I'll be moving my website off Meteor and onto GatsbyJS.
Review: GatsbyJS - Static site generator for ReactJS (
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 (
Jul 07, 2017
In this video, I give a first look into the exciting new static site generator, Gatsby.

Courses & Video Series

Gatsby And Contentful - The Headless CMS Approach (
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 (
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 (
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 (
Apr 30, 2018
Learn how you can build a headless WordPress site with ease using both Next.js or Gatsby
Pro Gatsby (
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 (
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

Gatsby Themes (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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 (
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.


gatsby (
Apr 13, 2019
Build blazing fast, modern apps and websites with React