Gatsby and Contentful: Why the Pair Worked
Why Gatsby and Contentful worked well together for static sites, what made the model productive, and why teams later reassessed build time and fit.
Articles
Gatsby
Gatsby is a React‑based, free, and open‑source framework for static site generation. This was a project that I have personally been involved in, and, as you might expect, was one of my go‑to frameworks when taking on a new project for many years.
Below you will find a subset of articles from my blog specifically about Gatsby and ‑ more recently ‑ migrating from Gatsby to Next.js. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are twenty‑nine articles collected together for you below.
Gatsby and Contentful: Why the Pair Worked. 
Introducing Seeded Randomisation into an SSR Gatsby Project. Introducing Seeded Randomisation into an SSR Gatsby Project
Add seeded randomisation to an SSR Gatsby project, keeping content order deterministic across builds while still rotating destination‑style content.
Dynamic Navigation with React Router. Dynamic Navigation with React Router
Build‑Time SEO Checks in Gatsby. Build‑Time SEO Checks in Gatsby
Run build‑time SEO checks in Gatsby across routes, metadata, canonicals, headings, sitemaps, schema, redirects, CMS content gaps, and release confidence.
Automatically Generate Text Sitemaps in Gatsby. Automatically Generate Text Sitemaps in Gatsby
When it comes to text‑based sitemaps in Gatsby, gatsby‑plugin‑sitemap falls short. Fortunately, it is straightforward to implement using Node.js and GraphQL.
Keeping Gatsby Build Times Under Control. Keeping Gatsby Build Times Under Control
How to keep Gatsby build times under control by managing data volume, image work, plugins, GraphQL queries, caching, and deployment expectations.
Resolving mini‑css‑extract‑plugin Warnings in Gatsby. Resolving
mini‑css‑extract‑pluginWarnings in GatsbySeeing Conflicting Order warnings in your Terminal whilst building your Gatsby project is not uncommon, but fortunately is very easy to fix (or suppress) too.
Gatsby & GraphQL: Nodes vs. Edges. Gatsby & GraphQL: Nodes vs. Edges
Gatsby and GraphQL nodes versus edges explained through graph theory, query shape, pagination, and why Gatsby data often exposes both structures.
Automatically Submit Sitemaps to Google During Gatsby Build. Automatically Submit Sitemaps to Google During Gatsby Build
You can let Google know that your website (and the content within) has been updated by submitting an updated sitemap automatically via a simple Node.js script.
Static Site Generators. Static Site Generators
Static site generators trade runtime complexity for build‑time output. This article looks at the benefits, the drawbacks, and where they fit best.
All About Headless CMSes. All About Headless CMSes
Websites have not been set‑and‑forget for a long time now, and without the technical know‑how to update a static site, CMSes are a key part of web development.
ReferenceError: Window is Not Defined in Gatsby. ReferenceError: Window is Not Defined in Gatsby
Fix window is not defined in Gatsby or Next.js by understanding SSR, guarding browser globals, lifecycle timing, dynamic imports, and third‑party modules.
Installing Gatsby onto an M1 MacBook Air. Installing Gatsby onto an M1 MacBook Air
Set up Gatsby on an M1 MacBook Air with Xcode, Homebrew, NVM, Node.js, vips, Yarn, the Gatsby CLI, dependency reinstall steps, and native image dependencies.
Previewing CMS Content in Gatsby Workflows. Previewing CMS Content in Gatsby Workflows
Plan CMS preview in Gatsby workflows by setting expectations around draft content, preview builds, webhooks, deployment timing, and editor confidence.
Disabling Gatsby Telemetry. Disabling Gatsby Telemetry
Disable Gatsby telemetry cleanly, with context on what anonymous analytics collect, why teams opt out, and how the setting affects local and CI work.
Removing p Tags from Contentful List Items. Removing
pTags from Contentful List ItemsOne of the quirks of rendering Rich Text from Contentful is that list items come wrapped in paragraph <p> tags. Fortunately, this is a simple one to resolve.
Rendering CMS Rich Text Safely in Gatsby and React. Rendering CMS Rich Text Safely in Gatsby and React
Render CMS rich text safely in Gatsby and React with node mapping, link handling, embeds, headings, validation and failure‑safe fallbacks.
Rendering Contentful Rich Code Snippets in Gatsby. Rendering Contentful Rich Code Snippets in Gatsby
Contentful rich text and Gatsby work well together until code snippets enter the picture. This guide shows how to render inline and block code cleanly.
