Eleventy is not adding an html suffix to index files generated from a nested index.md file

317 views Asked by At

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?

1

There are 1 answers

0
ra9r On

I figured out the problem. In the example above, there was a file in /src/post/post.yaml that had this value:

permalink: "{{ page.filePathStem }}"

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.