Create the project

Let's start by creating the project folder. Everything after this happens in there.

mkdir simple-baseline-site
cd simple-baseline-site

Add the package file

Generate a standard package.json file. Now the folder becomes a project.

npm init -y

Then switch "type" to "module", which tells Node that the .js files here are ES modules, and swap the placeholder test script for the two the rest of the tutorial needs.

{
	"name": "simple-baseline-site",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"start": "npm-run-all clean dev",
		"dev": "cross-env ELEVENTY_ENV=development BASELINE_URL=http://localhost:8080/ eleventy --serve",
		"build": "npm-run-all clean build:eleventy",
		"build:eleventy": "cross-env ELEVENTY_ENV=production eleventy",
		"clean": "rimraf dist/"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"type": "module"
}

The whole file, so you can check yours against it. npm init wrote the empty description, main, keywords and author; nothing in this tutorial reads any of them.

Baseline is ESM, and so is the config you are about to write. Without that line Node reads eleventy.config.js as a CommonJS file and stops at the first import.

Five scripts, but only two you will type: npm start and npm run build. Each one empties dist/ first and then runs the real command, and npm-run-all is what chains them. Splitting them this way keeps each line short enough to read, and gives you somewhere to hang a second build step later.

The two variables in those scripts change with where the site is running, so they get set per command rather than typed into a file. BASELINE_URL comes back two pages from now as settings.url; deployment checks covers both of them.

The scripts lean on three small helpers, installed in the next step.

Install the packages

Eleventy comes first: Baseline names it as a peer dependency, so it belongs in your package.json rather than inside the plugin.

npm install @11ty/eleventy

Then the three helpers those scripts need: rimraf to delete dist/, cross-env to set environment variables, and npm-run-all to run one script after another. The first two work the same way on every operating system, which is the whole reason they are here rather than in the shell.

npm install rimraf cross-env npm-run-all

Baseline comes last, and brings everything else it needs with it, including the image library it uses when you reach for images.

npm install @apleasantview/eleventy-plugin-baseline

Newer npm versions hold install scripts back until you approve them, so you may see a warning naming sharp and esbuild. Nothing in this tutorial needs either, so you can ignore it, or run allow-scripts --all if it bothers you.

Keep the generated files out of git

If you are tracking this in git, add a .gitignore at the project root. Not using git? Skip the file. Nothing else in the tutorial depends on it.

node_modules/
dist/
.cache/
temp/

node_modules/ and dist/ are the usual suspects, both rebuilt from what you commit. .cache/ is where Baseline keeps the content graph it builds each run and the image renditions it has already encoded, both derived from what you commit.

temp/ is there in advance, for the scratch files every project ends up accumulating.

Eleventy will start now. It will also render nothing at all, because there is still no content.