In the olden days, I had a completely custom site written in classic ASP and kept it up for many years, until social media platforms became my primary outlet for sharing thoughs online. I still built the occasional website for various endeavors, but moved gradually to more ready-made systems like Wordpress and Tumblr. It had been a very long time since I last had a personal website when a few toots on Mastodon inspired me to start blogging again.
This site is built using Eleventy, a very nice little static site generator. I've previously written a post about how and why I ended up using it, but that mostly covers how to get up and running with generic content. This is the first post in a little series outlining the different customizations I've made in order for Eleventy to produce just the result I want.
This is the second post detailing the different customizations I've implemented in Eleventy for this site. In the first post I briefly described setting up code syntax highlighting, which primarily involved installing and configuring an existing plugin. Another tweak I really enjoy is the way links are handled, and for that I had to write some code off my own! I've actually customized both internal and external links, each in different ways, but let's focus on the internal ones first.
I've recently written a couple of posts about the different ways I've customized the Eleventy, the static site generator used for this site. In the previous post I described modifying the HTML rendered by Eleventy to maintain working internal links between Markdown files. This modification makes Eleventy treat local links the way I believe it should by default. Next on my improvement wishlist was addressing the lack of visual distinction between internal and external links in my posts. With my successful link-transformation effort fresh in mind, I immediately set out to add some additional HTML post-processing.
When I moved this blog from Hugo to Eleventy I wanted to set everything up from scratch to be in control. No more massive themes with mysterious features you're afraid to change because you don't know the potential side-effects. That being said, I did look around at different Eleventy starters, like the Eleventy base blog, and took note of a few features to set up myself.
Read full post: Automatic pre-processing of post images in Eleventy
The only thing I didn't like about Eleventy when I started using it was that local Markdown links, like /posts/my-post.md wasn't automatically transformed into their rendered URL counterparts, like /posts/my-post/. Having links pointing to the source files allows you to follow them locally when working with the content, and many Markdown editors can both help autocomplete links as you type as well as highlight any broken ones. For me, however, the most important benefit of working this way is that the content can remain unaware of the output format, so to speak. The less site details there are in the content, the more portable that content will be.
One of the Eleventy customizations I've set up for this site is automatic generation of responsive <picture> tags from images in Markdown posts. I was going to build it myself using the Eleventy Image plugin, but then randomly stumbled upon a plugin for the markdown-it Markdown processor used by Eleventy that did exactly that. It's called markdown-it-eleventy-img and provides the glue needed between the Eleventy Image plugin and the Markdown parsing performed by markdown-it. I wrote a post about this setup back in the day, but that is now obsolete. Starting with version 4.0.0, the Eleventy Image plugin itself performs all the steps needed itself.
Read full post: Automatic image pre-processing in Eleventy, Part 2
Wherever I list posts on this site, e.g. on the Home page and Archive page, I want to display a reasonably long excerpt from the linked post, to give visitors an idea of its content. There seems to be an almost comical variation in what people want from excerpts - how long they should be, whether they should be marked manually or picked out automatically, or entered separately from the content altogether, whether images should be included or not etc. etc. Fun!