Static Site Generators in Production

Every topic, by section

The site is organised around three decisions every static site makes, in the order it makes them: which generator to build with, how to make the result fast, and how to ship and operate it. Each section below is one of those decisions, and each topic inside it is a problem area with its own set of guides — from an overview that frames the trade-offs to how-tos, fixes and comparisons with measured numbers.

Topics are the browse spine. A topic page gathers everything about one subject regardless of the kind of help it offers, so the quickest way into an unfamiliar area is its topic page, read top to bottom. If you already know the product you are working with, the tool pages cut across all three sections instead; and if you know exactly what you are looking for, search is faster than either.

How the three sections of the site relate Three stages in order. Choose a generator, covering selection, docs frameworks, search, languages and SEO. Make it fast, covering Core Web Vitals, caching, assets and budgets. Ship and operate it, covering CI, previews, security, testing, monitoring and rollbacks. Each stage feeds the next. Three sections, one sequence of decisions Choose the generator selection, docs, search, i18n, SEO Make it fast vitals, caching, assets, budgets Ship and operate CI, previews, testing, rollbacks
Most projects move left to right once, then return to the middle and right sections for the life of the site.

Choosing the Right Static Site Generator for Production

Match your team constraints to the right static site generator — Astro, Eleventy, Hugo, Jekyll, or a Next.js export — across JavaScript shipped, build speed, authoring, and ecosystem.

  • Accessibility for Static Sites8 guidesMake a static site usable by keyboard, screen reader and low-vision readers: themes, headings, focus, contrast, code blocks, diagrams and CI checks.
  • Astro vs Eleventy for Documentation Sites14 guidesCompare Astro and Eleventy for documentation — project setup, Markdown handling, CI pipelines, asset optimization, and the bytes-shipped trade-off, with measured numbers.
  • Docs Frameworks: Docusaurus, Starlight and VitePress15 guidesHow the three opinionated documentation frameworks differ on build speed, versioning, search, theming and page weight — measured on the same 1,200-page corpus.
  • Hugo Build Times for Large Repositories12 guidesDiagnose and fix slow Hugo builds at scale — template profiling, image-processing costs, render-hook caching, and the CI strategy that keeps 10k-page builds fast.
  • Internationalization for Static Sites9 guidesShip a static site in several languages: URL structure, hreflang, i18n routing in Astro and Hugo, translation workflows, edge language detection and RTL.
  • Jekyll Plugin Ecosystem9 guidesA production Jekyll setup: pin your gems, group plugins correctly, run reproducible CI builds, and apply the build-optimization levers that actually move the needle.
  • Migrating Between Static Site Generators13 guidesPlan and execute an SSG migration without losing URLs, build speed or your writers: content inventory, template porting, redirect strategy, and a staged cutover with rollback.
  • Next.js Static Export for Content Sites10 guidesWhen output export fits content and marketing sites — the runtime cost versus Astro and Hugo, routing and image caveats, trimming the shipped JavaScript, and exactly what the static build emits.
  • Search for Static Sites12 guidesHow to add search to a static site without a server: Pagefind, Lunr, MiniSearch and Algolia compared on index size, query latency, relevance and cost.
  • SSG Framework Selection Matrix10 guidesTurn SSG selection into a scored decision matrix — weight criteria for your project, run identical benchmark builds on each candidate, and let the numbers guide the choice.
  • Technical SEO for Static Sites9 guidesBuild-time technical SEO for static sites: sitemaps, canonical URLs, JSON-LD, feeds, robots rules for previews, and pagination that search engines can crawl.

Read the framework selection overview →

Number of guides in each of the three sections Vertical bars counting guides per section: Framework selection 121, Performance 103 and Deployment 123. Guides in each section 121 Framework selection 103 Performance 123 Deployment
347 guides across 33 topics, counted from the content index when this page was built.

Core Web Vitals Optimization for SSGs

