---
title: 'Integrate with Eleventy Base Blog'
description: 'Add @apleasantview/eleventy-plugin-baseline to eleventy-base-blog: install, wire config, align data and assets, migrate head extras, and verify the build.'
slug: 'integrate-eleventy-base-blog'
type: 'article'
date: 2026-01-25T00:00:00.000Z
lang: 'en'
url: 'https://www.eleventy-baseline.dev/docs/how-to/integrate-eleventy-base-blog/'
---
{% alertBlock "info" %}
This article is planned for revision, its content might be stale.
{% endalertBlock %}
Add Baseline to the official `eleventy-base-blog` starter with as little disruption as the starter's existing wiring allows. The work splits into four pieces: bring Baseline in, line the starter's directories up with Baseline's contract, migrate the starter's hand-rolled `` into Baseline's head pipeline, and confirm the output.
If you don't already have a project to integrate into, the [[simple-baseline-site | simple site tutorial]] is the lighter starting point.
---
## Prerequisites
- You have `eleventy-base-blog` cloned and running (`npm install`, `npm run dev` works).
- Eleventy 3.x; `package.json` has `dev` and `build` scripts.
- `settings.url` will be set via env (`URL`) for production.
---
## 1) Install Baseline
```bash
npm install @apleasantview/eleventy-plugin-baseline
```
---
## 2) Wire Baseline into `eleventy.config.js`
In your existing config:
{% stepsBlock "compact" %}
- Remove the `HtmlBasePlugin` import and call. Baseline registers its own.
- Import Baseline and the Baseline directory contract; add the plugin last so it sees the rest of your config:
```js
import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';
import settings from './src/_data/settings.js';
export default async function (eleventyConfig) {
// ...your existing config
await eleventyConfig.addPlugin(baseline(settings));
}
export const config = baselineConfig; // spread to override if needed
```
- Update `passthroughCopy` inputs to `./src/static/` and `./src/content/feed/pretty-atom-feed.xsl`.
- Remove watch targets for CSS or images if present (Baseline handles them).
- Point CSS and JS bundle `toFileDirectory` to `assets/css` and `assets/js` respectively.
- Set `base` to `process.env.URL`.
{% endstepsBlock %}
The full file is in the [`eleventy-base-blog` fork](https://github.com/apleasantview/eleventy-baseline-blog/blob/baseline-edition/eleventy.config.js).
---
## 3) Add a local `.env` for development
```txt
ELEVENTY_ENV="development"
URL="http://localhost:8080"
```
In CI and production, set `URL` to your live origin (e.g. `https://www.example.com`); Baseline uses it for canonical URLs and the 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/static`
The last move has an asymmetry worth knowing upfront. Baseline's directory contract sets `public: 'static'`, so the virtual key on `eleventyConfig.directories` is `public` but the folder on disk stays `static/`. The [[config-export | config-export reference]] covers the same split.
Update layouts and includes to resolve from `src/`, and content from `src/content/`. Delete `sitemap.xml.njk` in `src/content/`; Baseline's sitemap module handles it.
---
## 5) Add the required data file
`src/_data/settings.js` is the single source for site identity and head extras. The starter's `_data/head.js` is no longer in play once Baseline is wired; head extras move onto `settings.head` instead (step 7 walks through the migration):
```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,
head: {
link: [{ rel: 'stylesheet', href: '/assets/css/index.css' }],
script: [{ src: '/assets/js/index.js', defer: true }]
}
};
```
---
## 6) Align assets
Make sure 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 the assets directory out of collections:
```js
export default {
eleventyExcludeFromCollections: true
};
```
---
## 7) Migrate the starter's head children
The starter's `base.njk` writes a `` with three extras Baseline does not render for you: an Atom feed ``, an inline `