---
title: 'Assets pipeline quickstart'
description: 'Wire Baseline''s assets module: a CSS entry through PostCSS, a JS entry through esbuild, the inline filters, and the difference between dev and production output.'
slug: 'assets-pipeline'
type: 'article'
date: 2026-04-13T00:00:00.000Z
lang: 'en'
url: 'https://www.eleventy-baseline.dev/docs/feature-guide/assets-pipeline/'
---

Ship CSS and JS through Baseline's assets module. By the end you'll have one CSS entry going through PostCSS, one JS entry going through esbuild, and a handle on the inline filters when you need them.

That, taken together, is what Baseline calls the assets pipeline.

The assets module is always on. PostCSS and esbuild are its processors, the small adapters that wire each pipeline into Eleventy. Bring your own configs, or let Baseline fall back to its defaults.

---

## What you will build

- `src/assets/css/index.css` bundled through PostCSS, using your config or Baseline's fallback.
- `src/assets/js/index.js` bundled through esbuild, minified for production.
- Optionally, the same content inlined into a template through `inlinePostCSS` and `inlineESbuild`.

---

## Prerequisites

- Node 20.15.0 (or >=20) and npm.
- Baseline already installed and configured, as in the [[simple-baseline-site|simple site tutorial]].
- `package.json` with `"type": "module"` and the `dev`/`build` scripts:
  ```json
  {
  	"name": "simple-baseline-site",
  	"type": "module",
  	"scripts": {
  		"start": "rimraf dist/ && npx @11ty/eleventy --serve",
  		"build": "rimraf dist/ && cross-env ELEVENTY_ENV=production npx @11ty/eleventy"
  	}
  }
  ```

---

## 1) Ensure Baseline is loaded

`eleventy.config.js`:

```js
import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';
import settings from './src/_data/settings.js';

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	await eleventyConfig.addPlugin(baseline(settings));
}

export const config = baselineConfig;
```

---

## 2) Add a page that links assets

Create `src/content/pages/assets-quickstart.md`:

```md
---
title: 'Assets Quickstart'
slug: 'assets-quickstart'
description: 'CSS and JS bundled by Baseline.'
layout: 'layouts/base.njk'
---

CSS should style this page, and JS should log to the console. Here is a small badge:

<span class="pill">Pending</span>
```

The `<link rel="stylesheet">` and `<script>` tags come from `settings.head` (set up in the simple site tutorial), so the layout never needs to know they exist. Baseline injects them into every page.

---

## 3) Author the CSS entry

Create `src/assets/css/index.css`:

```css
:root {
	color-scheme: light;
}

body {
	font-family: system-ui, sans-serif;
	margin: 0;
	padding: 2rem;
	line-height: 1.5;
	color: #1f2937;
	background: #f8fafc;
}

h1 {
	margin-bottom: 0.5rem;
}

.pill {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #e0f2fe;
	color: #0f172a;
	font-weight: 600;
}
```

If a `postcss.config.js` exists at the project root, Baseline picks it up. Otherwise it falls back to its built-in config.

---

## 4) Author the JS entry

Create `src/assets/js/index.js`:

```js
document.addEventListener('DOMContentLoaded', () => {
	console.log('Baseline assets: JS is loaded');
	const pill = document.querySelector('.pill');
	if (pill) {
		pill.textContent = 'Bundled JS is running';
	}
});
```

---

## 5) Run the site locally

```bash
npm start
```

- Open the local URL (default http://localhost:8080/). Confirm the styles apply and the console log fires.
- Dev writes to `dist/` as it runs, so `dist/assets/css/index.css` and `dist/assets/js/index.js` are inspectable while the server is up.
- Image-format changes (png, jpg, webp, gif, avif, svg) under `src/assets/` also trigger a rebuild during `npm run dev`.

Eleventy never cleans `dist/` for you. Clear it with `npx rimraf dist/` whenever a rebuild looks stale.

## 6) Production build and inspect output

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

- Check `dist/assets/css/index.css` (PostCSS output) and `dist/assets/js/index.js` (bundled and minified).
- Reset `URL` in `.env` to "http://localhost:8080/".

---

## Next steps

- Drop a `postcss.config.js` at the project root when you want to bring your own plugins.
- Add more entry points as the site grows; section-specific `index.css` files under subfolders work the same way.
- Reach for `inlinePostCSS` and `inlineESbuild` on critical snippets only. Inlining a full bundle defeats the point.
- See the [[assets | assets module]] reference for the full option list, and the [[filters | filters]] reference for `inlineESbuild` and `inlinePostCSS`.