New

FlowConsent, our own cookie banner, is live.

Static site generator: plainly explained.

A static site generator (SSG) pre-builds HTML pages at build time for faster, more secure sites. Definition, how it works, and best practices.

Webapp · Updated Nov 7, 2026

DEFINITION

A static site generator (SSG) pre-builds a site's pages into ready-to-serve HTML files at build time, with no server-side rendering on each request.

CATEGORY

Webapp

RELATED

dev, Front end

Summarize this page with AI

01

What is a static site generator?

A static site generator (SSG) is a tool that compiles templates, content files, and data into a complete set of pre-built HTML, CSS, and JavaScript files at build time. Instead of assembling each page when a visitor requests it, the server or a CDN simply serves the files that were generated in advance, once, ahead of traffic. This model powers marketing sites, documentation portals, blogs, and increasingly the content-heavy sections of larger web apps, wherever content changes less often than the underlying data of a live dashboard. Because there is no per-request rendering step, static output tends to load faster, survive traffic spikes more gracefully, and expose a smaller attack surface than a site that queries a database on every visit.

The term covers a wide range of tools, from simple blog-aware generators to full frameworks that also support partial hydration for interactive components, but the core promise stays the same: separate the act of authoring content from the act of serving it, and do the expensive work (templating, data fetching, image processing) once instead of on every page view.

02

How a static site generator works

The build process typically runs three steps: read content from Markdown files, a headless CMS API, or local data; inject that content into templates; and write the finished result to an output folder that gets deployed as-is, usually to a CDN. A minimal content file for a blog post might look like this:

---
title: "Why static sites are fast"
date: 2026-09-26
layout: post.html
---
Static sites skip server-side rendering on every request.

The generator reads the front matter (the block between the two --- lines), merges it with the post.html template, and outputs a finished why-static-sites-are-fast/index.html file. No database query and no template engine run when a visitor opens the page: the CDN returns the pre-built file directly, which is why static sites can serve thousands of concurrent visitors from cheap, simple infrastructure.

03

Common types of static site generators

  • Markdown-based: content lives in local .md files with front matter (Jekyll, Hugo, Eleventy).
  • Component-based: pages are assembled from JavaScript or React/Vue components, often with partial hydration (Astro, Gatsby, Next.js in static export mode).
  • Headless-CMS-driven: content is pulled from an API, such as Webflow CMS, Contentful, or Storyblok, at build time rather than stored as local files, so editors keep a familiar interface while the output stays static.
  • Documentation-focused: purpose-built for technical docs and knowledge bases, with built-in search and versioning (Docusaurus, VuePress).

Most teams pick a generator based on who edits the content, not on raw build speed: a marketing team publishing through a visual CMS like Webflow needs a very different workflow than a developer team writing release notes in Markdown and reviewing them through pull requests.

04

Static site generator vs server-side rendering vs client-side rendering

ModelWhen HTML is built
Static (SSG)At build time, onceBest forMarketing sites, blogs, docs
Server-side rendering (SSR)On every request, on the serverBest forPersonalized or frequently changing pages
Client-side rendering (CSR)In the browser, after JavaScript loadsBest forHighly interactive apps, dashboards
05

Best practices and common pitfalls

  • Rebuild and redeploy automatically on every content change, through a webhook or a CI job, so the live site never shows stale pages.
  • Use incremental builds or a CDN cache-purge strategy once the site grows past a few thousand pages, since rebuilding everything from scratch gets slow and expensive.
  • Keep truly dynamic pieces, such as search, comments, or personalization, as small client-side widgets layered on top of static HTML rather than rebuilding the whole architecture around them.
  • Watch build times in CI: a generator that takes twenty minutes to rebuild after a single typo fix will slow down every editorial workflow and discourage frequent publishing.
  • Plan for 404s and redirects explicitly: because pages are pre-built, a renamed slug that is not mapped to a redirect simply disappears rather than falling back to a dynamic route.
06

Why it matters for performance and SEO

Pre-built HTML removes the database query, template render, and network round-trip that server-side rendering repeats on every visit, which directly improves Core Web Vitals metrics such as Largest Contentful Paint and Time to First Byte. Search engines can crawl and index pre-rendered pages without waiting for JavaScript to execute, which is one reason static and hybrid rendering remain common choices for content-heavy, SEO-driven sites that need to rank well while staying cheap to host and simple to secure. Hosting a static site is also inexpensive and resilient: because the files are identical for every visitor, they can be cached at hundreds of CDN edge locations worldwide, which keeps response times low regardless of where a visitor is browsing from.

07

Static site generators at BeBranded

Our team builds and maintains both fully static architectures and hybrid Webflow setups where CMS-driven pages are pre-rendered and cached at the edge, combining editorial flexibility for the marketing team with the raw performance of static output. We choose the rendering model on a case-by-case basis, static, hybrid, or server-rendered, based on how often content changes, who needs to edit it, and how the page needs to rank, rather than defaulting to one stack for every client. See our web apps service for how we architect, build, and ship these projects.

FAQ

Questions about Static site generator.

Another question?

Write to us
What is a static site generator used for?
It is used to pre-build websites such as blogs, docs, and marketing sites into ready-to-serve HTML files, removing the need for a server to render pages on each visit.
Is a static site generator the same as a CMS?
No. A CMS stores and edits content; a static site generator is the build tool that turns that content, or local files, into deployable HTML, often pulling content from a CMS via its API.
Do static sites support dynamic features like forms or search?
Yes, through client-side JavaScript widgets or third-party services such as form handlers or search-as-a-service layered on top of the static HTML.
What is the difference between a static site generator and server-side rendering?
A static site generator builds pages once at build time, while server-side rendering builds each page on every request, which suits content that changes per visitor.
Which static site generators are most common?
Popular options include Hugo, Eleventy, Astro, Gatsby, and Jekyll, plus headless-CMS-driven builds such as Webflow's own static output.
Does using a static site generator help SEO?
Yes: pre-rendered HTML loads faster and is fully crawlable without waiting on JavaScript, which supports strong Core Web Vitals and reliable indexing.

Related

Related terms, and where to go next.

How to create a Shopify store with Webflow: step-by-step guide
Webflow

How to create a Shopify store with Webflow: step-by-step guide

Want a fully customized online store with powerful e-commerce features? Discover how to integrate Webflow and Shopify to create a high-converting shop.

Read the article
BeBranded
Webflow

Webflow MCP: connect an AI agent to your site

Webflow MCP: what it is, what it enables, how to install it, concrete use cases, v1.2 updates, and limitations to know. Complete guide.

Read the article
Webflow + Claude AI: the official connector (2026 guide)
Webflow

Webflow + Claude AI: the official connector (2026 guide)

Webflow + Claude: what the official MCP connector launched in February 2026 actually does, its real limits, and how to use it safely.

Read the article

Let’s talk

Tell us what you want to build.

Thirty minutes with the people who will work on your project. You leave with a clear view of the scope, the timeline and the next steps.

What happens next

  1. 1A 30-minute callWe listen to your goals, your constraints and your context.
  2. 2A clear scopeWe map what is worth doing first, and what it takes.
  3. 3A costed proposalYou decide, with no commitment and no sales pitch.