// Personal website of Chris Smith

Eleventy » Deploy assets in page bundles

If you keep assets alongside the content they’re used in (what Hugo calls “page bundles”), you can use a rename filter on addPassthroughCopy to deploy them into the right place, respecting permalinks:

const fs = require('fs');
const path = require('path');
const matter = require("gray-matter");

const rename = function (original) {
    // See if there's an index.md alongside the asset, if so figure out the permalink and put the file there.
    // This emulates Hugo's "page bundles" behaviour.
    const content = path.join(path.dirname(original), 'index.md');
    if (fs.existsSync(content)) {
        const data = matter(fs.readFileSync(content)).data;
        if (data && data.permalink) {
            return path.join(data.permalink, path.basename(original));
        }
    }
    return original;
};

module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy(".", {
        filter: [
            "content/**/*.jpg",
            "content/**/*.webp",
            // etc
        ],
        rename,
    });
};