Permalinks Are Your Friend - Existing Site Conversion - Eleventy tricks

Ed's Blog Index & Contents

May 14, 2021 7:00

First attempt at 11ty Permalinks


  • How was I feeling the first week diving head first into Eleventy. I would say frustrated and confused. Maybe Dazed and Confused. The good news is the frustration gradually subsided over a couple weeks as I got used to the culture and brilliance of Eleventy. One major frustration, easily fixed, was by default, Eleventy created a folder for every HTML file with the same name as the root of the HTML file, inside each folder was an Eleventy rendered index.html file. Nice if creating a website from scratch, but I wasn't. I had an existing directory structure of 491 files in 2 dozen folders that had grown over 20 years that I was used to navigating. I wasn't going to go thru all 491 files and change every link!!
  •   Example: reunion.html created a folder "reunion" with the rendered file "index.html" inside that folder.
  • I see the reasons for this. This is definitely a feature, a really nice feature that I will eventually use. It is simple, easier to navigate and great for creating a blog or a website from scratch.
  • Reading many getting started with Eleventy websites didn't help solve my frustration until I discovered Permalinks. If you are converting an existing website to Eleventy you will want to use Permalinks.

I put the following permalink line into almost all of my front matter areas. It tells Eleventy where and what to name the rendered file. This is a real file myLayout.njk used in my Eleventy setup:

My Permalink Example

In this case page.filePathStem is the name of the file to the left of the file extension. So in this example it will create "name of file".html. For example: in the file reunion.html page.filePathStem = reunion there is no directory structure specified in the Permalink, so Eleventy will create the file reunion.html in the same folder. You could also specify something like Permalink: "404.html" and it will name the file 404.html in the same directory. Nice huh?