Leo

The world’s got a few things going on, and I’ve been tinkering with my website. <a class="footnote" href="#fn-theme" id="fnref-fn-theme" aria-labelledby="title-footnotes">1</a> More specifically, I just migrated off of <a href="https://jekyllrb.com/">jekyll</a> and over to <a href="https://www.11ty.dev/">Eleventy</a>. (Fair warning: this post is entirely too long; even worse, it’ll get very lightly technical. So if <code>How Markdown Files Go Brr</code> isn’t of interest to you — and believe me, I get it — feel free to skip this post.) Truth be told, I didn’t need to change anything about my publishing setup. I’ve been using jekyll for over a decade. It’s lovely software, and I’ve been really happy with it. But in recent years, it’s started to become a bit slow to work with. On top of that, I’ve never been any good with Ruby, the language jekyll’s written in. That means that outside of copying-and-pasting a couple borrowed plugins, I’ve more or less been locked into jekyll’s default feature set. That’s why I started playing with <a href="https://www.11ty.dev/">Eleventy</a>. Eleventy’s a static site generator created by my friend and colleague <a href="https://www.zachleat.com/">Zach Leatherman</a>. I am very late to this particular party, of course: <a href="https://anhvn.com/">tons of</a> <a href="https://markllobrera.com/tags/eleventy/">very</a> <a href="https://henry.codes/writing/how-to-use-contentful-with-eleventy">cool</a> <a href="https://kayserifserif.place/">people</a> have been playing with Eleventy, and doing terrifically exciting things with it. So a few years back, I created a new branch, and started tinkering. As you might know, a few things happened in the interim: there <del>was</del> is <a href="https://ethanmarcotte.com/wrote/let-a-website-be-a-worry-stone/">a global pandemic</a>; I got busy; <a href="https://ethanmarcotte.com/wrote/notes-from-a-week/">I got sick</a>; I got better; <a href="https://ethanmarcotte.com/wrote/you-deserve-a-tech-union-book/">I wrote a book</a>; I got <a href="https://ethanmarcotte.com/wrote/18f/">a new job</a>. That’s all to say that the Eleventy migration stopped, started again, restarted, and then basically…fell apart and languished. But I finally got a little momentum going earlier this year, and just pushed the changes live last night. Overall, the migration went really well. I did stumble on a few things, though: <ul> <li> jekyll makes a bunch of really handy <a href="https://jekyllrb.com/docs/variables/#global-variables">global variables</a> available to site owners, nestling key pieces of data underneath objects like <code>site.</code>, <code>page.</code>, <code>layout.*</code>, and so on. There’s a mental model at play there, and it made a lot of sense to me. By contrast, Eleventy doesn’t have a similar structure. And honestly, that’s mostly fine! But when I was first starting to tinker, it did make Eleventy feel a lot…well, fuzzier than jekyll did. </li> <li> I used <a href="https://jekyllrb.com/docs/liquid/tags/#link">jekyll’s proprietary <code>{% link %}</code> tag</a> to link to, like, everything on my site. It is an incredibly handy way to link to arbitrary files, and finding an Eleventy equivalent was <a href="https://github.com/11ty/eleventy/issues/544">one of the first things I asked about</a>. I was never happy with any of my custom solutions, so when I found out about <a href="https://www.11ty.dev/docs/filters/inputpath-to-url/">the new <code>inputPathToUrl</code> filter</a> in the Eleventy 3 alpha, I upgraded with a quickness. And it’s been great. <a class="footnote" href="#fn-alpha" id="fnref-fn-alpha" aria-labelledby="title-footnotes">2</a> </li> <li> If there’s a better way to debug issues in Eleventy, I’d love to learn it. Errors can often result in <a href="https://blog.thecodewhisperer.com/permalink/deciphering-an-11ty-error-message">an intimidating pile of warnings in the console</a>, and <a href="https://www.11ty.dev/docs/filters/log/">adding <code>log</code> filters</a> everywhere usually didn’t feel productive. </li> <li> About a week ago, I noticed that nearly all of my post dates were wrong: if I’d written a post on February 10, the post would appear on my website with a timestamp of February 9. After hours of frustrated research, I learned that <a href="https://www.11ty.dev/docs/dates/#dates-off-by-one-day">this is by design</a>, and is even listed as <a href="https://www.11ty.dev/docs/pitfalls/">a common pitfall</a> for those using Eleventy the first time. Thanks to <a href="https://mtm.dev/eleventy-date-off-by-one-day">a few</a> <a href="https://www.justus.ws/tech/eleventy-utc-dates/">very helpful</a> <a href="https://rknight.me/blog/eleventy-post-dates/">blog entries</a>, I managed to get a solution in place. <a class="footnote" href="#fn-dates" id="fnref-fn-dates" aria-labelledby="title-footnotes">3</a> But man, I wasn’t expecting this little curveball, and I could see other folks getting tripped up by it too. </li> <li> Related to that — and this might just be me, mind — I had some difficulty navigating <a href="https://www.11ty.dev/docs/">Eleventy’s documentation</a>. When other people wrote about an issue with Eleventy, they’d often link to something in the docs that would get me unstuck. And generally, I found that was a theme with my migration: I’d start by searching the internet for guidance on an issue, rather than the Eleventy documentation itself. </li> </ul> I don’t want to suggest that my experience was bumpy, mind you — far from it! Overall, I am delighted by how easy it was to move a decade’s worth of material over to Eleventy. And now that I’ve moved things over, here are some of the things I’m most excited about: <ol> <li>It’s fast. My jekyll site wasn’t exactly slow, but it was definitely starting to feel creaky. By comparison, Eleventy has been downright zippy.</li> <li>Eleventy feels like a playground. Eleventy just seems really, really good at ingesting random data from around the web, and pulling it into a website. I get excited when I read about <a href="https://markllobrera.com/posts/letterboxd-to-markdown/">my friend Mark’s ability to pull Letterboxd reviews into Eleventy</a>, <a href="https://coryd.dev/posts/2024/integrating-a-somewhat-custom-cms-with-eleventy/">the feature Cory built to publish his music listening stats on his blog</a>, or <a href="https://melanie-richards.com/blog/new-reading-page/">Melanie’s fancy new reading page on her (gorgeous) website</a>. Honestly, I can’t wait to start tinkering myself.</li> <li>I feel like I have a blog I can extend. Related to that, I’m glad I have a site that’s built on technology I’m a little familiar with. As previously mentioned, I am completely useless when it comes to Ruby; while I’m no JavaScript expert, I’m very comfortable with it. And that’s something of a relief.</li> <li>Eleventy is powered by its community. I’ve known <a href="https://www.zachleat.com/">Zach Leatherman</a> for years, and I’ve always admired the way he’s cultivated a community around Eleventy. I’m doubly excited that there’s <a href="https://www.11ty.dev/blog/sustainability-fundraising/">an active push to make Eleventy financially self-sustaining</a>, moving the platform to a point where it’s supported by donations from its community. That kind of support makes me hopeful for the platform’s future.</li> </ol> Anyway! I’m delighted to have hit this little milestone, and to be on a platform that feels exciting and sustainable. Of course, if I’ve done my job right, you won’t notice any changes. Not until the redesign’s done, anyway. <a class="footnote" href="#fn-redesign" id="fnref-fn-redesign" aria-labelledby="title-footnotes">4</a> But of course, if you do see anything amiss: please <a href="https://ethanmarcotte.com/contact/">drop me a line</a>, and I’ll get things sorted straightaway. As always, thank you for reading. <hr /> <div class="footnotes flow"> <h2 class="hed-footnotes has-dash" id="title-footnotes">Footnotes</h2> <ol><li id="fn-theme" class="footnote-item">Yes, this is <a href="https://ethanmarcotte.com/wrote/thread/">becoming a bit of a running theme</a>. <a href="#fnref-fn-theme" class="reversefootnote">↩︎</a> </li> <li id="fn-alpha" class="footnote-item"><del>I should note that when I switched from version 2 to version 3’s current alpha, my build times nearly doubled. But since we’re talking about a change of, like, three seconds to five seconds, and since Eleventy 3 is still in alpha, I have absolutely no problems whatsoever with this.</del> Thanks to a recommendation from a friend, I upgraded to <a href="https://github.com/11ty/eleventy/releases/tag/v3.0.0-alpha.15">a later alpha of Eleventy 3</a>, and that cleaned things right up. I’m back down to two second builds! Yay! <a href="#fnref-fn-alpha" class="reversefootnote">↩︎</a> </li> <li id="fn-dates" class="footnote-item">Namely, figuring out enough of <a href="https://momentjs.com/">Moment.js</a> to write some little date formatters. <a href="#fnref-fn-dates" class="reversefootnote">↩︎</a> </li> <li id="fn-redesign" class="footnote-item">Yep, I’m working on a redesign — and I’m actually pretty excited about it! (And yes, it’ll probably be here in another geological era or two.) <a href="#fnref-fn-redesign" class="reversefootnote">↩︎</a> </li> </ol> </div>

<hr /> This has been “<a href="https://ethanmarcotte.com/wrote/eleventy/">This site goes up to Eleventy.</a>” a post from <a href="https://ethanmarcotte.com/wrote/">Ethan’s journal.</a> <a href="mailto:listener+rss@ethanmarcotte.com?subject=Reply%20to:%20“This site goes up to Eleventy.”">Reply via email</a>