Eleventy Plugin Baseline

A magic carpet ride

Table of Contents

Baseline concepts

Baseline is not a theme or framework. It is a thin, optional wiring layer for Eleventy. This page explains the core concepts so you can reason about what Baseline does, what it does not do, and where your code still lives.

The one‑sentence model

Baseline registers a set of small, composable modules (assets, head, sitemap, debug, i18n helpers) and exposes a few conventions so you can build faster without losing control of Eleventy’s defaults.

What Baseline changes (and what it doesn’t)

Baseline wires

  • An assets pipeline for src/assets/ (PostCSS for CSS and esbuild for JS).
  • Head/meta generation via a <baseline-head> custom element.
  • Sitemap templates (single or multilingual).
  • Debug helpers and an optional navigator page.
  • A multilingual helper module when enabled.

Baseline does not

  • Replace your templates, layouts, or content structure.
  • Dictate a theme or design system.
  • Hide Eleventy configuration details.
  • Change how you write content (Markdown/Nunjucks stays yours).

The four moving parts

  1. Your content + templates

    You still author content in src/content/ and templates in src/_includes/.

  2. Baseline modules (mostly fixed)

    Each module does one job. Most are enabled by default; options primarily toggle features (e.g., navigator template, sitemap template, multilingual).

  3. Global data and conventions

    Baseline exposes _baseline and _baseline.assets so you can build paths or inspect options. It uses Eleventy’s standard directory layout by default.

  4. Build output

    Eleventy writes to dist/, and Baseline’s modules generate assets, head tags, and sitemaps along the way.

How the modules relate (mental map)

  • Assets

    assets-core establishes the assets directory and exposes _baseline.assets.
    assets-postcss compiles src/assets/css/**/index.css → dist/assets/css/.
    assets-esbuild bundles src/assets/js/**/index.js → dist/assets/js/.

  • Head

    head-core merges page data + site data + _data/head.js, then injects the result into <baseline-head>.

  • Sitemap

    sitemap-core emits sitemap templates and uses site.url + pathPrefix for canonical URLs.

  • Multilingual (optional)

    multilang-core adds translations collections and supports per-language sitemaps.

  • Debug (optional)

    navigator-core adds _navigator/_context and can expose a virtual navigator page in dev.

How to think about configuration

Baseline’s configuration has two layers:

  1. Plugin options

    You pass baseline({...}) options to enable/disable modules or tweak behavior.

  2. Exported config object

    You export baselineConfig so Eleventy uses Baseline’s default directories, engines, and formats. You can override it if needed, but start from the defaults.

This split keeps the plugin behavior explicit while staying aligned with Eleventy’s config shape.

What you own (always)

  • Content structure and naming.
  • Templates and layout logic.
  • Visual design and CSS.
  • Content data in src/_data/.
  • Deployment and environment variables.

TL;DR

Baseline wires the boring parts so you can spend time on content, layout, and design. It stays close to Eleventy’s defaults and keeps your project structure familiar, while giving you a few convenience layers that you can opt into, override, or remove.

Previous: Overview

Next: Quickstart