Static Site Generator Workflow
Overview
Set up, configure, and deploy static sites with Hugo, Jekyll, 11ty, or Astro. Covers theme selection and customization, content organization, build pipeline configuration, deployment, RSS, SEO metadata, and image optimization.
When to Use
- "Set up a blog with Hugo"
- "Create a static site with 11ty or Astro"
- "Deploy my site to Netlify/Vercel"
SSG Quick Decision
| SSG |
Language |
Best For |
Build Speed |
Learning Curve |
| Hugo |
Go (templates) |
Blogs, docs, speed-critical |
Fastest |
Moderate |
| Jekyll |
Ruby |
GitHub Pages, standard blogs |
Slow (large sites) |
Easy |
| 11ty |
JavaScript |
Flexible, multi-template |
Fast |
Moderate |
| Astro |
JavaScript (islands) |
Content sites, partial interactivity |
Fast |
Moderate |
Setup Workflow (Hugo example)
# Install
brew install hugo # macOS
scoop install hugo # Windows
# Create site
hugo new site my-site --format yaml
cd my-site
# Add theme (git submodule)
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# Configure (hugo.yaml)
baseURL: "https://example.com/"
languageCode: "en-us"
title: "My Site"
theme: "ananke"
# Create content
hugo new posts/first-post.md
# Edit content/posts/first-post.md frontmatter
Content Organization
content/
├── _index.md # Homepage content
├── posts/ # Blog posts
│ ├── _index.md # Blog list page
│ └── post-1.md
├── projects/
│ ├── _index.md
│ └── project-1.md
├── about.md
└── contact.md
Frontmatter template (YAML)
---
title: "Post Title"
date: 2024-01-15T10:00:00Z
draft: false
tags: [tag1, tag2]
categories: [category]
description: "SEO meta description, 150-160 chars"
featured_image: "/images/post-image.jpg"
---
Post content in markdown.
Build & Deploy
# Local development
hugo server -D # -D includes drafts
# Build
hugo --minify
# Deploy to Netlify (netlify.toml)
[build]
command = "hugo --minify"
publish = "public"
[[redirects]]
from = "/blog/*"
to = "/posts/:splat"
status = 301
RSS, SEO & Images
- RSS: Hugo generates RSS automatically at
/index.xml. Customize in config.
- SEO: Title templates, meta descriptions in frontmatter,
<!--more--> for excerpts
- Images: Use
image shortcode, lazy loading, WebP format, responsive srcset
Common Pitfalls
- Not setting baseURL — RSS and sitemap will have wrong URLs
- Draft posts in production — remember to set
draft: false
- Missing .nojekyll — GitHub Pages assumes Jekyll; add empty
.nojekyll file for Hugo/11ty
- Theme updates breaking layout — pin theme to a specific commit with git submodules
- Slow builds — large image galleries kill build times; use image processing at build, not runtime
Verification Checklist
1---2name: static-site-generator-workflow3description: Use when building static sites. SSG setup, deploy.4license: MIT5---67# Static Site Generator Workflow89## Overview10Set up, configure, and deploy static sites with Hugo, Jekyll, 11ty, or Astro. Covers theme selection and customization, content organization, build pipeline configuration, deployment, RSS, SEO metadata, and image optimization.1112## When to Use13- "Set up a blog with Hugo"14- "Create a static site with 11ty or Astro"15- "Deploy my site to Netlify/Vercel"1617## SSG Quick Decision18| SSG | Language | Best For | Build Speed | Learning Curve |19|-----|----------|----------|-------------|----------------|20| Hugo | Go (templates) | Blogs, docs, speed-critical | Fastest | Moderate |21| Jekyll | Ruby | GitHub Pages, standard blogs | Slow (large sites) | Easy |22| 11ty | JavaScript | Flexible, multi-template | Fast | Moderate |23| Astro | JavaScript (islands) | Content sites, partial interactivity | Fast | Moderate |2425## Setup Workflow (Hugo example)2627```bash28# Install29brew install hugo # macOS30scoop install hugo # Windows31# Create site32hugo new site my-site --format yaml33cd my-site3435# Add theme (git submodule)36git init37git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke3839# Configure (hugo.yaml)40baseURL: "https://example.com/"41languageCode: "en-us"42title: "My Site"43theme: "ananke"4445# Create content46hugo new posts/first-post.md47# Edit content/posts/first-post.md frontmatter48```4950## Content Organization51```52content/53├── _index.md # Homepage content54├── posts/ # Blog posts55│ ├── _index.md # Blog list page56│ └── post-1.md57├── projects/58│ ├── _index.md59│ └── project-1.md60├── about.md61└── contact.md62```6364### Frontmatter template (YAML)65```yaml66---67title: "Post Title"68date: 2024-01-15T10:00:00Z69draft: false70tags: [tag1, tag2]71categories: [category]72description: "SEO meta description, 150-160 chars"73featured_image: "/images/post-image.jpg"74---7576Post content in markdown.77```7879## Build & Deploy80```bash81# Local development82hugo server -D # -D includes drafts8384# Build85hugo --minify8687# Deploy to Netlify (netlify.toml)88[build]89 command = "hugo --minify"90 publish = "public"9192[[redirects]]93 from = "/blog/*"94 to = "/posts/:splat"95 status = 30196```9798## RSS, SEO & Images99- **RSS**: Hugo generates RSS automatically at `/index.xml`. Customize in config.100- **SEO**: Title templates, meta descriptions in frontmatter, `<!--more-->` for excerpts101- **Images**: Use `image` shortcode, lazy loading, WebP format, responsive srcset102103## Common Pitfalls1041. **Not setting baseURL** — RSS and sitemap will have wrong URLs1052. **Draft posts in production** — remember to set `draft: false`1063. **Missing .nojekyll** — GitHub Pages assumes Jekyll; add empty `.nojekyll` file for Hugo/11ty1074. **Theme updates breaking layout** — pin theme to a specific commit with git submodules1085. **Slow builds** — large image galleries kill build times; use image processing at build, not runtime109110## Verification Checklist111- [ ] SSG selected and initialized112- [ ] Theme installed and configured113- [ ] Content organized (posts, pages, sections)114- [ ] Frontmatter complete (title, date, tags, description)115- [ ] Build runs without errors locally116- [ ] Deployed to chosen platform (Netlify/Vercel/GitHub Pages)117- [ ] RSS feed accessible at /index.xml118- [ ] Sitemap generated at /sitemap.xml
LoopyLuci