Permalinks Are Your Friend - Existing Site Conversion - Eleventy tricks

First attempt at 11ty Permalinks

Frustrated

• 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:

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?