Guide : Static Site Generators

TL;DR — A static site generator builds votre whole site into plain HTML fichiers ahead of temps. So quand Google montre up, le contenu is déjà là in the page — aucun waiting pour JavaScript to run. That’s the easiest possible setup pour SEO. The catch: le site seulement updates quand vous rebuild it.

Ce que a static site generator is

La plupart of the SEO trouble with JavaScript comes bas to un question: is votre content en réalité in lune page quand a robot d’exploration récupère it, or fait it seulement apparaître après scripts run? A static site generator (SSG) sidesteps que question entirely.

An SSG takes votre content (usually written in Markdown) and votre templates, and — on votre computer or a construire server — turns every page into a finished HTML fichier avant anyone visits. Vous alors upload ceux plain HTML fichiers to a host. Quand Google, Bing, or a reader requêtes une page, ils obtenir complet HTML on the premier essayer. Evidence for this claim A static site generator builds source content and templates into static files before requests are served. Scope: Hugo as a representative static site generator. Confidence: high · Verified: 2026-07-14 Hugo documentation

Comparer que to a typical JavaScript app, où le serveur sends a near-empty shell and le navigateur builds lune page afterward. With an SSG, there’s nothing to construire in le navigateur — it’s déjà fait.

Pourquoi that’s great pour le SEO

• Le contenu is in the raw HTML. Aucun rendering step has to succeed pour Google to voir votre text and liens.
• It’s fast. Plain HTML fichiers charger quickly, qui helps Core Web Vitals.
• There’s moins to break. Fewer moving parts signifie fewer façons pour content to go manquant from search.

The popular ones

Là are six you’ll hear à propos de la plupart: Hugo, Jekyll, Eleventy, Hexo, Gatsby, and Astro. Ils tout produce static HTML; ils differ in ce que language they’re construit in and how beaucoup supplémentaire JavaScript (si quelconque) ils send to le navigateur. Chaque has its propre deep dive lié at the bottom of ce page.

The un chose to watch

A static site is a snapshot. It montre whatever was vrai the dernier temps vous construit it. Si vous modifier a price, fix a typo, or publish a post and forget to rebuild and redeploy, moteur de recherches garder seeing the old version. So the principal discipline with an SSG is making certain changements trigger a fresh construire. Evidence for this claim Changes to a statically generated site require a new build and deployment before the generated output changes. Scope: Astro static builds as a representative SSG workflow. Confidence: high · Verified: 2026-07-14 Astro: Deploy your site

Vouloir the technical version — how SSGs differ from client-side frameworks and meta-frameworks, a side-by-side comparison of tout six, and the build-freshness trap in detail? Switch to the Avancé tab.

TL;DR — An SSG pre-renders every route to static HTML at construire temps, so the content exists in la réponse avant the premier robot d’exploration requête — aucun Web Rendering Service, aucun rendering queue, aucun “Wave 2” delay. That’s the unique biggest indexability advantage vous pouvez give a site. SSGs differ from CSR frameworks (qui construire lune page in le navigateur) and from meta-frameworks (qui peut SSR per requête). The six in ce cluster — Hugo, Jekyll, Eleventy, Hexo, Gatsby, Astro — tout ship static HTML; ils vary in language, JS payload, and built-in sitemap/image tooling. The réel échec mode isn’t rendering, it’s construire freshness: a static site is seulement as current as its dernier construire, so modifié content que doesn’t trigger a rebuild silently sert stale HTML to moteur de recherches. I run ce site on Astro pour exactly ce définir of trade-offs.

Ce que “static” en réalité signifie

A static site generator runs votre content and templates via a construire step and emits a folder of finished HTML, CSS, and assets. The crucial partie pour le SEO is quand the HTML is produced: at construire temps, une fois, pour everyone — pas per requête, and pas in le navigateur. Google’s JavaScript guidance describes exploration, rendering, and indexation as distinct processing stages. An SSG removes client-side rendering from the critical chemin pour its generated content parce que the HTML is déjà complet. Evidence for this claim Google processes JavaScript through crawling, rendering, and indexing, while pre-rendered HTML is present before client execution. Scope: Google Search JavaScript processing; indexing is not guaranteed. Confidence: high · Verified: 2026-07-14 Google: JavaScript SEO basics

