Legends — Eleventy (11ty) playground

This repository is a small experiment with Eleventy (11ty) to validate it as a replacement for PHP-based page composition.
The goal is to build pages from reusable elements (partials/components) and ship pure static output: HTML + JS + CSS.

Why Eleventy (highlights)

• Static-first output: generates ready-to-host files (no server runtime required).
• Composable templates: build pages from layouts, includes and shortcodes (similar workflow to PHP partials, but at build time).
• Minimal & flexible: small core, bring only what you need.
• Great developer experience: quick iteration, simple configuration, predictable build pipeline.
• Plays well with modern tooling: integrates nicely with bundlers and CSS tooling (here: Vite + Tailwind CSS).
• Portable deployment: output is just files → host it anywhere (CDN, object storage, static hosting).

Tech stack

• @11ty/eleventy
• Nunjucks
• Vite
• Tailwind CSS
• Package manager: pnpm

Project structure (overview)

• src/ — Eleventy input (pages, layouts, includes, templates)
• src/_includes/ — shared layouts/partials (Nunjucks)
• src/assets/ — source assets (also copied to output)
• public/ — static files copied as-is to the site root
• dist/ — production output (generated)

Scripts

Install dependencies:

pnpm install

Start dev server (Vite):

pnpm dev

Build for production (Vite first, then Eleventy):

pnpm build

Preview production build:

pnpm preview

Notes on Vite + Eleventy integration

• In development, assets are served by the Vite dev server.
• In production, Eleventy reads Vite’s manifest and injects the correct built CSS/JS files.
• Static files are passed through:
  • public/ → copied to /
  • src/assets/ → copied to /assets

Output

After a production build, the final site is available in dist/.