--- title: 'Quickstart' description: 'The minimum working setup: install, configure, run.' slug: 'quickstart' type: 'article' date: 2026-04-28T00:00:00.000Z lang: 'en' url: 'https://www.eleventy-baseline.dev/docs/introduction/quickstart/' --- The minimum working setup. A checklist; for a guided walk with reasoning, see the [[simple-baseline-site | simple-site tutorial]]. --- ## Prerequisites {% stepsBlock %} - Node 20.15.0 or newer, and npm. - A `package.json` with `"type": "module"` and Eleventy scripts: ```json { "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: ```text 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. {% endstepsBlock %} --- ## 1) Install ```bash 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: ```js import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline'; const settings = { title: 'My Site', url: process.env.URL, defaultLanguage: 'en' }; export default async function (eleventyConfig) { await eleventyConfig.addPlugin( baseline(settings, { sitemap: true, navigator: true }) ); } export const config = baselineConfig; ``` Two things to notice: {% stepsBlock %} - `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). {% endstepsBlock %} {% alertBlock "info" %} ### 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 | config-export reference]] has the full version. {% endalertBlock %} --- ## 3) Project files Create the rest of the project files: {% stepsBlock %} - `src/_data/settings.js`: site identity (`title`, `url`, `defaultLanguage`, `languages`, `head` extras). - `src/_includes/layouts/base.njk`: base layout. Drop `` in place of the `` 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`. {% endstepsBlock %} --- ## 4) Run and build {% stepsBlock %} - Development: ```bash 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: ```bash npm run build ``` Inspect `dist/` for the final files. Remember to reset `URL` in `.env` to "http://localhost:8080/". {% endstepsBlock %} 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 | concept chapter]] chapter for the mental model and community-seeded conventions. - The [[simple-baseline-site | simple site]] tutorial for a fuller walk-through. - For multilingual: see the [[multilingual-baseline-site | multilingual site]] tutorial. - The [[head-and-noindex | head and noindex]] tutorial once you have the basics working. - The [[architecture-snapshot | architecture snapshot]] for the deeper read on how the plugin is built.