Ce is pourquoi static sites are the safest possible architecture pour getting indexé. Le contenu is in the premier byte of la réponse. There’s aucun parity gap entre raw and rendered HTML, aucun dependency on the renderer succeeding, aucun stateless-Chrome quirks to design autour.

SSG vs. rendu côté client vs. meta-frameworks

Three architectures, three différent moments the HTML comes into existence:

• Static site generation (SSG). HTML is construit une fois, at construire temps, avant quelconque requête. Served as flat fichiers (souvent from a CDN). Content is in the raw HTML. Ce is Hugo, Jekyll, Eleventy, Hexo — and Gatsby and Astro in leur par défaut static mode.
• Rendu côté client (CSR). Le serveur sends a minimal shell; JavaScript builds lune page in le navigateur at requête/runtime. Content dépend on rendering succeeding. Ce is a default-CSR React or Vue SPA — the riskiest setup pour le SEO (voir JavaScript SEO).
• Meta-frameworks (SSR / hybrid). Frameworks comme Suivant.js, Nuxt, and SvelteKit peut render HTML per requête on le serveur (SSR), pre-render some routes (SSG), or mix les deux. Content is in the HTML, but produced at requête temps, qui adds server cost and latency vous don’t have with a pure SSG.

The line blurs at the edges — Gatsby and Astro are parfois appelé meta-frameworks parce que they’re component-based and peut do plus que emit flat fichiers. But in leur bread-and-butter mode they’re static generators, and that’s how vous devez treat les pour le SEO. The mental model que matters: the précédent the HTML exists, the moins peut go incorrect avant a robot d’exploration sees it. SSG is the earliest.

The six generators, comparé

Tout six produce indexable static HTML. Here’s how ils differ on the axes que en réalité affecter an SEO decision:

A few choses worth pulling out of que table:

• JS payload is the SEO-adjacent differentiator. Hugo, Jekyll, Eleventy, and Hexo ship essentially aucun JavaScript unless vous ajouter it. Gatsby rehydrates a complet React bundle on the client — encore indexable (the HTML is static), but it carries a Core Web Vitals cost the others don’t. Astro splits the difference with islands architecture: static HTML by par défaut, JavaScript seulement pour the spécifique interactive components (“islands”) que besoin it.
• Construire speed scales differently. Hugo (Go) is famously fast and handles tens of thousands of pages comfortably. The Node-based generators are slower at grand scale, and Gatsby’s construire times have historically been its biggest complaint.
• Sitemaps and image optimization are mostly solved everywhere — but Hugo and Astro give vous the la plupart out of the box, pendant que Jekyll/Eleventy/Hexo lean on (well-maintained) plugins.
• Gatsby’s release cadence has slowed noticeably. The project isn’t archived and encore ships patches, but as of July 2026 its GitHub repo montre seulement a handful of commits over the trailing 90 days and un minor release since February. That’s worth weighing contre a plus actively-developed option si you’re picking a generator today, on top of the hydration/CWV cost ci-dessus.

Pourquoi I construit ce on Astro

I construit ce site — and patrickstox.com — with Astro, and the reasoning is straight out of ce page. I wanted to author in Markdown/MDX with réel components, but I did pas vouloir to pay the JavaScript tax on every page simplement to obtenir les. Astro’s par défaut is zero client-side JS: lune pages you’re reading ship as static HTML, and the seulement JavaScript que loads is pour the handful of interactive pieces (comme the lens tabs and the quiz). Que obtient me the indexability of a classic SSG and bon Core Web Vitals, sans giving up a component-based authoring experience. Si I nécessaire blistering construire speed à travers a huge content définir with zero interactivity, Hugo voudrait be the obvious appel; pour a React données couche, Gatsby. Pour ce — a content-heavy site with a few interactive flourishes — Astro is the correct trade.

The un réel gotcha: construire freshness

Everything ci-dessus is the upside. Here’s the catch que bites personnes.

