Gatsby: The Definitive Guide

Chapter 1. Gatsby Fundamentals

Gatsby is an open source framework for building static sites, based on React. Commonly referred to as a static site generator (SSG), Gatsby is part of the Jamstack category of technologies, alongside other SSGs like Gridsome and JavaScript frameworks like Next.js, which also facilitates static site generation. Gatsby places particular emphasis on performance, scalability, and security, and it has a rich and growing ecosystem of plugins, themes, recipes, starters, and other contributed projects.

In this first chapter, we’ll get acquainted with Gatsby. Though Gatsby’s building blocks are pages and components, its internal data layer, made up of GraphQL and source plugins, acts as a bridge between data sources and the pages and components that are compiled at build time to produce a static site. Gatsby is built on React, so we’ll also take a look at some JavaScript and React concepts that are essential for Gatsby developers to understand. Finally, we’ll build our first Gatsby “Hello World” site, which will familiarize you with Gatsby’s developer tooling.

What Is Gatsby?

In short, Gatsby is a free and open source framework based on React for creating websites and web applications. But internally, its creator, Kyle Mathews, describes Gatsby as a complex and robust “web compiler”—a collection of building blocks that engage in data retrieval and rendering, page composition using components, linking across pages, and finally, compilation of components into ...