Automatic pretty permalinks for Eleventy

19 January 2020

Here's what I want to achieve: a source file blog/2020-01-01-post-slug.md should turn into a file generated at _site/2020-01-post-slug/index.html. The trick is to create a 11tydata.js file that tells Eleventy how to structure all permalinks in that folder.

This is the root folder of my Eleventy-based website.

.eleventy.js
blog
├── 2019-12-31-post-slug.md
├── 2020-01-01-another-post-slug.md
├── blog.11tydata.js

The solution

There's a cool trick you can do with Eleventy's data files and that is that you can apply them to a certain directory only if you place the file there. So the configuration I supply in blog/blog.11tydata.js only applies to all files in the blog/ folder. This is the part that does the trick to generate pretty permalinks:

module.exports = {
	permalink: '/{{ page.date | date: "%Y-%m" }}-{{ page.fileSlug | slug }}/index.html'
}

As you can see, my permalinks are based on the page's date and fileSlug. That is possible by default in Eleventy, so there was no special trick here.