\( \newcommand{\R}{\mathbb{R}} \global\newcommand{\R}{\mathbb{R}} \global\newcommand{\Z}{\mathbb{Z}} \global\newcommand{\Aut}{\text{Aut}} \global\newcommand{\id}{\text{id}} \)

digital gardens

#meta #web
中 (in-progress) / tended February 25 2025 / planted February 17 2025

I don’t remember exactly when it was that I stumbled upon gwern.net, perhaps high school or early college. It’s tempting to make the comparison to Alice tumbling down a rabbit hole, but my hazy recollection is that I found the content less interesting than the shape and form of the website itself. Less of a rabbit hole and more of a garden, albeit one somewhat mysterious in its monochromatic darkness. To find a hypertext garden in the age of Facebook’s explosive popularity felt like a breath of fresh air.

Now, many years later, I find myself drawn again to the concept, with an urge to start tending to a garden of my own. It’s hard to say why… an interest in small-scale digital spaces in a time of big tech monopolization and climate breakdown, perhaps? Or maybe just the need to separate from the thoughtless doomscrolling and actually engage critically with the ideas in my head? A less alienating way to sustain a digital presence?

This note explores digital gardening in the hopes of developing my own approach.

what is a digital garden?

garden vs. stream

Mike Caulfield argues that today (note that this was written in 2015) the internet is dominated by the “stream”:

The “conversational web”. A web obsessed with arguing points. A web seen as a tool for self-expression rather than a tool for thought. A web where you weld information and data into your arguments so that it can never be repurposed against you. The web not as a reconfigurable model of understanding but of sealed shut presentations.

In the stream, information comes and goes, and is forgotten or tossed aside as is convenient. The garden, however, accumulates.

The way we access information in the garden is fundamentally different as well. There need not be a clear ordering on the pages – unlike in a blog or a feed, timestamps are less important than the completion state of a note. Was the thought just planted? Or is it an old one, tended to regularly, and quite stable? This makes the garden immediately interesting to explore, allowing for visitors to wander along their own paths, following links at their lesiure.

Given the garden’s inherently unordered, non-hierarchical nature, how do we expect to find a particular thought? A system of tags and categories might be a first-order solution. Does it even make sense to have search functionality?

public learning, continuous growth

Maggie Appleton points out aspects of digital gardening that I find particularly interesting: learning in public, and continuous growth.

Gardens are imperfect by design. They don’t hide their rough edges or claim to be a permanent source of truth. Putting anything imperfect and half-written on an “official website” may feel strange. [We seem to reserve all our imperfect declarations and poorly-worded announcements for platforms that other people own and control.] We have all been trained to behave like tiny, performative corporations when it comes to presenting ourselves in digital space.

Learning in public helps dispel both the myth of my expertise (in the off-chance that it existed to begin with) as well as the myth of knowledge being settled. For instance, while we might present a fact as settled, it may continue to produce new and interesting connections to other thoughts long afterwards. So although I’m not necessarily sold on the idea of associating to each thought an epistemic status (I don’t have the confidence for that), I do like the idea of categorizing thoughts as seeds/buds/evergreen according to how solid their shape appears to me. Perhaps I’d even prefer an analogy with the weather: foggy (🌫) / taking shape (🌤) / clear (☼). Understanding changes – it may clear up for a moment, only to be hit by unexpected stormy weather.

playful and personal

A blog feels formal and rigid – I’d better get things right the first time around, otherwise risk being wrong on the internet. There’s no room to be a normal human being. As Appleton puts it,

Putting anything imperfect and half-written on an “official website” may feel strange. We have all been trained to behave like tiny, performative corporations when it comes to presenting ourselves in digital space.

The hope is that a garden can be explorative and tentative. Maybe even a bit playful, though I’m not sure I have any of the writing chops necessary to express that over text.

Appleton points out that the medium of html+css itself is a potential avenue of exploration and experimentation. A bit of interior (exterior?) design, done digital. I do think it makes sense to keep things as simple and straightforward – static site, javascript to a minimum, accessible and performant – as possible, but maybe it’s worth adding: no simpler. Even a zen garden in its simplicity has its distinct style. I think this will take some time to learn and discover.

ownership and freedom

100 Rabbits build software along a few simple rules that I find useful to keep in mind for my projects, and are especially relevant to choosing the tooling for a digital garden.

offline first

Gardening should be possible entirely offline.

past-proofing

Prefer plaintext tools whenever possible. Use Javascript and CSS sparingly. Keep images small. Consider principles of low-tech web design.

freedom

Content and history should be accessible to visitors through version control software. Care about accessibility (carefully written alt-text, simple navigation, good contrast…). Oppose oppression in all forms, e.g. free as in Palestine. Garden towards a better future: another world is possible.

my gardening tools

High level overview: org-mode + ox-hugo + hugo.

colors

At the moment I’m just using bits and pieces of the modus-vivendi palette – a dark theme with high legibility – with minor modifications. I’m still learning about accessibility, so I thought it’d be best to just start with a set of colors that work well together and are high-contrast. The same goes for the code syntax highlighting.

I’ve marked external links with a slightly subtle dotted underline, with internal links kept solid. I find this a little less visually distracting that :after arrow symbols. The css selector is above my paygrade and lifted from stackoverflow:

 1div#content.garden a[href]:not(:where(
 2  /* exclude hash only links */
 3  [href^="#"],
 4  /* exclude javascript only links */
 5  [href^="javascript:" i],
 6  /* exclude relative but not double slash only links */
 7  [href^="/"]:not([href^="//"]),
 8  /* domains to exclude */
 9  [href*="//nilaykumar.github.com"],
10  [href*="//localhost"],
11  /* subdomains to exclude */
12  [href*="//nilaykumar.github.com"],
13  [href*="localhost"],
14)) {
15  text-decoration: underline dotted;
16}

Note the exclusion of localhost so it works when testing locally via hugo server.

Here’s a broken internal link. In my hugo.toml I’ve set broken relative links (those generated by org-links to non-existent org files) to direct us straight to a custom 404 page,

1refLinksErrorLevel = 'warning'
2refLinksNotFoundURL = '/404.html'

and then styled links to the 404 page with a wavy underline:

1div#content.garden a[href^="/404.html"] { text-decoration: underline wavy; }

The wavy underline doesn’t seem to work on my phone, so it makes sense to give it a distinct color as well.

keeping image sizes low

I’m trying to get better with keeping my file sizes low. This makes page loads faster and keeps the size of the git repo down. I can never remember how to use find, so here’s what I ran to find my big images:

1fd --regex ".*\.(jpeg|jpg|png|svg)" content-org -x du -h | sort -r

When necessary, I use imagemagick to convert to jpeg and decrease the quality to taste.

Actually, the way I currently store images is not ideal because the git repository ends up containing two copies of each image. Currently working on straightening this out.

Here is the resource I’m following for generating (using hugo) to generate backlinks. One important thing to note is that the backlink detection is a simple search for the page filestem. So a test.org will have backlinks to every page in which the word test appears.