Eleventy is not adding an html
suffix to index files generated from a nested index.md file.
For example, here is a sample directory structure with my source content ...
|
+- /src (input dir)
|
+- post
| |
| +- my-cool-post
| |
| +- /images
| |
| +- index.md
|
+- index.md
|
+- about.md
When I then run the command npx eleventy
I get the following output ...
|
+- /public (output dir)
|
+- post
| |
| +- my-cool-post
| |
| +- /images
| |
| +- index <---- NOTE there is no ".html" suffix on this file
|
+- index.html <----- this file is ok however
|
+- about.html <----- and so is this file
This is how I have my .eleventy.js
configuration file setup ..
// Data Extensions
const yaml = require("js-yaml");
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("_assets");
eleventyConfig.addWatchTarget("./src/_sass/");
eleventyConfig.addDataExtension("yaml", contents => yaml.safeLoad(contents));
eleventyConfig.setTemplateFormats([
"md",
"css",
"jpg",
"png",
"webp",
"svg",
"html"
]);
return {
jsDataFileSuffix: ".11ty",
dataTemplateEngine: "njk",
htmlTemplateEngine: "njk",
markdownTemplateEngine: "njk",
passthroughFileCopy: true,
dir: {
input: "src",
data: "_data",
includes: "_includes",
layouts: "_layouts",
output: "public"
}
}
}
Without the *.html
suffix the url http://../post/my-cool-post
returns a 404 error. If I manuall add the *.html
suffix then it works.
Any idea what is wrong with my setup?
I figured out the problem. In the example above, there was a file in
/src/post/post.yaml
that had this value:The reason I had this in there was to create an alias
permalink
that I could use in my templates instead of having to type out{{ page.filePathStem }}
. As it turns out,permalink
is a reserved property and clearly has an effect on rendering output. Removing the line form the file fixed the issue.