brennan revised this gist 1 month ago. Go to revision
1 file changed, 57 insertions
11ty-troubleshooting.md(file created)
| @@ -0,0 +1,57 @@ | |||
| 1 | + | The likely culprit is a mismatch between JSON syntax and the front-matter syntax used earlier in the tutorial. | |
| 2 | + | ||
| 3 | + | 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. | |
| 4 | + | ||
| 5 | + | 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). | |
| 6 | + | ||
| 7 | + | Here's a working reference setup: | |
| 8 | + | ||
| 9 | + | **`posts/posts.json`** | |
| 10 | + | ```json | |
| 11 | + | { | |
| 12 | + | "layout": "layout.html", | |
| 13 | + | "tags": "post" | |
| 14 | + | } | |
| 15 | + | ``` | |
| 16 | + | ||
| 17 | + | 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. | |
| 18 | + | ||
| 19 | + | **`posts/post-1.md`** | |
| 20 | + | ```markdown | |
| 21 | + | --- | |
| 22 | + | title: My First Post | |
| 23 | + | --- | |
| 24 | + | This is the content of my first post. | |
| 25 | + | ``` | |
| 26 | + | ||
| 27 | + | 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. | |
| 28 | + | ||
| 29 | + | **`_includes/layout.html`** | |
| 30 | + | ```html | |
| 31 | + | <!doctype html> | |
| 32 | + | <html> | |
| 33 | + | <head><title>{{ title }}</title></head> | |
| 34 | + | <body> | |
| 35 | + | <h1>{{ title }}</h1> | |
| 36 | + | {{ content }} | |
| 37 | + | </body> | |
| 38 | + | </html> | |
| 39 | + | ``` | |
| 40 | + | ||
| 41 | + | **`index.html`** (homepage, listing posts) | |
| 42 | + | ```html | |
| 43 | + | --- | |
| 44 | + | layout: layout.html | |
| 45 | + | title: My Blog | |
| 46 | + | --- | |
| 47 | + | <ul> | |
| 48 | + | {% for post in collections.post %} | |
| 49 | + | <li><a href="{{ post.url }}">{{ post.data.title }}</a></li> | |
| 50 | + | {% endfor %} | |
| 51 | + | </ul> | |
| 52 | + | ``` | |
| 53 | + | ||
| 54 | + | Also: | |
| 55 | + | ||
| 56 | + | - 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. | |
| 57 | + | - 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. | |
Newer
Older