Add the walks

Now the site gets what it is for: Ailsa’s walks. The folder’s page lists every walk, and the home page shows the latest three.

Write the walks

In content/walks/2026-09-13-ben-ledi.md:

---
title: Ben Ledi
---
A short day from the car park at Stank, up through the forest and onto
the long south-east ridge. Cloud sat on the summit until just after
noon, then lifted all at once to show Loch Venachar below.

- Height: 879 m
- Time: four and a half hours, with a long lunch

The date at the start of the file’s name is the post’s date, and Statac leaves it out of the URL: this walk is published at /walks/ben-ledi/.

Add two more walks the same way, with whatever words you like: content/walks/2026-09-27-ben-vorlich.md, titled Ben Vorlich, and content/walks/2026-10-11-schiehallion.md, titled Schiehallion.

Statac builds each walk with templates/page.html, like the About page. The browser’s list of pages has all three.

Share the frame

The site is about to have three templates: one for pages, one for the list of walks and one for the home page. All three need the same <head> and header, so write those once, in a template the others share.

In templates/base.html:

<!doctype html>
<html lang="{{ page.language }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ headline(page) }} - {{ site.title }}</title>
  {{ css("site.css") }}
</head>
<body>
  <header>
    <a href="{{ url("/") }}">{{ site.title }}</a>
    <a href="{{ url("/walks/") }}">Walks</a>
    <a href="{{ url("/about/") }}">About</a>
  </header>
  <main>
    {% block main %}{% endblock %}
  </main>
</body>
</html>

Then templates/page.html keeps only what is its own, and shows a walk’s date.

In templates/page.html:

{% extends "base" %}
{% block main %}
  <h1>{{ headline(page) }}</h1>
  {% if page.date %}
  <p><time datetime="{{ page.date | moment }}">{{ page.date }}</time></p>
  {% endif %}
  {{ page.content }}
{% endblock %}

{% extends "base" %} builds the page with base.html, and puts the block called main where base.html has its empty one. {% if %} shows the date only on a page that has one, so the About page shows none. See Templates.

Each walk now shows its date, written in the site’s language: 13 September 2026. The header has a link to the list of walks, which doesn’t exist yet, so Statac warns of it as it does of the home page.

List the walks

In content/walks/index.md:

---
title: Walks
---
Every walk, newest first.

A folder’s index.md is its list page, published at the folder’s URL, /walks/. Statac builds a list page with templates/folder.html.

In templates/folder.html:

{% extends "base" %}
{% block main %}
  <h1>{{ headline(page) }}</h1>
  {{ page.content }}
  <ul>
    {% for post in page.posts %}
    <li><a href="{{ post.url }}">{{ headline(post) }}</a>, {{ post.date }}</li>
    {% endfor %}
  </ul>
{% endblock %}

page.posts is the folder’s dated posts, newest first, and {% for %} writes a line of the list for each. The warning about /walks/ goes. See Lists, tags and series.

The home page

In content/index.md:

---
title: Hill Notes
---
Notes from walks in the Scottish hills, written up the evening after.

content/index.md is published at /, and Statac builds the home page with templates/home.html.

In templates/home.html:

{% extends "base" %}
{% block main %}
  {{ page.content }}
  <h2>Latest walks</h2>
  <ul>
    {% for post in site.posts[:3] %}
    <li><a href="{{ post.url }}">{{ headline(post) }}</a>, {{ post.date }}</li>
    {% endfor %}
  </ul>
{% endblock %}

site.posts is every post on the site, newest first, and [:3] takes the first three.

See it

When you save the last two files, statac serve builds the site again:

`content/index.md` and `templates/home.html` changed. Built 6 of 6 files in 0.00 seconds. Told the browser to reload.
Added 1 URL to `published.txt`.
Gone since the last build: 1 broken-link.

The last warning has gone. http://localhost:3000/ is now the home page, with the three walks under Latest walks, and the header links to every part of the site.

To see the site’s problems at any time without serving it, run statac check in the site’s folder:

No problems.

Next

In part 5, you build the site for publishing, and put it on a web host.