11ty-troubleshooting.md

Revision de3e3aadad6c95b4c507344efd3572aa06dcd553

11ty-troubleshooting.md · 2.3 KiB · Markdown Raw

The likely culprit is a mismatch between JSON syntax and the front-matter syntax used earlier in the tutorial.

The two syntaxes look similar but aren't interchangeable. Front matter (the --- block at the top of an .md or .html file) is YAML, so unquoted keys like layout: layout.html are fine.

A posts.json file is actual JSON, which requires double quotes around every key and string value, and no trailing commas. If it was typed the same way as front matter, { layout: layout.html } then that's invalid JSON and Eleventy either throws a parse error or silently fails to apply it, which matches what you're describing (title not filling in, index not building).

Here's a working reference setup:

posts/posts.json

{
  "layout": "layout.html",
  "tags": "post"
}

Two things here, "layout" applies layout.html to everything in the folder, and "tags": "post" is what makes collections.post populate on the homepage. If your version only has layout and not tags, the layout/title problem and the missing index are actually two separate symptoms of one missing line.

posts/post-1.md

---
title: My First Post
---
This is the content of my first post.

The title still has to be set per-post in that file's own front matter, posts.json assigns the layout to every file in the folder, but it doesn't invent a title for each one. If a post's front matter is missing title:, {{ title }} in the layout will just render blank.

_includes/layout.html

<!doctype html>
<html>
<head><title>{{ title }}</title></head>
<body>
  <h1>{{ title }}</h1>
  {{ content }}
</body>
</html>

index.html (homepage, listing posts)

---
layout: layout.html
title: My Blog
---
<ul>
{% for post in collections.post %}
  <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ul>

Also:

Wipe _site and restart the server. You already saw stale folders stick around after renaming test-post.md to post-1.md 11ty doesn't always clean up old output on renames. Ctrl+C the terminal running the local dev server, delete the _site folder, then run npx @11ty/eleventy --serve to restart.
Watch the terminal for a JSON parse error. If posts.json is malformed, Eleventy will print something like Error: posts.json: Unexpected token on save.