Eleventy Plugin Baseline

A magic carpet ride

Table of Contents

Build a Simple Baseline Site

Create a single-language Eleventy site using @apleasantview/eleventy-plugin-baseline with its defaults. We’ll use npm, Node 20.15.0, minimal CSS, and keep things as close to “starter” as possible.

What you’ll build

  • A basic Eleventy site with one page.
  • Baseline wired with default options (multilingual off, sitemap on, navigator template off).
  • A tiny stylesheet, bundled automatically via Baseline’s assets pipeline, and an auto-generated sitemap.xml.

Prerequisites

  • Node 20.15.0 (or >=20).
  • npm.
  • A terminal.

1) Create the project

mkdir simple-baseline-site
cd simple-baseline-site
npm init -y
  • Open package.json and set "type": "module" (Baseline expects ESM). Example:
    {
	"name": "simple-baseline-site",
	"type": "module",
	"scripts": {
		"dev": "npx @11ty/eleventy --serve",
		"build": "npx @11ty/eleventy"
	}
}

2) Install Eleventy, Eleventy Image and Baseline

npm install @11ty/eleventy @apleasantview/eleventy-plugin-baseline @11ty/eleventy-img

3) Configure Eleventy to use Baseline defaults

Create eleventy.config.js in the project root:

import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	// Defaults: verbose off, navigator off, sitemap on, multilingual off.
	eleventyConfig.addPlugin(baseline());
}

export const config = baselineConfig;

export const config = baselineConfig; lets Eleventy pick up Baseline’s directory/default settings automatically.

Baseline will configure HtmlBasePlugin to use process.env.URL automatically; create a local .env for dev, and set URL in your host/CI for production so links stay correct.

Create a local .env file now:

ELEVENTY_ENV="development"
URL="http://localhost:8080/"

4) Required site data

Create src/_data/site.js:

export default {
	title: 'Simple Baseline Site',
	tagline: 'Hello, Eleventy + Baseline',
	url: process.env.URL || 'http://localhost:8080/',
	defaultLanguage: 'en',
	noindex: false
};

Add src/_data/head.js so your bundled assets load:

export default {
	link: [{ rel: 'stylesheet', href: '/assets/css/index.css' }],
	script: [{ src: '/assets/js/index.js', defer: true }]
};

5) Minimal layout

Create src/_includes/layouts/base.njk:

<!DOCTYPE html>
<html lang="{{ lang | default(site.defaultLanguage) }}">
  <head>
    <baseline-head></baseline-head>
    <meta name="color-scheme" content="light dark">
  </head>
  <body>
    <main id="main">
      <h1>{{ title }}</h1>
      {{ content | safe }}
      {% if page.url !== "/" %}
        <p><a id="go-back" href=""><span style="vertical-align: text-bottom;">&#8592;</span>&nbsp;Go back</a></p>
      {% endif %}
    </main>
    <script>
    const backBtn = document.getElementById("go-back");
    if ( backBtn ) {
      backBtn.addEventListener("click", (event) => {
        event.preventDefault();
        history.back();
      });
    }
    </script>
  </body>
</html>

6) Add a first page

Create src/content/pages/index.md:

---
title: 'Hello Baseline'
description: 'A minimal Eleventy page powered by eleventy-plugin-baseline.'
permalink: '/'
layout: 'layouts/base.njk'
---

You’re looking at a page rendered with Eleventy and the Baseline plugin defaults.

## Index

<ul class="index-links">
{% for item in collections.all %}
<li><a href="{{ item.url }}">{{ item.data.title }}</a></li>
{% endfor %}
</ul>

7) Minimal assets

Create src/assets/assets.11tydata.js to keep assets out of collections:

export default {
	eleventyExcludeFromCollections: true
};

Create src/assets/css/index.css:

body {
	font-family: system-ui, sans-serif;
	margin: 0;
	padding: 2rem;
	line-height: 1.5;
	color: #1f2937;
	background: #f8fafc;
}

h1 {
	margin-bottom: 0.5rem;
}

Create src/assets/js/index.js:

document.addEventListener('DOMContentLoaded', () => {
	console.log(`Howdy!`);
});

8) Run the site locally

npx rimraf dist/ && npm run dev
  • Open the printed local URL (default http://localhost:8080/). You should see “Hello, Baseline.”
  • While dev runs, Eleventy also writes to dist/, so you can peek at the generated files (including sitemap.xml).
Eleventy doesn’t clean `dist/` automatically. If you rerun dev/build or when your build seems stale, clear `dist/` first (e.g., `npx rimraf dist`).

9) Production build and inspect output

npx rimraf dist/ && npm run build
  • Find the built files in dist/.
  • dist/sitemap.xml is generated automatically (sitemap module is on by default).

10) Next steps

  • Add more pages under src/content/pages/ with front matter (title, description, permalink, layout).
  • If you deploy under a subpath, set pathPrefix in eleventy.config.js.
  • When you have a production URL, update src/_data/site.js so canonical URLs and the sitemap are correct.