Eleventy Rebuild

Today was 11ty’s International Symposium on Making Web Sites Real Good and after watching some rather inspirational talks and seeing others who share similar values of building closer to "bare metal" for the web, I've decided, to yet again rebuild this website. With 11ty of course.

So far, its been made in Gatsby, the last public version. Then again in Next.js, which I lost steam on halfway and never saw daylight. Then yet again in Svelte which I actually did complete. But I also decided needed a new design for a new framework upon completion and never let it see the light of day.

I'm pretty excited about this rebuild though. I was able to get further along in setting up the bones of this rather simple site in about half the time. I suppose it helps that I'm now more familiar with how SSGs work and the specifics can be found in the docs.

I also wanted to keep this close to the code languages of the web (and what browsers actually parse) so that I could; A, try out the latest CSS and Web APIs, and B, be as far removed from my day job stack of React, Typescript, utilities and abstractions built up over years and millions of commits. This is a simple site, I should be able to just "code it by hand". I suppose thats the thesis here, and the next little while will prove it out.

Some things I learnt today

• If you want to keep all your source files in one directory and specifically name the output, you need specify this in the .eleventy.js file:

module.exports = function (eleventyConfig) {
    return {
        dir: {
            input: "src",
            output: "_site",
        },
    };
};

• When referencing some asset (image, font, etc) you need to configure 11ty to copy it over to the output directory by using eleventyConfig.addPassthroughCopy(FONT_DIR); the .eleventy.js file
• To get code completions for the config file you need to place /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */ before the function export
• Blog sort order "just works"™️ using the date frontmatter key. Even nicer, the "reversed" keyword can be added to the end of the for loop listing your posts to make them reverse chronological

Next is the hard part. Sticking to my design and not scope creeping myself.