Gatsby Static Site Generator

Gatsby is a free and open-source React-based framework for building websites and web applications, specializing in static site generation (SSG). Created by Kyle Mathews and Sam Bhagwat in 2015, Gatsby was one of the first frameworks to combine React with static site generation, making it popular for blogs, marketing sites, and documentation. Gatsby Inc. (the company) raised over $48 million in funding before being acquired by Netlify in 2023. Key features: static site generation: Gatsby pre-builds pages at build time, generating static HTML files that load instantly. Data is fetched at build time from CMSs, APIs, and files, and embedded into the HTML. This provides excellent SEO and performance. React-based: pages and components are written in React. At build time, Gatsby renders React components to HTML. In the browser, React hydrates the page for interactivity. GraphQL data layer: Gatsby's signature feature. All data (Markdown files, CMS content, APIs, images) is normalized into a unified GraphQL schema. Pages query this data using the useStaticQuery hook or the pageQuery export. Plugins fetch data from various sources and feed it into the GraphQL layer. Plugin ecosystem: over 3,000 plugins for sourcing data from CMSs (WordPress, Contentful, Drupal, Sanity, Strapi), transforming data, optimizing images, adding SEO, sitemaps, RSS feeds, and analytics. Gatsby Image/StaticImage: automatic image optimization (resizing, WebP conversion, lazy loading, blur-up placeholders). Routing: file-based routing in src/pages. Each .js/.tsx/.mdx file becomes a page. Programmatic page creation via createPage API. Incremental builds: Gatsby caches build results and only rebuilds changed pages. Server-Side Rendering (SSR) and Deferred Static Generation (DSG) modes added in Gatsby 4. JavaScript/TypeScript. MIT.