6-Month Check-In
It’s been roughly half a year since I struggled my way through the Eleventy conversion (or at least, it was when I started drafting this like two months ago), so I thought it was worth taking a look at the impact it’s had on my workflow since then.
The burning question surely must be: was it all worth it? I think I would say yes. This isn’t a jubilant “YES!” that I will be shouting from the rooftops, forever hassling everybody I meet online that they should implement Eleventy for their site generation needs; it’s more of a “Yeah, I like it enough.”
It’s definitely not a one-size-fits-all solution; if you have a small site that you don’t add new pages to often, or if you really like customizing the look and feel of every page, I can’t imagine you’ll see a lot of benefit from Eleventy. If you’re just starting out with HTML and CSS, you will likely be challenged by its more technical nature (trying to do pretty much anything aside from applying layouts to pages requires a fundamental understanding of Javascript which I just do not have).
If you are regularly adding new pages to your site, which maintains fairly consistent styling throughout, it can be worth considering. Ideally, your site content should be laid out in a straightforward manner, preferably in one giant block that you can just slap a header and footer on. It doesn’t offer a lot of flexibility without coming up with some hacky solutions; really, the best time to start working with Eleventy is before you start creating your site, so that you don’t have to try to adapt Eleventy to what you already have.
With that made clear, let’s talk about the fun things I can do now.
Link Management
This was really one of the big ones I wanted. If I want to add a new page, I have to consider the following items:
- I need to update the table of contents for the corresponding section to link the new page.
- I may need to update the navigation at the bottom of the new page to link to the previous page.
- I may need to update the navigation at the bottom of the previous page to link to the new page.
- I need to update the breadcrumb navigation links at the top of the new page to identify it.
Eleventy can handle this legwork for me. I have to explicity define the site structure as well as give each page a unique date/time so it knows what order to put them in, but the former you only have to do once and the latter is also used for the RSS feed so I don’t mind updating it. I haven’t thought about manually editing these links in months. It’s great.
Markdown Editing
A small benefit, but one I’m using right now as I type this: I can write a page using the simpler Markdown format, and Eleventy will convert it to an HTML page. I can worry less about <p> tags and coding lists. A small but welcome convenience; and if I need greater control over the content, I can still plug HTML into the Markdown file and it works just fine. That also means I don’t have to go back and convert all my old HTML-based content to Markdown (thank god).
Header Updating
One of the other features I was looking for. In fact, I’m using it with this very update. I found out about skip links, an accessibility feature that lets users skip over less-important content (such as the site header). A cool idea, but to use it, I’d need to add the link to the top of every page! Well, no worries, because the header is part of the layout, so I just need to update the layout, re-build the site, and it’s done. The hardest part is re-uploading all my pages!
In addition to this capability, I picked up one other neat trick that you can technically use without any sort of site generator, but I find using Eleventy helps implement it.
Most of us small web creators have, at some point, had to instruct our readers to use Ctrl-F5 to do a hard page refresh so that the browser loads in the new version of the CSS file that we just painstakingly updated to overhaul our site’s visuals. Really takes the wind out of your sails. Turns out, though, that you can trick the browser a little bit. In the header, where you tell the page where your CSS file lives, specify a version number, like so:
<link href="style.css?v=1.01" rel="stylesheet" type="text/css" media="all">If you update the CSS file, increment the number in the ?v=1.01 part. The browser caches the the path to the CSS file, so when it looks at the page it goes “oh, this path doesn’t match the one I already have, better grab the new file”. This path obviously doesn’t exist; but since the version number is an optional parameter, the browser will proceed to disregard it and pull style.css as normal, which is now your updated CSS.
Shortcodes
In my original write-up I mentioned the hacky way I was using Shortcodes to handle putting the page content into the correct sections. That was clearly a solution born of necessity; since then, I’ve found other, saner uses for Shortcodes. If you are at all familiar with programming, you can think of them like functions; you can call them, pass arguments if you need to, and get a corresponding snippet of HTML.
So now, I’ll use Shortcodes just to make my code easier to read. For example, each entry in the list of buttons currently on my Links page uses a single Shortcode to pass the site name, URL, and image URL to generate a table row with the proper image and link tags. Again, I didn’t strictly need to do this, but the HTML code for tables is fatiguing to read on a good day; now, it is so much simpler to work with.
RSS Feed
I know I’ve mentioned this before, but like, man. I love not having to mess with my RSS file. I just upload the new version after I rebuild the site. Not that updating the RSS was hard before, just, you know. One more thing I had to do.
Caveats
Despite having simplified a bunch of areas when it comes to creating an maintaining my content, there are still some things I worry about. Nothing has been detrimental thus far, but here are a couple things that could come back to bite me later.
Complexity
Eleventy has undoubtedly introduced a higher level of complexity to my site maintenance. While day-to-day use is easier, I can already sense that I’m starting to lose my grasp on how the entire setup works—sort of like going back to muddle through old CSS code you haven’t touched in a while. Sometimes, half the challenge is figuring out what your code is doing. So now I just have more of that threat looming over me at all times. You know, no biggie.
Application Updates
I’m, uh, kind of scared to update Eleventy. I know it’s probably fine, but all I need is an update breaking my setup, and having to figure out how to fix it before I can post to my site again. Which won’t be easy, thanks to my previous point—I forget exactly how I got all this to work in the first place.
Maybe some weekend when I’m feeling particularly brave and/or foolhardy I’ll give it a go. May the lord have mercy on my soul.
Final Words
That’s about going to put a cap on this section of the site. This was a fun series to do, but now that I have Eleventy set up the way I like it, I don’t really want to spend a lot more time fussing with it. I just want to get you folks more of… well, whatever it is I actually do around here.
If anything, maybe I’ll go back and touch up some wording in the previous entries; re-reading them now it’s clear I was rushing through them, and I’m not sure they make a whole lot of sense in some places. But perhaps that’s a problem for Memorial Day weekend next year.