Permalinks

By default, all links have their own directory, named based on the title of the page. URLs have a limited set of characters they can use, so they'll be transformed to not break in a process known as slugifying: all text becomes lowercase, and spaces are replaced with dashes (-). If you have emojis, other less common symbols, or any characters that URL's use to define parts of the link (slashes and dots), they will be omitted.

• "Hello World" > www.example.com/hello-world/
• "lowercase UPPERCASE title" > www.example.com/lowercase-uppercase-title/
• 😀happy PAGE!!!🤗 > www.example.com/happy-page/

The exception is the home page, which is simply stored at the root:

www.example.com

This setup keeps links short, and adds a trailing slash at the end.

Feel free to organize them as you wish in the content directory. Eleventy is set up in a way that allows data to cascade. In this example, this means that the file that modifies all links to be written in this format:

content/content.11tydata.yaml

Applies to the root folder:

content/

But also to any sub directory, including the one that this page is written in:

content/docs/customization/permalinks.md

Remove Trailing Slash

In content/content.11tydata.yaml, change the line:

permalink: "/permalinks/"

to:

permalink: "/permalinks"

and add this line under it (or anywhere in the file):

eleventyAllowMissingExtension: true

If you're using the template as is (apart from this change), the file should now look like this:

layout: "layouts/main.njk"
permalink: "/permalinks"
eleventyAllowMissingExtension: true

When swapping between adding the trailing slash and removing them, you will need to delete the build folder (_site) if it already exists, as Eleventy will generate errors.

Note that Eleventy recommends trailing slashes, and does not recommend removing them. See the docs for more information.

Add Sub Folders/Directories

If you'd prefer that some of your pages share a folder and not sit directly in the root folder, you will need to create an 11tydata file in the directory that you want to make changes.

For an example, you can use content/docs/docs.11tydata.yaml. The file has a single line, commented out. Uncomment it.

The file should look like this:

permalink: "/docs/permalinks/"

Keep in mind that the majority of links in the website are manually written, not calculated. This means that any link to the pages inside the docs/ folder will now be wrong, as the links have changed. It is recommended to define a link structure before your add content to your website, or to simply stick with the default setup with no sub folders in the first place.

Reserved Names/Folders

These names/strings should not be used as a title, as it will clash with existing files used by the website. Note that this includes any variations that will be slugified to the same value (i.e. "test" is equal to "TEST", which is equal to "😃tEsT😃")

• pagefind - Generated by the search engine.
• dist - Generated by Eleventy for generated static files.
• public - Used by the public/ folder.
• tags - Used by the template to create tag pages.