This weblog makes use of static website generator Eleventy (or 11ty. I don’t know which one is the “official” spelling, and the docs seem to thrill in switching gratuitously between the 2! Let’s go along with “Eleventy” for now.) below the hood. I like Eleventy as a result of it permits me to jot down weblog posts in markdown and use Nunjucks for templates, which get constructed into HTML file on deployment and served as static information, so it’s good and light-weight on the shopper facet. I even have an Eleventy starter challenge that’s been long-overdue for some upkeep. I lately made a couple of updates, so I believed I’d notice them down right here.
Out of the field, Eleventy doesn’t apply any form of bundling or optimisation to your CSS and JS information — it’s as much as you, the developer to bundle these if you want. Now, maybe you don’t want any form of bundling of these information. It’s completely positive to serve up uncooked CSS and JS for a small challenge, and the Eleventy docs clarify how to try this. To be sincere, we may in all probability get away with that for this weblog: even of their unoptimised type, the CSS and JS information would probably be smaller that these of most web sites. However I needed my starter challenge to be scaleable. I’ve been utilizing Parcel to bundle CSS and JS information, however I knew I may make some enhancements to streamline the construct course of.
What’s modified?
Sass variables to CSS
CSS customized properties are extra versatile than Sass variables, as they are often modified in several contexts. The place attainable, I desire to make use of vanilla CSS options (once they’re well-supported). Finally I’d prefer to take away reliance on Sass solely, and this is step one in the direction of that.
Fluid sort and spacing with Utopia
I’ve added customized properties for fluid typography and spacing utilizing Utopia, considered one of my favorite instruments that I discover indispensable for working with fashionable CSS. These variables might be configured initially of a challenge, and permit you to use values for padding, margins and typography that scale with the viewport — and even the container.
SVG sprite
Icons reference an SVG sprite as a separate file, reasonably than the sprite being inserted into the HTML of the web page.
Simplified construct course of
I’ve upgraded to the newest Eleventy model, and as a substitute of spinning up Browsersync I’m utilizing the Eleventy dev server to observe template information and reload. As Stephanie notes:
…the default server is way quicker and lighter and doesn’t require loading any JS throughout watch and serve native dev.
As a result of I’m utilizing Parcel to bundle CSS and JS information, I simply wanted so as to add the supply information as watch targets for Eleventy (in .eleventy.js), in order that any modifications to these will set off a reload too.
module.exports = operate (eleventyConfig) {
eleventyConfig.addWatchTarget('./src/css/')
eleventyConfig.addWatchTarget('./src/js/')
}I’ve additionally simplified issues by benefiting from Eleventy’s addPassthroughCopy, which copies information or directories over to the deploy folder, as a substitute of utilizing Node to do that (as was the case within the earlier model).
Blocking bots with robots.txt
I’ve added a robots.txt file that’s copied over to the output listing at construct time. It has a couple of guidelines for blocking some recognized AI consumer brokers so (theoretically) the positioning can’t be used to coach AI giant language and diffusion fashions.
What’s stayed the identical?
Sass
The challenge nonetheless makes use of Sass, and Parcel makes it very easy to rework Sass to CSS with its transformer plugin. The principle purpose I’m nonetheless utilizing Sass is for breakpoint variables (which aren’t attainable with CSS) and nesting, which solely grew to become universally supported in vanilla CSS very lately. In a future iteration I’ll in all probability convert the entire challenge to vanilla CSS and cast off Sass solely.
In the event you needed to make use of the starter challenge with simply vanilla CSS, you can swap out the Sass file for a CSS file (ensuring to replace the file path in format.njk, and the supply file in bundle.json).
Cache-busting
CSS and JS filenames are hashed on construct utilizing a Node script. Somebody has made an Eleventy plugin for this which I assume I may implement as a substitute, however my very own code appears to work simply positive, and it’s good to not fear about an additional dependency.
Points
You now have to run two instructions to run the challenge domestically, with a view to run the Eleventy dev server and have Parcel watch CSS and JS information. I modified this as a result of I used to be having a repeated subject the place Eleventy wouldn’t reply the CTRL + C within the terminal and would proceed to run. I assumed it was one thing to do with operating Parcel on the identical time, however actually it nonetheless occurs once I run Eleventy about 50% of the time. No concept why, I believe it may be one thing to do with my Node setting.
Anyway, that’s my solely gripe. I’m fairly pleased with my setup!
