There’s this annoying tension between personal and public that comes with personal websites. Are they a home or a gallery? a personal record or a public document?
On the one hand, it feels like it would be fun to have a massive index of everything you’ve done, thought, or written about, all in one place. On the other, this makes it harder for people to find the bits that might be worth reading.
Equally tempting is the idea of perfectly designed templates for each section of your site. I have accepted that I will never do it as well as Aaron, and it’s allowed me to be at peace with tasteful minimalism instead.
Principles
Despite the rumors, I do indeed have a few.
Speed
This site is fast. As fast as you can get without fancy Javascript-based SPA-style fetch and swapping.
It uses web fonts, but has good fallbacks. There is just one 500-line stylesheet. There is no JS-based rendering. Pages are light, fonts are cached. Images are compressed to within an inch of legibility, and Netlify’s CDN ensures a low time-to-first-byte.
Everything is a static asset, everything is cached locally. Yes, even the HTML, it just has a refresh period of 15 minutes. The result is a website that crushes all the speed tests I could find, and is a comfortable member of the 250KB club.
Lightness
I knew the web was getting bloated and slow, I just didn’t know it was getting this bloated. There are Javascript bundles the size of entire mobile apps being downloaded each time I visit pages that could have been purely static. My webfont (downloaded once, cached forever) usage pales in comparision.
A further benefit of this lightness is robustness. This site is perfectly readable on a variety of viewport widths. It is perfectly readable without any CSS. It is functional without any Javascript. It acknowledges the pace layers of the web. It uses semantic HTML for all it’s elements.
Maintainability
If you aren’t already, you should seriously consider using a static site, built on a foundation of Markdown and Git. It frees you from being reliant on a private company to keep your site alive, and you can switch hosting with ease. It lets your site degrade gracefully.
You’re also free to pick how you want to build your site, instead of being limited to one default method (JS Handlebars for Ghost sites, PHP for Wordpress, etc). I use Hugo because it lets me write my templates in plain HTML, and has lots of useful pre-defined functions.
The fewer special styles and element names I have to remember, the better. Every writing page is plain old Markdown, with no extra formatting.
The important consequence of this minimalism is that writing a new post is simple as opening up a new markdown file, adding a title to the front-matter, and starting to type.
Stack
It’s 2023, and web hosting has never been cheaper. Other than the $10/year that I pay for the domain, it costs me nothing to put this website online. I don’t need to rent a server to host pure static files, and Github provides free storage.
| Service | Purpose |
|---|---|
| Github | Hosting and version control |
| Netlify | Deployment and CDN provider |
| Porkbun | Moved my domains here ever since Google announced that they’re selling to Squarespace |
The site itself is generated with Hugo, which I like because it’s really fast and provides a bunch of of sensible defaults that frees me from having to fiddle with plugins.
Inspiration
I love weird personal sites and near-unreadable layouts. I’ve even designed some myself. But for better or worse, this version of my site seems to have unconsciously adopted most parts of the brutalism code of practice.
Brutalist Web Design
If you’re a web designer or front-end developer, I will help save you from yourself. To help you put fancy to one side. I am going to offer you a brutalism code of practice:
Carl Barenbrug
- Don’t be influenced by tools
- Use a system font and only one
- Write clean code
- Write your own CSS
- Don’t use Javascript (if you can avoid it)
- Don’t hack the scrollbar
- Don’t create custom cursors
- Don’t use an effect just because you can (especially fade effects)
- Have as little design as possible
- Make navigation obvious or not at all
- Be practical rather than pretty
- Don’t use gradients or shadows
- Use high contrast colours
I might change my mind eventually, but for now this simple set-up suits me well. It means I’m actually writing words on here instead of endless fiddling with stylesheet files. The layout also translates well between mobile and desktop, which is the part I usually find most frustrating.
Where is the the dark mode switch???
I'm not telling, but it's not that hard to find.Type
This version’s gimmick is the ability to pick what kind of font you’d like to view the site with. There are four options, and they use the following fonts:
Sans-serif: Figtree, system-ui
Serif: Sentient, serif
Monospace: PT Mono, monospace
Handwriting: Shantell Sans, cursive
Javascript
There is only one piece of Javascript on this site. It is responsible for switching between dark/light modes, and swapping fonts.
Analytics
Basic stats are collected by Umami, an open-source, self-hosted analytics platform. Hosting fits comfortably into the free tiers on Netlify and Supabase.
It seems like every site that mentions the existence of an analytics script does so with an overly-apologetic “I don’t actually care about numbers, I just have this for such-and-such completely benign reasons”. It’s your site dude, you don’t need to feel guilty about it.
As for my own numbers, I rarely check them, but it’s nice to have some idea of how people use this site. It helps me figure out what pages should make it into the “popular” section, and if a half-complete page is getting enough visits for me to bump it up my to-do list.