Documentation — Table of Contents

Integrate Baseline with Eleventy Base Blog

Add Baseline to the official eleventy-base-blog starter with minimal changes: install the plugin, wire it into eleventy.config.js, add the required data files, align assets, and verify head/meta and sitemap.

Don’t want to do this manually? A ready-made fork is available: https://github.com/apleasantview/eleventy-baseline-blog.

Prerequisites

You have eleventy-base-blog cloned and running (npm install, npm run dev works).
Eleventy v3.x; package.json has dev and build scripts.
site.url will be set via env (URL) for production.

Steps

Install Baseline.

npm install @apleasantview/eleventy-plugin-baseline

Make changes and add Baseline to eleventy.config.js.

In your existing config:
- Remove the HtmlBasePlugin import/call.
- Import Baseline and the Baseline config object; add the Baseline plugin last:
```
export default async function(eleventyConfig) {
  // ...previous config.
  eleventyConfig.addPlugin(baseline());
};
export const config = baselineConfig; // spread to override if needed
```
- Update passthroughCopy inputs to ./src/public/ and ./src/content/feed/pretty-atom-feed.xsl.
- Remove watch targets for CSS/images if present (Baseline handles them).
- Point CSS/JS bundle toFileDirectory to assets/css and assets/js respectively.
- Set base to process.env.URL.
- Keep posts collection clean of 11tydata.js (after adding Baseline):
```
eleventyConfig.addCollection("posts", function (collectionApi) {
  return collectionApi.getFilteredByTag("posts").filter(item => {
    return !item.inputPath.endsWith("11tydata.js");
  });
});
```
View a complete configuration example in the eleventy-base-blog fork.
Add a local .env for development so ELEVENTY_ENV and process.env.URL are set:
```
ELEVENTY_ENV="development"
URL="http://localhost:8080"
```
In CI/production, set URL to your live origin (e.g., https://example.com); Baseline uses it for canonical URLs and sitemap.
Move Eleventy Base Blog folders under src/.

Move the following folders to match Baseline’s defaults:
- _data → src/_data
- _includes → src/_includes
- content → src/content
- css → src/assets/css
- public → src/public
Update layouts/includes to resolve from src/ and content from src/content/. Delete sitemap.xml.njk in src/content/ (Baseline’s sitemap handles it).

Add required data files.

src/_data/site.js:

export default {
  title: "Eleventy Base Blog (Baseline Edition)",
  tagline: "Baseline + Eleventy Base Blog",
  url: process.env.URL || "http://localhost:8080/",
  defaultLanguage: "en",
  noindex: false
};

src/_data/head.js:

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

Align assets.

Ensure these exist (or create minimal stubs):
- src/assets/css/index.css — import your base CSS or start empty.
- src/assets/js/index.js — optional JS entry; can be empty.
- src/assets/assets.11tydata.js to keep assets out of collections:
```
export default {
  eleventyExcludeFromCollections: true
};
```

Add <baseline-head> to base.njk.

Insert <baseline-head> in <head>, keep the feed link and the @zachleat/heading-anchors module:

<head>
  <baseline-head></baseline-head>
  <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
  <style>{% getBundle "css" %}</style>
  <script type="module">{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}</script>
</head>

Organize content and set permalinks.

Move the following files to src/content/pages/ and set their permalinks as needed:

404.md, about.md, blog.njk, index.njk, tag-pages.njk, tags.njk

Example index.njk:

---js
const permalink = "/";
---

Add the permalink function in blog.11tydata.js:

export default {
  // Keep tags and layout keys.
  permalink: function ({page}) {
    if (page.inputPath.includes('11tydata.js')) {
      return false;
    }
    return `/blog/${this.slugify(page.fileSlug)}/`;
  }
}

Use Baseline inline assets filters with the Eleventy Bundle plugin.

Replace direct CSS files includes in src/_includes/layouts/post.njk and src/_includes/layouts/home.njk with the inline PostCSS filter. Example:
```
{% set cssPath = _baseline.assets.input ~ "css/message-box.css" %}
{{ cssPath | inlinePostCSS | safe }}
```
Verify head/meta and sitemap.

Dev: npx rimraf dist/ && npm run dev
Build: npx rimraf dist/ && npm run build
Check a page’s <head> for canonical/OG/Twitter shells (Baseline).
Inspect dist/sitemap.xml for correct URLs (uses site.url and pathPrefix if set).

Optional: navigator/debug.

Enable enableNavigatorTemplate: true if you want the navigator page (dev only).
Use filters _inspect, _json, _keys on a debug page to inspect data.

Next steps

Add recommended build scripts and helper packages: Baseline Build Scripts and Cleanup.

Notes

Keep site.url origin-only; use pathPrefix if you deploy under a subpath.
Baseline assets pipeline uses src/assets/css/index.css and src/assets/js/index.js as entrypoints.
If you have existing CSS/JS paths, point head.js and your layout links/scripts to the Baseline paths or mirror the files.

Previous: CI/Publish Checklist

Next: Baseline Build Scripts and Cleanup