Static Site Generators Explained: Astro, Next.js, Hugo, and 11ty Compared
Static site generators pre-build HTML at deploy time instead of generating pages on each request. We compare Astro, Next.js, Hugo, and 11ty across build speed, flexibility, and use cases with real performance benchmarks.
What Static Site Generators Actually Do
A static site generator (SSG) converts templates and content into plain HTML files at build time—before deployment, not when a user visits. The result: HTML files served directly from a CDN with no server-side processing per request.
The practical difference:
| Approach | How It Works | Response Time | Server Cost |
|---|---|---|---|
| WordPress/PHP | Generate HTML on each request | 200-800ms | $20-100+/month |
| SSG | Pre-build HTML at deploy | 10-50ms | $0 (static hosting) |
| SSR (Next.js) | Hybrid: some pre-built, some on-demand | 50-200ms | $10-50/month |
How SSGs Work (Under the Hood)
Content (Markdown/MDX) + Templates (HTML/JSX) + Data (JSON/API)
↓
[Build Process]
↓
Static HTML + CSS + JS
↓
Deploy to CDN (Cloudflare, Vercel, Netlify)- Content authoring: Write in Markdown, MDX, or fetch from a headless CMS (Contentful, Sanity, Strapi)
- Template processing: SSG combines content with templates (React, Vue, HTML)
- Asset optimization: Images compressed, CSS/JS minified
- Static output: HTML files ready for CDN deployment
SSG Comparison: Which One to Choose
| SSG | Language | Best For | Build Speed (1000 pages) | Learning Curve |
|---|---|---|---|---|
| Astro | JS/TS | Marketing sites, blogs | ~30s | Low |
| Next.js | React | Apps with SSR needs | ~60s | Medium |
| Hugo | Go | Documentation, large sites | ~5s | Medium |
| 11ty | JS | Simple sites, full control | ~20s | Low |
| Gatsby | React | Content-heavy, CMS integration | ~120s | High |
| SvelteKit | Svelte | Performance-critical | ~25s | Medium |
Astro: Best for Marketing Sites
Zero JavaScript by default. Ship only what’s needed via “islands architecture.” Excellent for SEO-focused marketing sites where most content is static.
Next.js: Best for Hybrid Applications
Supports static generation (SSG), server-side rendering (SSR), and incremental static regeneration (ISR). Choose Next.js when you need both static pages and dynamic server-rendered routes.
Hugo: Fastest Build Times
Written in Go, Hugo builds thousands of pages in seconds. Ideal for documentation sites, blogs with 10,000+ posts, or any site where build time matters.
11ty: Maximum Flexibility
Minimal opinions, maximum control. Use any template language (Nunjucks, Liquid, Handlebars). Great for developers who want to understand every line of output.
Why SSGs Beat Traditional CMS
| Benefit | Technical Reason | Business Impact |
|---|---|---|
| Speed | No database queries, direct CDN serving | Better Core Web Vitals, SEO |
| Security | No server-side code to exploit | No SQL injection, XSS via server |
| Cost | Static hosting is free or cheap | $0 vs $20-100+/month |
| Scalability | CDN handles traffic spikes | No server crashes during launches |
| Developer Experience | Version control for content, local preview | Faster development cycles |
When NOT to Use an SSG
SSGs aren’t ideal for:
- Real-time content: Stock prices, live scores (use SSR or client-side updates)
- User-generated content at scale: Comments, forums (need database)
- Highly personalized pages: Dashboard with user-specific data (use SSR)
- Frequent content updates by non-developers: Unless paired with headless CMS
Getting Started
For marketing sites and blogs: Start with Astro. Zero JS default, excellent performance, low learning curve.
npm create astro@latestFor apps with dynamic features: Start with Next.js. Industry standard, extensive documentation, Vercel integration.
npx create-next-app@latestFor documentation with fast builds: Start with Hugo. Sub-second builds even at scale.
brew install hugo
hugo new site mysite