Words and code

Publication date: April 5th, 2025

Prior art

First, I'd like to pay respect to two personal blogs that heavily influenced the design of this website: the blogs of Paco Coursey, the webmaster at Linear, and Manuel Moreale, a freelance developer and designer from Italy. Taking time to internalize their design choices (as well as others) helped me figure out what I wanted to do here.

Reading about code

I knew I wanted this website to primarily be a blog about code. Blogs are about reading words, but not just words. They're about ideas and ultimately the person behind them.

So, I decided to design this website to look a bit like a book. Hence the subtle sepia tone using floralwhite for the surface, with all other colors derived from it, to help the "page" look the tiniest bit more like a physical one. My hope is that, as you read this, there might be the smallest chance that your brain tricks you into thinking it is one.

Fonts (zzzzz)

What's a book without a good font? I knew that picking good ones that play well together would be really important here. I thought it would be fun to play with the tension between the "physical" (just bear with me) and the digital by presenting a minimal, physical-looking page with little bits of the digital world that break through and feel slightly anachronistic.

For the body text, I chose Merriweather: a formal, but still comfortable to read serif font.

I often like how sans serif headers contrast with serif body text, and I knew I wanted something, again, approachable and easy to read, but not too "techy" or "futury" or pretentious looking. After many iterations, I chose Figtree.

The third and final font shown here is monospace and almost entirely used for code. I went with JetBrians Mono for its simplicity and cleanliness compared to other options, especially at smaller font sizes.

The back of the house

These words about code wouldn't be here without code, which kinda sucks, but what can you do? At work, I build interfaces with React and TypeScript, and while that's all well and good and is what I enjoy doing, it means I don't get much experience building actual websites. It's hard! This is the first one I've ever actually finished and said "hello" to the world with.

I have many, many more words to write about the technologies I used to build this website, which will have to wait for another time. The TL;DR is that:

I did not want to use Next.js, because I'm tired of reading those kinds of posts and I actually wanted to learn something and not just trust in the magic.
I eventually ended up using Hono via their HonoX meta-framework. I re-wrote this website about 5 times in the process, learned a ton, and I can't wait to share more about it.

Lastly, some actual code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Hono } from 'hono';

const app = new Hono();

app.get('/', (c) => c.html(
  <html>
    <head>
      <title>Custom syntax highlighter</title>
    </head>
    <body>
      <h1>MDX + Hono JSX + Shiki</h1>
      <p>This code is written in Markdown and rendered with MDX using Hono's own JSX implementation with a custom syntax highlighter built with <a href="https://shiki.matsu.io/">Shiki</a>, using a minimalist theme I built from scratch.</p>
      <p>I plan on writing several more blog posts about how I built it.</p>
    </body>
  </html>
));

export default app;