Eleventy Baseline
English Nederlands Français
|
Table of Contents

What is Baseline?

What Baseline is

Baseline is an Eleventy plugin that handles the scaffolding every Eleventy site ends up needing.

Eleventy hands you a content pipeline and gets out of your way.

That is the appeal, and also the reason every site you build with it ends up needing the same wiring underneath: directory layout, an asset pipeline, image handling, head tags, sitemap, language routing.

None of it is hard. You just write it again every time.

A cohesive plugin system

The usual ways out are starter repos that fork once and rot, or stacks of single-purpose plugins that do not know about each other and tend to fight at the edges.

Baseline handles the infrastructure layer, specifically the parts that fit together.

Your layouts in _includes/, your content and data in content/ and _data/, your styles and scripts in assets/, and any plugins or filters you add yourself, all stay yours.

Who this is for

Baseline is written for someone who has built a handful of Eleventy sites and caught themselves wiring up the same things every time. You want those decisions made together, so they fit.

You still want to own your templates, content, and design. You would rather start from a working Baseline than a blank slate.

It is probably not for you if you already have a setup you like. Baseline does not replace what works; it replaces the third or fourth time you would set the same thing up from scratch.

It is also not for you if you want a full framework that owns layout and content as well. Baseline is deliberately smaller than that.

Why a plugin?

Recipes drift. Starter repos fork once and rot. Frameworks impose more than they solve.

When Eleventy's defaults move or the patterns shift, you get the new version on npm install instead of hunting through six tutorials and reconciling them by hand again.

What the Baseline modules do

Five modules, each wiring a distinct concern into Eleventy:

  • assets: the asset pipeline. One CSS entry point per directory through PostCSS, one JS entry point through esbuild, and inline filters (inlinePostCSS, inlineESbuild) for critical-path CSS or JS.
  • head: a <baseline-head> placeholder that gets replaced with a sorted, deduped element list. Charset, viewport, title, description, robots, canonical, hreflang, plus the SEO payload (Open Graph, Twitter, JSON-LD). You drop the placeholder in your layout once.
  • multilang: directory-based multilingual support. page.translations for a page's other-language versions, hreflang, and translation filters (it wraps Eleventy's I18nPlugin). Opt-in.
  • navigator: runtime-introspection surface and public read surface. A phpinfo()-style virtual page that dumps current build state (on in development by default), plus the read surface for the content graph.
  • sitemap: an XML sitemap. Every page is included unless you exclude it. When multilang is active, you get per-language sitemaps plus an index.

Threading the modules together is page context at _pageContext: a normalised per-page object the head, multilang, and sitemap modules all read from internally. Your templates can read it too. See the page context reference.

Baseline content helpers

Alongside the modules, Baseline registers a small set of additions the moment you load it. These are always on because they are too small to be worth opting in or out of:

  • Filters: markdownify, relatedPosts, isString, and t for translating UI strings. See the filters reference.
  • Globals: a date-formatting helper, plus the _baseline data tree (env, features, paths) that templates can read at any time. See the globals reference.
  • An image shortcode built on top of eleventy-img: AVIF and WebP, responsive widths, lazy loading. Alt text is required; the build warns if you skip it.

Three more behaviours need no configuration at all: a drafts preprocessor, a dev image pipeline, and passthrough copy for the static/ directory. Content helpers covers what each one does, and the full surface lives in the core reference chapter.

Stability and scope

Baseline is in active development. Versions ship as 0.1.0-next.X and that is a deliberate signal: things may shift between releases, and you should pin a version when you build something serious on top.

The five modules above are the supported surface today. The head module also emits a full SEO payload: canonical, Open Graph, Twitter cards, and a JSON-LD graph, configured through settings.seo and per-page front matter.

If something in the docs claims a behaviour you cannot reproduce, the docs are probably wrong. Please open an issue.

Where to go next

  • The concept chapter for the mental model.
  • The quickstart for a checklist that gets you a running site.
  • The simple site tutorial for a guided walk through the same checklist with reasoning.
  • The architecture snapshot for the three layers Baseline is built in: state, runtime, modules.

Already have an Eleventy site you want to graft Baseline onto? See Integrate Baseline with Eleventy Base Blog.