More 11ty Stuff
Preface: This is a bunch of "nerdy blog stuff" as I like to call it. If you're not interested, that's OK! But I hope that maybe you are, a little bit.
I've done a lot of playing around with 11ty in the past few days. I talked about it a little bit on Mastodon but I felt that it's worth expanding in case it helps someone else playing around with the platform or just starting out.
If you didn't know, I built my personal website using 11ty. I built it from (relative) scratch following 11ty's Getting Started Guide. This served me fairly well, and I got going somewhat slowly, with an OK level of understanding. I followed along with what the guide was getting me to do, and I borrowed a lot from other sources. The result is a website that is sort of "frankensteined" - don't look under the hood too deeply, it's a bit ugly. I'm not exaggerating - it took me months to put this together.
Eventually I added a blog of sorts in the form of week notes, complete with RSS feed. This was intended as a sort of testing ground to see if I wanted to incorporate a full blog1. I'll come back to this in a little bit.
Fast forward to October 2024; I decided I wanted to start a photo blog. I searched around for some 11ty templates but wasn't satisfied with them - either they were too complicated, or they weren't very flexible - so I decided to build from scratch. I used Flamed Fury's guide and built completely from scratch. I won't go through the entire details - I talked about it more in-depth here: https://lwgrs.bearblog.dev/excited/
Building the site this way meant a deeper understanding of how 11ty works. Instead of taking a template, or adding things in case I need them later I built things up as I went - that's why I included a changelog for the site so that I could keep track of what I was doing. As I was setting everything up, one of the key things I did was to set up a basic URL structure:
https://photos.srgower.com/YYYY/post-title/
I did this with this code in the file blog.json:
"permalink": "/{{ date | justYear }}/{{ title | slugify }}/"
(The justYear function is defined in .eleventy.js - basically it grabs the date from the post and pulls out the 4 digit year.)
The result is something like this:
https://photos.srgower.com/2024/droning-on/
This is especially helpful since I'm actually naming files 010-droning-on.md and filing them in separate folders, none of which actually translates to the publicly displayed URL. As a future addition to the site I would like to group posts by year - but I have to do more research on that.
But this was something important for me to figure out. Back to my week notes: I've been assigning URLs as /weeknotes-##/; this is not ideal, because it prevents me from restarting at Week 1 for 2025. I realized this was a problem a while ago, but it became more pressing as we get closer to the end of the year.
Now that I knew how to set up the permalink in a structure however I saw fit, I changed things up for my week notes. Now, the URL will be /YYYY/weeknotes-##/. But what about the notes I already published? The way that it's set up in 11ty, it applies that permalink to ALL posts, including the previous posts. I didn't want to break any old links, so I added an extra line of code to the YAML frontmatter:
permalink: /weeknotes-31/
This overrides the template permalink, so now when you go to my latest week note - Weeknotes 31 - but when I post my next set it will be /2024/weeknotes-32/. This is such a minor thing but it made me really excited that I figured out this little change. This means that I'll be able to do something similar to the photo blog - organize posts by year. Hmm, I need to get on that.
The other exciting thing that I just finished today - adding tags to the photo blog. You know, like what you add to your own Bear Blog. This post's tag is project (among others). I added them in iterative steps: first, simply adding the tags to the frontmatter, and displaying them within the post. That was easy.
Then I streamlined them on the back-end (I won't bother with the details this time), to make it easier for me to write up new posts. That was yesterday. This morning I spent a couple of hours figuring out pagination, which helps create pages from collections. There was an extra step to automatically create new pages for tags instead of having to create them manually. Then a little bit of extra research to figure out how to make a page to collect all the tags, and presto! I have tags now for my photos.
I'm just really glad that I decided to build the site this way. Yes, it means that not every feature is ready to go "out of the box" so to speak, but I don't mind. The way that 11ty is built means that I can add things to posts in bulk and I don't have to go back and edit them one-at-a-time, so it's super easy to add these things in iterations.
Plus, learning things as I go to add them makes it easier for me to make more complicated additions down the line. I have a few things up next that aren't directly related to 11ty2, but I think they'll integrate fine with my setup.
Reply by email Share this post
Or if you prefer, find me on Mastodon.