A static site is seulement as current as its dernier construire. The HTML is a snapshot frozen at construire temps. Modifier a price, correct a fact, publish a post, mettre à jour a title tag — none of it reaches moteur de recherches jusqu’à vous rebuild and redeploy. There’s aucun live server assembling lune page from a database on chaque requête, so there’s nothing to pick up votre modifier automatically. Evidence for this claim Static build output remains a snapshot until the project is rebuilt and redeployed. Scope: Astro static build workflow as a representative example. Confidence: high · Verified: 2026-07-14 Astro: Build and deploy

En pratique ce signifie:

• Content edits doit trigger a construire. Si vous author in a CMS headless or Git, wire up a webhook so a publish kicks off a deploy. A manual-only construire traiter is how stale prices and “ghost” 404s sneak into the index.
• Frequently-changing données is awkward. Inventory, prices, live counts — si it changements faster que vous rebuild, the static copy lags. That’s où incremental builds, scheduled rebuilds, or a hybrid (a meta-framework with SSR/ISR pour the volatile routes) earn leur garder.
• Time-sensitive pages besoin a cadence. Si “today’s deals” is baked at construire temps, the construire has to run au moins daily, or lune page lies.

None of ce is a dealbreaker — it’s a discipline. The whole raison SSGs are great pour le SEO (HTML decided ahead of temps) is the même raison vous have to be deliberate à propos de re-deciding it quand content changements.

Où to go suivant: the static site generators cluster

Ce hub is the map. Chaque generator ci-dessous is its propre deep dive — language, JS payload, sitemap/image tooling, the framework-specific SEO gotchas, and how to garder builds fresh:

• Hugo SEO — Go-powered, zero-JS, blazing builds; the auto-generated sitemap, built-in image processing, and managing huge content sets.
• Jekyll SEO — the original SSG and the GitHub Pages par défaut; jekyll-seo-tag, jekyll-sitemap, and the plugin-on-GitHub-Pages limitation.
• Eleventy (11ty) SEO — JavaScript-based, zero-JS output; generating sitemaps from templates and eleventy-img pour responsive images.
• Hexo SEO — the Node blog generator; sitemap/feed plugins, theme JS, and permalink/canonical hygiene.
• Gatsby SEO — React-based static generation; the hydration/CWV trade-off, gatsby-plugin-image, gatsby-plugin-sitemap, and build-time données sourcing.
• Astro SEO — zero-JS by par défaut, islands architecture, @astrojs/sitemap, astro:assets, View Transitions, and Server Islands fallback behavior.

Every topic ci-dessus is nested sous ce hub and lives in the sidebar aussi.

Pour the broader context — how Google renders JavaScript, the parity and interaction échec modes, and qui rendering mode to pick quand vous do besoin JS — voir the parent JavaScript SEO hub.

AI summary

A condensed prendre on the Avancé version:

• An SSG pre-renders every page to static HTML at construire temps — content exists in la réponse avant the premier robot d’exploration requête. Aucun Web Rendering Service, aucun rendering queue, aucun “Wave 2” delay. The safest architecture pour indexability.
• Three architectures by quand the HTML exists: SSG (construire temps, safest), CSR (in le navigateur at runtime, riskiest), meta-frameworks/SSR (per requête on le serveur, content présent but with latency/cost).
• Tout six generators ship indexable static HTML. Ils differ in language, JS payload, and built-in sitemap/image tooling:
  • Hugo (Go) — zero JS, fastest builds, built-in sitemap + image processing.
  • Jekyll (Ruby) — zero JS, GitHub Pages par défaut, plugin-driven.
  • Eleventy (Node) — zero JS, flexible, plugin-driven.
  • Hexo (Node) — zero JS by par défaut, blog-focused, plugin-driven.
  • Gatsby (React) — hydrates a React bundle (CWV cost), strong image tooling, but its release cadence has slowed markedly as of mid-2026.
  • Astro (quelconque framework) — zero JS by par défaut via islands, official sitemap
    • astro:assets.
