No permalink in Eleventy

Question

I'm migrating from Jekyll to Eleventy, where previously my blog post links had the permalink in this style: /:title/

What I want: https://example.com/my-blog-post/ for posts/my-blog-post.md

What I get: https://example.com/posts/my-blog-post/ for posts/my-blog-post.md

How can I configure this in Eleventy? The official page on 11ty docs says it takes the name of the folder, which is posts in this case.

I want this /:title/ for all my markdown files. I can't manually set the permalink in all my files. Is there a way to do so for the entire posts collection?

I'm using this repo as the base theme.

Answer 1

So after searching a lot (not the docs), I finally found the solution in this article.

In the last part of that section, use this:

// posts.json (or whatever your collection name is)
{
   // ...
   "permalink": "/{{ title | slug }}/"
   // ...
}

Excerpt:

Using directory data to manage defaults

By default, Eleventy will maintain the structure of your content files when generating your site. In our case, that means /_basic-syntax/lists.md is generated as /_basic-syntax/lists/index.html. Like Jekyll, we can change where files are saved using the permalink property. For example, if we want the URL for this page to be /basic-syntax/lists.html we can add the following:

---
title: Lists
syntax-id: lists
api: "no"
permalink: /basic-syntax/lists.html
---

Again, this is probably not something we want to manage on a file-by-file basis but again, Eleventy has features that can help: directory data and permalink variables.

For example, to achieve the above for all content stored in the _basic-syntax folder, we can create a JSON file that shares the name of that folder and sits inside it, i.e. _basic-syntax/_basic-syntax.json and set our default values. For permalinks, we can use Liquid templating to construct our desired path:

{
   "layout": "syntax",
   "tag": "basic-syntax",
   "permalink": "basic-syntax/{{ title | slug }}.html"
}