Eleventy from almost scratch

Whenever I first set up this latest iteration of my blog, I chose 11ty as the backbone. It was simple and static. I just wanted to write Markdown and have control over my HTML. I didn’t need a database. I wanted the site to be fast. And it was JavaScript, so I felt very comfortable with it.

I started with the eleventy-high-performance-blog template. It optimized a bunch of stuff for me. Things I might not even need (I had no intention of having images on my site)! As time went on, 11ty updated and that template did not. What were the best practices and patterns now in 11ty version three? How easy would it be to upgrade?

In upgrading to version three, and born out of an itch to simplify my site further, I decided to start completely over. Instead of prematurely optimizing my blog for problems I don’t have, I decided to start with eleventy-base-blog, seeing as it is maintained by Zach Leatherman himself and kept up to date with the latest versions of 11ty.

I created a branch in my site’s repo and blew everything away (minus the blog posts). From there, I made a few changes before merging and publishing. Namely, I:

• updated the readableDate filter to the format I prefer,
• modified the postlists collection to group by year,
• removed nearly all the CSS,
• removed all class names from the markup,
• changed the slug to remove the year,
• added an external link icon,
• used the same custom Prism theme I already had, and
• added markdown-it for footnote support.

Not all of those are interesting or complicated enough to be worth diving into. Heck, even the ones I am going to talk about more probably aren’t that interesting. But here we go.

The CSS stuff

The CSS on my site felt bloated. There wasn’t that much there, but it was almost 900 lines before getting to the Prisma theme I made based on Oceanic Next (the best color scheme for code ever). Inspired by working on a CUBE CSS implementation at work and taking Andy Bell’s Complete CSS course, I decided to start my CSS over from nothing. You’re seeing that now (if you’re reading this when this was originally posted and for a few weeks after). I want to really be considerate and methodical in how I write my CSS here and everywhere. I’ll be taking it slow and documenting the choices I make in this blog.

I’ll go over the contents of this first CSS file in a upcoming post.

Adding an external link icon

I created functionality where I can have link posts, like you would see on Daring Fireball or Adactio. I would post a link with a very small amount of commentary. In the single post template, the title would be a link to the original post. But how do you represent that on your posts list? I want to have a link to my post page, plus a way to get directly to the link. I created a separate link with an external link icon. I brought that over, including the icon. Right now it’s a Nunjuck’s file that is just an SVG, which I include on the postslist template. There’s probably a better way of handling this, will have to think about it more.

Adding Markdown footnote support

Like the external link post functionality, I needed to add in support for Markdown footnotes because some of my old posts have those. There’s nothing much special about this, it means using the setLibrary method and adding the footnote plugin. I customized some of the footnote templates: I removed the default brackets around the inline footnote, removed the hr before the footnote block, and added aria-labels to the links to make them more descriptive.

Well, there it is

It’s really not that exciting. It’s very barebones now, but with the minimal CSS I’ve added, it doesn’t look bad. It might entice me to keep it like this longer. But probably not. I’ve been holding off working on the CSS because I wanted to write and publish this post first.