• JS payload is the SEO-adjacent differentiator — Gatsby carries a React bundle; Astro’s islands ship JS seulement où nécessaire; the rest are zero-JS.
• Patrick construit ce site (and patrickstox.com) on Astro — components sans the JS tax: static HTML + bon Core Web Vitals.
• The un réel gotcha is construire freshness: a static site is seulement as current as its dernier construire. Wire content edits to a rebuild webhook; utiliser incremental/scheduled builds or a hybrid SSR/ISR route pour fast-changing données.

Documentation officielle

Primary-source documentation — from the moteur de recherches and from chaque generator.

Moteur de recherches — rendering & static HTML

• Comprendre the JavaScript SEO basics — the explorer → render → index phases que a static construire lets vous skip pour content.
• In-Depth Guide to How Recherche Google Fonctionne — où rendering sits, and pourquoi pre-rendered HTML is lowest-risk.

The generators

• Hugo documentation — and the sitemap template and image processing docs.
• Jekyll docs — plus jekyll-seo-tag and jekyll-sitemap.
• Eleventy (11ty) docs — and eleventy-img.
• Hexo docs — and the hexo-generator-sitemap plugin.
• Gatsby docs — and gatsby-plugin-image and gatsby-plugin-sitemap.
• Astro docs — plus @astrojs/sitemap and astro:assets / images.

Quotes from the source

On-the-record statements from Google and from the generators’ propre teams, plus a remarque from my propre writing.

Google — rendering is a separate step

• “During the crawl, Google renders the page and runs any JavaScript it finds using a recent version of Chrome.” — the step an SSG removes from the critical chemin by shipping finished HTML. Jump to quote
• “Rendering is important because websites often rely on JavaScript to bring content to the page, and without rendering Google might not see that content.” — i.e., si le contenu is déjà in the static HTML, rendering can’t cost vous visibility. Jump to quote

Astro — static by par défaut

• “By default, Astro pages, routes, and API endpoints will be pre-rendered at build time as static pages. However, you can choose to render some or all of your routes on demand by a server when a route is requested.” Jump to quote

Hugo — speed

• Hugo bills itself as “the world’s fastest framework for building websites” — the build-speed advantage que matters at grand content scale. Source

Patrick Stox (my propre fonctionner — JavaScript SEO: A Definitive Guide)

• “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines.” — static generation is the low-risk fin of que spectrum.

Static-site SEO checklist

A rapide réussir to confirmer votre SSG setup is search-friendly — and staying fresh:

• Important content is présent in View Source (raw HTML), pas simplement après JS runs — the whole point of an SSG.
• An XML sitemap is generated on every construire and submitted dans la recherche Google Console and Bing Webmaster Outils.
• Chaque page has unique, build-time <title> and meta description (via the generator’s templating or an SEO plugin/integration).
• Balise canonicals are définir and point to the live, final URLs (pas localhost or a preview domain).
• Images are optimized at construire temps (responsive sizes, modern formats) — utiliser the generator’s built-in tooling or image plugin.
• Quelconque client-side JavaScript (Gatsby’s React bundle, Astro islands, theme JS) isn’t hiding principal content behind interaction.
• JS/CSS assets are pas blocked in robots.txt.
• Content edits trigger a rebuild + redeploy — a CMS/Git webhook fires a deploy automatically.
• Time-sensitive or frequently-changing pages have a scheduled rebuild cadence (or are served via SSR/ISR au lieu de static).
• Old URLs from a previous construire aren’t left as orphaned static fichiers — clean the output dir / handle removals so deleted pages 404 or 410.
• The deployed construire matches the latest content (spot-check a recently modifié page in production, pas simplement locally).

Static site generators — cheat sheet

The six En un coup d’œil

Quand the HTML exists (and Pourquoi c’est important)

Fast facts

• SSG = aucun Web Rendering Service in the critical chemin → aucun “Wave 2” delay pour content.
• Gatsby hydrates a React bundle (CWV cost); Astro ships JS seulement pour islands; Hugo/Jekyll/Eleventy/Hexo are zero-JS by par défaut.
• Gatsby’s release cadence has slowed as of mid-2026 — vérifier its GitHub activity avant betting a nouveau construire on it.
• Hugo (Go) is the speed champion at grand scale.
• The un trap: construire freshness — a static site montre its dernier construire. Wire a rebuild webhook to content edits.
• Fast-changing données (prices, inventory) → incremental/scheduled builds or hybrid SSR/ISR.

