New site part 1 - basic setup

Posted on 25 September, 2023

Part of a series about setting up the new 11ty version of this site

To get things started, a short post on how I set up my folder structure (and a little config to make it work properly).

(I'll build on the config file in later posts!)

Folder structure

My personal preference is to order things as follows:

With this structure:

• All my site-specific files, other than the config, and related utilities, sit in src/
• I provide the 11ty-default _data/ and _includes/ folders
• All my styling is in css/
• All my images are stripped out into an images/ folder, with the exception of favicons which I put in a folder inside _includes/
• Individual pages, included generated pages, sit in the pages/ folder; to make this work I have to specify a permalink for each of them (otherwise there would be no /index.html for instance). I do this to keep my src/ folder clean, it's a matter of personal preferences
• Each blog post sits in posts/ (more on that another time)
• Lastly I have a utils/ folder; this is where I put the code for my filters, shortcodes and the like to keep my config file organised (hat tip to Lene Saile and her talk at 11ty Meetup 12)

Starter config

To make this work we need some very basic configuration (there's going to be a lot more of this, worry not):

// eleventy.js

module.exports = function(eleventyConfig) {

    // copy from src/_includes/favicons to the root output folder
    eleventyConfig.addPassthroughCopy({ "src/_includes/favicons": "." });

    // set the input directory as src/
    return {
        dir: {
            input: "src",
            output: "_site"
        }
    }
}

Posted in 11ty, code

You can find me at