Eleventy: How to change output directory of some input subdirectory?

[Leimi]

Hi and thanks for 11ty :) I'm slowly getting into it since yesterday. I come from metalsmith which allows basically total control of output, at the cost of basically total configuration haha.

My question is: is it possible to match a directoy inside our input directory to another directory when generated in _site? Kinda like the possibility to do this for passthrough copy, but for processed files.

My use case is, I have a content folder inside my input, and I want to define in one place that content is generated in _site instead of _site/content.

I tried to define stuff via the eleventy config, via global data files, directory-specific data files… without luck for now. So I didn't find any way to do this but maybe I'm wrong? Thanks for your help!

---

_Here are a few more details:_

I want my project's directory structure to totally put apart "content files" and other ones. But I still want some "non-content files" to be processed via 11ty, so I don't want them in the content folder.
Kinda like this:

.
├── _build
│   └── css.11ty.js
      # ^ this uses _includes/css/style.css and generates _site/css/style.css
      # via 11ty processing and custom permalink
      # (same principle as in https://github.com/philhawksworth/eleventyone)
├── content
│   ├── articles
│   │   └── hello-world.md
│   └── index.njk
├── _data
└── _includes
    ├── css
    │   ├── _article.css
    │   ├── _breadcrumbs.css
    │   └── style.css
    ├── js # this is copied in _site as is via passthrough copy
    │   └── script.js
    └── templates
        ├── layouts
        │   ├── article.njk
        │   └── base.njk
        └── breadcrumbs.njk

The eleventy config matching this for now is:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy({"_includes/js": "js"});
  return {
    templateFormats: ["md", "njk", "11ty.js"],
    dir: {
      input: ".",
      includes: "_includes",
      data: "../_data",
      output: "_site",
    }
  }
};

Eleventy generates a _site folder like this:

_site
├── content
│   ├── articles
│   │   └── hello-world
│   │       └── index.html
│   └── index.html
├── css
│   └── style.css # via the processing of _build/css.11ty.js that sets its own permalink
└── js
    └── script.js # via passthrough copy

But I want this:

_site
├── articles
│   └── hello-world
│       └── index.html
├── css
│   └── style.css
├── js
│   └── script.js
└── index.html

[Leimi]

My "solution" for now is to set content as my input and create a symlink of external folders in it, like this:

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy({"_includes/js": "js"});
  return {
    templateFormats: ["md", "njk", "11ty.js"],
    dir: {
      input: "content",
      includes: "../_includes",
      data: "../_data",
      output: "_site",
    }
  }
};

.
├── _build
├── content
│   ├── .do-not-touch
│   │   └── _build -> ../../_build
│   ├── articles
│   │   └── hello-world.md
│   └── index.njk
├── _data
└── _includes

Knowing that the files in _build set their own permalink manually, it works great.

I'd be happy if there was a cleaner way to do this :)

[araphiel]

Jekyll may be good inspiration on this one.

In it's config, you can set permalinks for specific collections like so:

collections:
  pages:
    output: true
    permalink: /:path
  implementation:
    output: true
    permalink: /:collection/:path/

A pass-through for processed files sounds like a great idea.

[AlbertVilaCalvo]

You can do this with permalinks: https://www.11ty.dev/docs/permalinks/

Eg if you have this:

├── articles
│   ├── article-1.md
│   ├── article-2.md

By default you get:

├── _site
│   ├── articles
│   │   ├── article-1/index.html
│   │   ├── article-2/index.html

To change the default output /articles/article-i/index.html to just /article-i/index.html, like this:

├── _site
│   ├── article-1/index.md
│   ├── article-2/index.md

Add a file articles.json inside the articles folder that changes the permalink:

{
  "permalink": "{{ page.fileSlug }}/index.html",

  "layout": "layouts/article.njk", <-- optional
  "tags": ["articles"],            <-- optional
}

That's all!

Here you have the list of the page variable contents (in case you want to use something else than fileSlug): https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable-contentshttps://www.11ty.dev/docs/data-eleventy-supplied/#page-variable-contents

[nlopin]

The solution from @AlbertVilaCalvo is correct, but works only for folders one level deep, like in the example provided.

If you have deeper folder tree and want to move it up to the tree by dropping one folder, page.fileSlug won't work for you because it return only the slug of the file, not the whole path. The solution is to use page.filePathStem and remove nondesired paths from it.

If you have this folder stucture:

├── content
│   ├── articles
│   │   └── hello-world.md
│   └── index.njk

And want instead of this:

├── content
│   ├── articles
│   │   └── hello-world
│   │       └── index.html
│   └── index.html

to have this:

├── articles
│   └── hello-world
│       └── index.html

Add a file content.json to the content folder with this content:

{
  "permalink": "{{ page.filePathStem | dropContentFolder }}/index.html"
}

And you have to write the dropContentFolder filter that recieves the full path to the current file and removes /content from it. The quick and dirty implementation can be (in .eleventy.js):

    config.addFilter("dropContentFolder" function (path) {
      const pathToDrop = "/content"
      if (path.indexOf(pathToDrop) !== 0) {
        return path
      }

      return path.slice(pathToDrop.length)
    })