Improve Core Web Vitals on static sites — LCP, CLS, INP — through disciplined asset processing, fast incremental builds, edge caching, and keeping JavaScript off pages that do not need it.

  • CDN Caching Rules for SSGs13 guidesMaximize edge cache efficiency for static sites: cache fingerprinted assets for a year, revalidate HTML every request, and purge cleanly on deploy to cut TTFB.
  • CSS and JavaScript Asset Optimization10 guidesShrink and schedule the CSS and JavaScript a static site ships: critical CSS, unused-CSS removal, code splitting, minification, precompression and icon strategy.
  • Cumulative Layout Shift Fixes for Static Sites11 guidesFind and fix the four things that move a static page after first paint: unsized media, late web fonts, injected embeds and CSS that lands after render. With measured before/after CLS.
  • Font Loading Strategies for Static Sites10 guidesEliminate font-driven layout shift and slow text: subset, self-host, preload the critical face, and set font-display deliberately — all at build time on a static site.
  • Image Optimization Pipelines in Astro11 guidesOptimize images at build time with Astro astro:assets — resized, modern-format images generated during the build with no runtime cost, plus responsive srcset, CI checks, and measurement.
  • JavaScript Hydration & Partial Rendering10 guidesCut INP on static sites with partial hydration — ship static HTML, hydrate only real islands, choose the right client directive, and enforce a JS budget in CI.
  • Largest Contentful Paint Optimization for Static Sites9 guidesA complete approach to LCP on static sites — identify the LCP element, preload it, set fetchpriority, serve modern formats, and remove render-blocking CSS and fonts.
  • Performance Budgets and Lighthouse CI11 guidesStop performance regressions before they merge: Lighthouse CI on preview deploys, byte and timing budgets, variance control and field-data checks.
  • Resource Hints and Navigation Speed9 guidesUse preconnect, preload, prefetch, speculation rules and view transitions to make static-site pages start faster and next-page clicks feel instant.
  • Third-Party Script Performance on Static Sites9 guidesAnalytics, chat widgets, embeds and consent tools undo a fast static build. Budget them, defer them, proxy them, and measure what each one actually costs in main-thread time.

Read the performance overview →

Count of how-tos, fixes, comparisons and concepts per section A matrix with one row per section and one column per kind of guide. Framework selection: 75 how-tos, 18 fixes, 17 comparisons, 11 concepts. Performance: 68 how-tos, 24 fixes, 11 comparisons, 0 concepts. Deployment: 102 how-tos, 13 fixes, 7 comparisons, 1 concepts. The kinds of guide in each section Section How-tos Fixes Comparisons Concepts Framework selection 75 18 17 11 Performance 68 24 11 0 Deployment 102 13 7 1
Fixes cluster in performance, where most problems are observed as a symptom first; comparisons cluster in framework selection.

Production-Ready Deployment & CI/CD for SSGs

Ship static sites with confidence: reproducible builds, preview-per-PR, atomic promotion, instant rollback, and edge caching across Cloudflare Pages, Netlify, Vercel, and GitHub Actions.

  • Cloudflare Pages Edge Caching Setup10 guidesControl Cloudflare Pages caching with a _headers file: immutable year-long caching for fingerprinted assets, fresh HTML, scoped purges, and cf-cache-status verification.
  • Content Workflows for Documentation Teams10 guidesMake a static site publishable by non-engineers: branch and review conventions, a CMS or editor layer, scheduled publishing, and build gates that catch content errors early.
  • GitHub Actions for Automated SSG Builds11 guidesBuild and deploy static sites with GitHub Actions — path-filtered triggers, dependency and build caching, deterministic installs, and atomic deploys on every push.
  • Incremental Builds and Build Caching for SSGs10 guidesCut SSG build times with incremental rebuilds and CI caching — what Astro, Eleventy, Hugo and Next.js support, content-hash cache keys, and remote shared caches.
  • Monitoring Static Sites in Production10 guidesWhat to watch on a static site after deploy: synthetic checks, broken links, edge 404s, real-user Core Web Vitals and cache health, with alerts that stay quiet.
  • Netlify vs Vercel Deployment Strategies12 guidesCompare Netlify and Vercel for SSG deployments — configuration style, build-cache behavior, deploy previews, edge functions, ISR vs pure static, and pricing.
  • Preview Environments for Pull Requests9 guidesGive every pull request its own deployed URL so reviewers test the real built site — ephemeral deploys, quality gates against the preview, and teardown on merge.
  • Rollbacks and Deploy Safety for Static Sites11 guidesAtomic deploys, immutable build artifacts, smoke tests against the preview URL and a one-command rollback — the safety net that makes shipping a static site boring.
  • Security Headers and Hardening for Static Sites12 guidesHarden a static site end to end: CSP, HSTS, SRI, framing and referrer policies at the edge, plus a supply chain and deploy pipeline built to resist abuse.
  • Self-Hosting Static Sites on S3, Nginx and Caddy12 guidesRun a static site on infrastructure you control: S3 with CloudFront, nginx or Caddy on a VM, with clean URLs, caching, redirects and zero-downtime deploys.
  • Serverless Functions for Static Sites8 guidesAdd forms, API proxies, authentication and personalisation to a static site with edge and serverless functions — without giving up static pages or CDN caching.
  • Testing Static Sites in CI8 guidesA CI test suite for static sites: accessibility, end-to-end flows, HTML validity, redirects, headers, output snapshots and SEO metadata on every pull request.

Read the deployment overview →