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.


  1. 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. ↩︎

  2. Ah, the lost innocence of a bygone age. ↩︎

  3. 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. ↩︎

  4. Well, 2014 anyways; I am making use of elements introduced by the HTML 5 standard. ↩︎

  5. 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. ↩︎

  6. 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. ↩︎

  7. 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. ↩︎