Site design notes

These notes are for (what I think is about) version 4 of the site, redesigned over winter-spring 2023 in response to both a feeling that the site was getting a bit stale for me, my thoughts on digital gardens and their place in distributed/indie web, and inspiration from (specifically) the websites of Robin Sloan and Jacky Zhao. As with all this kind of thing, actual inspiration extends beyond quoted sources.

Technology

I had a play around with hugo to run this thing and I gotta say it beats the pants off of nanoc for speed. Kind of a no-brainer comparing a compiled language to an interpreted one, but it’s still worth saying. However, nanoc has this amazing customisability that’s just lacking a bit in hugo - there’s stuff that I want to do in hugo which I just can’t, or at least, I can’t work out how to do it with my limited hugo/go knowledge.

Because the kind of person reading this kind of article will want to know, here’s some things that I found difficult to do in hugo:

• custom markup (beyond shortcodes)
• per-section/per-page categorisation or preprocessing.

The main thing that caught me was custom markup. In particular, I’m using a kind of wiki-style markup ([[link goes here]]) to link between pages in this digital garden, and the ability to run my own markup processing should also allow for some fun stuff in the future as well. I know hugo has shortcodes, and I’m hoping to add something shortcode-esque into my nanoc setup. But that just didn’t have the flexibility I enjoy in keeping my own blog/website. So hugo is back into the bin.

Why nanoc over other, just-as-customisable non-nanoc equivalents? Two main reasons. First, picking nanoc over hugo is my admission that what I value in my website engine is flexibility over speed. I’m sure it’d be different if I were maintaining a website ten times this size, but I can deal with a few seconds lost to rendering. Second, nanoc does everything I need it to, and if it doesn’t do the thing, I can probably take off the hood and tinker around with the ruby code underlying it. I’m just used to nanoc in a way I’m not used to other SSG blogging/website engines.

Structure and content

What’s in, and what’s out.

1klb is always a highly-opinionated mess of pages and collections - standard blog format and posts, some random experiments I can host in plain html and javascript, lists of projects, bits of writing, stuff I need to host somewhere on the internet and this place is as good as any. But a revamp like this - especially one that touches the structure of the website - is a great chance to do a bit of a spring clean. So here’s what’s changed.

• Removing random bits of the site. Especially bits that don’t really gel with anything else. Goodbye projects directory, goodbye custom-layout writing index, goodbye that “whiteboard” section that I really only used for posting drafts of random crap to.
• Simplifying tags. Originally I had a whole system where page tags were categorised up into one of a few base categories, which then fed into different RSS feeds…that’s all gone. Tags have no heirarchy, and this system will stop complaining when I create new ones.
• Hello garden! The big change - I now have a whole section of the site dedicated to a digital garden - effectively a combination working notes/wiki/non-timebound blog which sites alongside the blog. Hopefully this should help me organise content over time into thematic groups, produce content which doesn’t just drop into the archive and get forgotten, etc. Also, a bunch of random stuff that previously had its own section can now be migrated to the garden and live free-range alongside all the other crap in here.

At some point I need to write something about time-bound versus non-time-bound content which will hopefully aggregate some links and also lay out some vaguely half-original thoughts?

Layout and style

The ol’ three-column layout feels good to me, so I’m keeping it. I still like the general theme of the site, but I’ve done some under-the-hood improvements, including removing my reliance on sass, since native CSS now includes variables and nested declarations. I technically do a little preprocessing to join a bunch of CSS files together, but that happens through a nice little custom filter built into nanoc.

One big change for this release is the addition of dark mode. Everyone loves dark mode, right? Everyone also loves it when sites remember your preferences, so this site will do exactly that through localStorage. Heaps more on dark mode websites through CSS-tricks, which I don’t think I used for reference for a lot of this, but I probably should have.