Eleventy Plugin Baseline

A magic carpet ride

Table of Contents

Integrate 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.

A completed integration of eleventy-base-blog and Baseline is available on Github.

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

  1. Install Baseline.

    npm install @apleasantview/eleventy-plugin-baseline

  2. 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.

  3. 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.

  4. 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).

  5. 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 }]
};

  6. 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
};

  7. 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>

  8. 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)}/`;
	}
};

  9. 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 }}

  10. 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).

  11. 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

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.