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.
Articles
Gatsby
Gatsby is a React‑based, free, and open‑source framework for static site generation. This is a project that I have personally been involved in, and, as you might expect, is one of my go‑to frameworks when taking on a new project.
Below you will find a subset of articles from my blog specifically about Gatsby. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are twenty‑one collected together for you below.
Introducing Seeded Randomisation into an SSR Gatsby Project. 
Dynamic Navigation with React Router. Dynamic Navigation with React Router
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.
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.
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 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.
Replace Inline Styles in Gatsby with an External CSS File. Replace Inline Styles in Gatsby with an External CSS File
Replace Gatsby inline styles with an external stylesheet when needed, weighing render speed, caching, CSS Modules, styled‑components, and cleaner output.
Disabling Source Maps in Gatsby for Production. Disabling Source Maps in Gatsby for Production
Although an extremely useful aspect of Gatsby, source maps cause a performance hit as well as leaving your source exposed. Here is how to turn them off!
Optimising gatsby‑image Even Further. Optimising
gatsby‑imageEven FurtherOptimise gatsby‑image further with sensible maxWidth, quality settings, native lazy loading, GraphQL image data, and avoiding oversized assets in Gatsby.
Adding Static Files to a Gatsby Site. Adding Static Files to a Gatsby Site
Add static files to a Gatsby site using the static folder, with notes on build output, verification files, legacy assets, and when not to process files.
Automatically Deploy a Static Gatsby Site via FTP. Automatically Deploy a Static Gatsby Site via FTP
Deploy a static Gatsby build over FTP with environment variables, ftp‑deploy, build scripts, and a practical CI flow for conventional or legacy hosting.
