---
title: 'Writing pages'
description: 'Write the homepage and a page beside it, one naming its own address and the other letting the folder rule decide.'
slug: 'writing-pages'
type: 'article'
date: 2026-08-15T00:00:00.000Z
lang: 'en'
url: 'https://www.eleventy-baseline.dev/docs/tutorial/writing-pages/'
---

Two pages to start with: a homepage, and one sitting next to it. Where each one lives decides how it gets its address.

The rule is worth stating once: **a file at the root of `content/` names its own address in front matter, and a file in a folder gets a slug and lets the folder decide.**

---

## Write the homepage

The homepage is the one page that cannot follow the folder rule, because its address is not derived from anything. It is the root, so it sits at the root. Create `src/content/index.md`, outside `pages/`:

{% raw %}

```md
---
title: 'Hello Baseline'
slug: 'home'
description: 'A minimal Eleventy page powered by eleventy-plugin-baseline.'
permalink: '/'
---

You are looking at a page rendered with Eleventy and the Baseline plugin defaults.

## Latest posts

<ul>
{%- for post in collections.posts | reverse %}
	<li><a href="{{ post.url }}">{{ post.data.title }}</a> - {{ post.date.toDateString() }}</li>
{%- endfor %}
</ul>
```

{% endraw %}

Sitting outside `pages/`, no folder rule reaches it, so it names its own address with `permalink: '/'`.

`title` and `description` are quietly doing more than they look like they are doing. But none of that shows up yet, because there is no head to put it in until you add `<baseline-head>` two pages from now. The homepage is the exception: it leads with the site's name and tagline instead.

That `{% raw %}{% for %}{% endraw %}` in the middle of a Markdown file is not a typo. Eleventy runs `.md` files through a template language first and renders the Markdown afterwards, so template tags in a `.md` file execute exactly as they would in a `.njk` one. It is one of the more useful things about Eleventy and one of the least obvious, because nothing about the file extension advertises it.

The loop walks `collections.posts`, which does not exist yet. That is fine: Nunjucks loops over a collection that is not there without complaining, so the list renders as nothing at all rather than as an error. It fills on the next page. `reverse` puts the newest first, which is the order a blog is read in.

The hyphens in `{% raw %}{%-{% endraw %}` are worth a second. They trim the newline the tag would otherwise leave behind. Without them Markdown sees blank lines sitting inside your `<ul>`, decides the HTML block ended, and wraps every list item in its own paragraph. It is the kind of thing you only debug once.

---

## Write a second page

Create `src/content/pages/about.md`:

```md
---
title: 'About'
slug: 'about'
description: 'What this site is, in one sentence, for anyone who wonders.'
---

This is an example page. Unlike a post, which turns up in a list of the newest
things you wrote, a page is for something that stays put.
```

This one is in `pages/`, so the rule reaches it: no permalink, and `slug: 'about'` lands it at `/about/`. That is the entire difference between the two files. One is at the root and names itself, the other is in a folder and just gets a name.

Two pages and one rule. The posts the homepage is already looking for are the next page.