Table of Contents

Baseline concepts

Baseline makes the structural decisions that Eleventy leaves open — directory layout, asset pipeline, image handling, SEO, sitemaps — and wires them into a set of modules that work together. This page is a conceptual map: what Baseline handles, how the pieces relate, and where your decisions take over.

The one‑sentence model

Baseline makes the setup decisions (directory structure, template engine, image formats, meta tags, asset bundling, sitemap) so you can skip the wiring and start building.

What Baseline does

Baseline handles

Directory structure — src/ as input, dist/ as output, with a standard layout for assets, data, and templates.
Asset pipeline — PostCSS for CSS, esbuild for JS. One entry point per directory.
Image shortcode — AVIF and WebP, responsive widths, lazy loading.
<head> tags — meta, canonical, Open Graph, title. Drop <baseline-head> in your layout.
Sitemap — XML generation, multilingual support with hreflang.
Debug tooling — template inspection filters and an optional navigator page.

You handle

Visual design, CSS, layout.
Content structure and naming.
Templates and layout logic.
Deployment.

How to think about configuration

Baseline’s configuration has two parts:

Plugin options

You pass baseline({...}) options to enable or disable modules — navigator page, sitemap generation, multilingual support.
```
eleventyConfig.addPlugin(
	baseline({
		enableNavigatorTemplate: false,
		enableSitemapTemplate: true
	})
);
```
Exported config object

You re-export baselineConfig so Eleventy uses Baseline’s directory structure, template engine, and formats. Start from the defaults; override if you need to.
```
import { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';
export const config = baselineConfig;
```

The plugin controls what Baseline does. The config export controls where Eleventy looks. They stay separate so you can reason about each one independently.

How the modules fit together

Your content and templates live in src/content/ and src/_includes/ — that’s yours. Baseline’s modules handle everything around them: assets are compiled, head tags are injected, sitemaps are generated. Eleventy writes the result to dist/.

Here’s how the modules relate:

Assets

assets-core establishes the pipeline 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 generates XML sitemaps using site.url and page data. Every page is included unless you exclude it. In multilingual mode, it produces per-language sitemaps plus an index.
Multilingual (optional)

multilang-core adds translations collections, i18n filters, and language normalization. Sitemap generation stays in sitemap-core — multilang-core provides a helper it depends on.
Debug (optional)

navigator-core exposes _navigator and _context globals for inspecting template data. Optional virtual debug page in dev.

Previous: Overview

Next: Quickstart