Qui rendering chemin fits?

The construire → deploy → vérifier framework

• Construire: enumerate intended routes and generate complet HTML, metadata, canonicals, and données structurées.
• Deploy: publish the nouveau artifact atomically so HTML, assets, sitemaps, and redirections stay in sync.
• Vérifier: comparer source HTML and the production réponse with le contenu version que triggered the construire.

Static HTML solves rendering dependence; it ne fait pas solve stale builds, manquant routes, broken deploy hooks, or client-side metadata que jamais reaches source HTML.

Vérifier si clé content exists in source HTML

curl -sS https://example.com/page/ | grep -F 'Expected visible heading'

Pour une URL liste, échouer CI quand a production route is manquant or lacks a title:

while IFS= read -r url; do html=$(curl -fsSL "$url") || { echo "FETCH FAIL $url"; continue; }; printf '%s' "$html" | grep -qi '<title>[^<]' || echo "TITLE FAIL $url"; done < urls.txt

Run ce in DevTools Console to comparer a rendered page’s title, canonical, and heading:

({title: document.title, canonical: document.querySelector('link[rel="canonical"]')?.href, h1: document.querySelector('h1')?.textContent.trim()});

Outils pour static output

• Raw vs. Rendered HTML Checker montre si important content and head signals are déjà présent in the initial HTML.
• HTTP Status Checker checks generated routes, redirections, and manquant pages in batches.
• HTTP Header Checker inspects mise en cache and deployment headers à travers redirections.
• A framework’s construire log and deployment manifest are the source of truth pour qui routes were generated successfully.

Prove the static deployment fonctionne

Source-HTML tester

Tester to run: récupérer representative production URLs with curl or Render Gap. Attendu result: principal content, title, canonical, and liens apparaître in raw HTML. Échec interpretation: the route is client-rendered or the construire omitted données. Monitoring window: immediate après deploy. Rollback trigger: important templates ship vide or incomplete source HTML.

Publishing-freshness tester

Tester to run: publish a controlled content modifier and comparer its CMS timestamp, construire log, deploy artifact, and live HTML. Attendu result: the modifier triggers un successful construire and reaches production. Échec interpretation: the webhook, construire, cache, or deployment chain is stale. Monitoring window: the normal publish SLA. Rollback trigger: production mixes old HTML with nouveau metadata or assets.

Route-completeness tester

Tester to run: comparer intended URL canoniques with generated/deployed routes and batch-check statuses. Attendu result: every intended route renvoie its planned status. Échec interpretation: dynamic chemin discovery or construire configuration missed routes. Monitoring window: every construire. Rollback trigger: canonical pages become 404s or redirection unexpectedly.

Testez vos connaissances: Static Site Generators

Five rapide questions on pourquoi static site generators are facile mode pour le SEO — and the un chose que peut encore trip vous up. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

My connexe writing

• JavaScript SEO: A Definitive Guide — rendering, DOM parity, and pourquoi static/prerendered output is the low-risk fin of the spectrum.
• The Beginner’s Guide to SEO technique — où rendering architecture fits in the bigger picture.

My speaking

• How Search Fonctionne (SlideShare) — my walkthrough of exploration, rendering, indexation, and ranking. (My standing disclaimer s’applique: “This is my understanding of systems… not going to be 100% complete or accurate.”)

From autour the industry

• web.dev — Rendering on the Web — the Chrome team’s canonical explainer of SSG vs. SSR vs. CSR and the trade-offs entre les.
• Recherche Google Central — JavaScript SEO basics — the explorer → render → index phases a static construire lets vous skip pour content.
• Jamstack — the architectural movement (pre-rendered markup served from a CDN) que static site generators are the engine of, with a generators directory.
• Astro — Pourquoi Astro? — the clearest statement of the “static HTML, zero JS by default, islands for interactivity” model.
• Hugo — the Go-based generator construit autour construire speed at grand content scale.
• Smashing Magazine — Static site generator coverage — practitioner articles on choosing and en utilisant SSGs.

Journal des modifications