How to make eleventy include assets such as CSS and images in the output?

Question

I'm trying out the eleventy static site generator for the first time. Whenever I build, the content files are generated just fine, but none of the assets (CSS, JS, images, etc.) end up in the output directory - all that appears is the HTML, with broken links to the assets.

For now I'm using the default directory structure:

• project/
  • _includes/
  • _site/
  • css/
  • index.html
  • node_modules/
  • package-lock.json
  • package.json

I've tried building it just like it is above, and I've tried putting the css in the _includes directory. I also tried putting the css in the output folder (_site/), and that worked, but it seems wrong to have to edit a source file in the output.

I've searched around, but none of the tutorials I've found ever address things like including CSS.

Is there a proper way to go about this that I'm missing, or are you really supposed to edit files in both the source and the output?

Cathartic

Answer 1

The solution was to use passthrough file copy. I hadn't looked into that before because, as a beginner, it seemed like an advanced topic, and I figured something as basic as getting your CSS into the output directory should be some simple setting that's turned on by default. It is simple once you know how to do it, but it's not a default for some reason.

Here's the code that fixed my problem. "_src/assets" is the folder holding all the CSS and images, relative to the project root.

module.exports = function(eleventyConfig) {

    eleventyConfig.addPassthroughCopy("_src/assets");

    return {
        dir: {
            includes: "_templates",
            input: "_src",
            output: "_site"
        }
    };

};

Cathartic