Documentation — 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 function (eleventyConfig) {
  // Defaults: verbose off, navigator off, sitemap on, multilingual off.
  eleventyConfig.addPlugin(baseline());
}

export const config = baselineConfig;

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.

Previous: Tutorials

Next: Build a Multilingual Baseline Site