Static Site Spec

Detail A · The stack

Three layers, one job each

Eleventy 3.1

Builds HTML from Nunjucks templates and data files.

Tailwind CSS 4.1

Styles from design tokens, configured in one CSS file.

Stimulus 3.2

Behavior attached to the HTML that is already there.

Detail B · Structure

A place for everything

Every site has the same tree: data in _data/, layouts and partials in _includes/, styles and controllers in assets/, and pages at the top. Know one site built to the spec and you know where everything is in the next.

Detail C · Build

One command builds it

npm run build reads the data, renders the templates, compiles Tailwind in a single before hook, and writes dist/. GitHub Actions runs the same command on every push and publishes the result.

Detail D · Controllers

Behavior, wired in the markup

Small Stimulus controllers, attached with data attributes, each doing one thing. Menus, scroll reveals, forms, search, and copy buttons, ready to drop in.

• toggle
• mobile_nav
• animate
• form
• reading_progress
• clipboard
• toc
• search

Detail E · New in 1.7.1

This page is a scene site

Each section you scroll past is a chapter that announces the pose it wants. One controller owns the loop and hands the time to small modules that know nothing about the page. The drawing behind these words is the system they describe.