Table of Contents

Quickstart

The minimum working setup. A checklist; for a guided walk with reasoning, see the simple-site tutorial.

Prerequisites

Node 20.15.0 or newer, and npm.

A package.json with "type": "module" and Eleventy scripts:

{
	"name": "baseline-quickstart",
	"type": "module",
	"scripts": {
		"start": "rimraf dist/ && npx @11ty/eleventy --serve",
		"build": "rimraf dist/ && cross-env ELEVENTY_ENV=production npx @11ty/eleventy"
	}
}

A .env for environment-specific values:
```
ELEVENTY_ENV="development"
URL="http://localhost:8080/"
```
Baseline reads ELEVENTY_ENV to decide what to enable in development versus production. URL becomes the canonical site URL when set. The other entries you might add are project-specific.

1) Install

mkdir baseline-quickstart
cd baseline-quickstart
npm init -y
npm install @11ty/eleventy @apleasantview/eleventy-plugin-baseline @11ty/eleventy-img

2) Configure

Create eleventy.config.js at the project root:

import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';

const settings = {
	title: 'My Site',
	url: process.env.URL,
	defaultLanguage: 'en'
};

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(
		baseline(settings, {
			sitemap: true,
			navigator: true
		})
	);
}

export const config = baselineConfig;

Two things to notice:

baseline() takes two arguments. settings is the site identity (title, url, languages, head extras); options is runtime behaviour (which modules are on, log verbosity, per-module options).
The config re-export looks unusual. It is. That way both Baseline and Eleventy agree on where things live (src/ as input, dist/ as output, the asset and public folders).

Why Baseline re-exports config.

Eleventy reads its directory configuration before any plugin runs, so a plugin cannot set those for you from inside addPlugin(). The config-export reference has the full version.

3) Project files

Create the rest of the project files:

src/_data/settings.js: site identity (title, url, defaultLanguage, languages, head extras).
src/_includes/layouts/base.njk: base layout. Drop <baseline-head></baseline-head> in place of the <head> element. That placeholder is the one element you write yourself.
src/content/pages/index.md: a starter page with front matter and a body.
src/assets/assets.11tydata.js, src/assets/css/index.css, src/assets/js/index.js: asset entry points (one CSS, one JS).
src/static/: passthrough-copied to the site root. The on-disk folder is static/; the virtual directory key Baseline registers is public.

4) Run and build

Development:
```
npm start
```
Open http://localhost:8080/. Check dist/ for output, including dist/sitemap.xml.
Production build:
Change URL in .env to an absolute URL. On a deployed site that's your real production URL; for this exercise, any absolute URL (e.g. https://www.example.com/) works to verify the output. Then run:
```
npm run build
```
Inspect dist/ for the final files. Remember to reset URL in .env to "http://localhost:8080/".

The drafts preprocessor (a build-time filter that drops templates marked draft: true) is on automatically: drafts are excluded from production builds (npm run build) and included in development (npm start).

Next steps

The concept chapter chapter for the mental model and community-seeded conventions.
The simple Baseline site tutorial for a fuller walk-through.
For multilingual: see the multilingual Baseline site tutorial.
The head and noindex tutorial once you have the basics working.
The architecture snapshot for the deeper read on how the plugin is built.

Previous: Overview

Next: Concept