Eleventy Baseline
English Nederlands Français
|
Table of Contents
Page 1 of 6

Eleventy Base Blog

Adding Baseline to eleventy-base-blog is mostly subtraction. The config goes from 168 lines to 84, sixteen registrations to nine, and dependencies ends up holding exactly one package. This guide walks the whole conversion in the order it was actually done.

Written against @apleasantview/eleventy-plugin-baseline@0.1.0-next.45 and eleventy-base-blog v9.0.0. The reference implementation is the 0.1.0-next.45 branch of eleventy-baseline-blog, whose commits follow the steps below one for one.

Before you start: the base blog is a demo

Most of what looks awkward in eleventy-base-blog is deliberate demonstration rather than oversight. dir.includes: "../_includes" proves directories are configurable. The per-page addBundle calls are a shop window for eleventy-plugin-bundle. There is ---js front matter because JS front matter is a thing Eleventy can do, and the fifth post is draft: true because drafts need demonstrating.

"Here is what Eleventy can do" is a coherent goal. It is a different job from "here is a blog you can start writing in", and most people clone it for the second. That is worth knowing before the config page, where a lot comes out at once. You are converting a showcase into an opinionated project, and the things you delete were exhibits.

Prerequisites

  • eleventy-base-blog cloned and running (npm install, npm start).
  • Node 22 or newer. Baseline requires it, and the starter advertises 18.
  • Somewhere to set an environment variable on your host, for BASELINE_URL.

The shape of it

Five pages after this one, listed at the foot of each. A page is a sitting, and the site does not build correctly again until you reach the end of the third.

  1. Prepare the project. Gitignore, install, scripts. Nothing structural, and it saves you from stale output later.
  2. Move it under src/. Directories, the settings file, standalone pages, then slugs and permalinks. The build is broken for most of this, expectedly.
  3. Rebuild the config. Park the old one, write a nine-line replacement, then let the build tell you what to put back. This is the page the whole guide is arranged around.
  4. Wire up the head. Swap in <baseline-head>, then finish the config with the feed, syntax highlighting and images.
  5. Tidy up, then check the output. Rehome the per-page CSS, fix the links, give every page a description, delete metadata.js.

Nothing on the next page changes how the site builds. It is the housekeeping that makes everything after it less painful.