Towards a Simpler Website
Four months ago,1 I set out on a possibly-ill-considered expedition to complicate my life by simplifying my website.
I started this blog on the very last day of
2019.2 At the time—as
outlined in my first
post—I decided to build it using the
Hugo static-site generator. In context,
this was a good decision; it came with its own opinions and reasonable
defaults that allowed me to stop waffling over the design of the site
and actually start writing. Plus, the perceived simplicity of
writing in Markdown and deploying changes with git push
appealed to me.
This setup worked perfectly well, but over time I began to feel less
and less enamored with it. Regular blog posts were easy enough, but
whenever I wanted to create something more custom—my
About and Chess pages being
salient examples—I found myself struggling to understand
Hugo’s templating system, spending hours flitting between
documentation and forum posts regarding the syntax and hierarchy when
all I really wanted to do was create a new page in a new folder that
looked just slightly different than the
others.3 It also frustrated
me that Hugo refuses to render raw, inline HTML within an
otherwise-Markdown document—a key feature of the
original Markdown spec—unless you turn on the ominously-named
markup.goldmark.renderer.unsafe
configuration option. Yes, Hugo has a powerful system of
shortcodes
to replace this functionality (with yet more templates), but it feels a
little overkill when all you want to do is slip in a few
<kbd> elements once in a while.
I suppose that about sums up my feelings towards Hugo at this point—powerful, but overkill for what I want. And thus, my quest: excise Hugo and write pure, unadulterated HTML like it’s 1995.4
The idea of switching to handwritten HTML naturally forced
encouraged me to clean up both the formatting and structure of my pages,
which in turn presented the opportunity to overhaul the visual design of
the site. Or perhaps it was the other way around—the look of the
site was starting to feel a bit stale, and I didn’t relish the
idea of making substantial alterations to a complex set of templates and
stylesheets that I didn’t
write.5
My
previous theme (pink variant) had a vaguely cyberpunk aesthetic,
which appealed to 26-year-old me; but with age comes changing tastes,
and 29-year-old me came to think it felt a tad adolescent. I desired
something simpler, perhaps more literary (read: serif font), and so I
took inspiration (primarily) from the blogs of
Hillel Wayne,
Drew DeVault, and
Molly White. My new design
makes use of semantic HTML,6
with very few classes; instead, semantic elements like
<main>, <article>,
<header>, <footer>,
etc. make it feasible to rely on (combinations of)
elements to target nearly all of my CSS rules. I am also no longer using
any JavaScript,7 with the
minor downside (or perhaps: aesthetic choice?) that my code blocks no
longer have syntax highlighting. I might consider re-introducing
Prism for this purpose at some point,
but for now I kind of like how the lack of highlighting affords a
heightened mimicry of the printed page (at least when viewed with the
system-preference-respecting light theme, which is a thing that I have
now).
The final remnant of the old design is the pink square that, along with my nom de plume, comprises my logo/wordmark/whatever you want to call it. I incorporated this square entirely so I would have an excuse not to change my favicon; I don’t want to use a self-portrait, and I don’t really have any other kind of suitable image. At first, I intended to also use (variants of) this color for accents throughout a page, e.g. for subheadings or for the margin color that appears when your browser window is more than 45em wide, but ultimately I didn’t like how that looked.
I’m sure that my new, Hugo-free blog-writing workflow will bring its own challenges and annoyances. For example, creating links to and from footnotes is kind of a pain by hand, especially if you add or remove footnotes earlier in a post and have to renumber all the rest. Shortly after writing this paragraph, I will have to figure out how to update my RSS feed by hand as well. Yet, if these things truly end up bothering me enough, I can easily imagine writing scripts to help manage them; and in the end, I suspect I will still feel more comfortable and confident in my ability to make this site what I want it to be.
Footnotes
It took so long primarily because I was only taking time to work on it for an hour or two each weekend, and there were all too many weekends when other obligations precluded any progress at all. Ultimately, frustration with this led me to designate one weekday evening per week as a “project night,” a move that I now hope might finally allow me to move forward with various other project ideas I’ve wanted to work on but not found the time for. ↩︎
Ah, the lost innocence of a bygone age. ↩︎
I’m sure I could have a much smoother Hugo development experience if I took the time to sit and read through all of the documentation at once, instead of trying to pick through the bits and pieces that I specifically need at a given moment, but that’s not really the point: the goal isn’t to learn Hugo, the goal is to write and publish blog posts. ↩︎
Well, 2014 anyways; I am making use of elements introduced by the HTML 5 standard. ↩︎
I did make a handful of minor alterations to the original theme, like changing the font, customizing the Twitter card, and implementing a bit of a hack to dress up Hugo’s non-customizable footnotes separator. ↩︎
I am unreasonably pleased to now have the ability to encase titles in
<cite>elements. One of the few things that always bothered me about Markdown was that all italic text was rendered with<em>exclusively. ↩︎Well, okay, there’s the embedded Lichess boards on my Chess pages; but those are just providing a view of a Lichess page in an
<iframe>, so technically any JavaScript involved there isn’t actually part of my site. ↩︎