Building this blog
Benji Taylor makes the most beautiful personal site on the internet. I admired it so much I rebuilt it from scratch, just to learn how he does it.
You probably don’t need a blog — I’m not sure anyone does.1 People don’t even finish YouTube videos anymore. But if you’re going to have one, it may as well look like this.
Where the idea came from
This site is based on two others.
The design is from Benji Taylor’s site. I don’t really know anything about design, and he knows everything. And I couldn’t afford a designer,2 but I certainly can follow a spec.
The architecture comes from Guillermo Rauch’s blog. Everything about how this is set up comes from his blog: the open source GitHub repo, the MDX files that are their own routes, and the one line in a JSON registry driving the index. No CMS, no database, no frontmatter parser.
So the site is a combo of the two: Benji’s aesthetic on Guillermo’s skeleton.
How it works
Each post lives at app/(articles)/<slug>/page.mdx and ships at the root path (this one is just /building-this-blog). There’s no CMS and no frontmatter parser, because a post is a file and the file is the route:
import { Counter } from "./counter";
export const metadata = { title: "Hello" };
This is a whole post. The button below is a React component,
imported one line up and dropped straight into the prose:
<Counter />A single posts.json registry holds each post’s slug, title, and date; the homepage index and the shared article layout both read from it, so the index and the page header can never drift out of sync. Code is highlighted at build time with rehype-pretty-code, every element a post might reach for is already styled, and the whole thing prerenders to static HTML.
Posts that do things
Because a post is a real React route, the component it imports is really running. Here’s the one from the file above, live:
That’s the key.3 A post about a gesture can contain the gesture. A post about an animation can play it. No CMS decides which slice of the web I’m allowed to use. The whole thing is my escape hatch.
The fun parts
I tried to get as many of the details right from Benji’s site, because they’re what make it feel nice.
For instance, the margin notes are my actual handwriting. I used Calligraphr to make a custom font from a photo in my notebook, and loaded it in with next/font.
How I created my own font for the margin notes.
The bracket that pulls each note to the side is drawn with rough.js, by way of rough-notation. Instead of a clean SVG stroke it sketches a slightly wobbly line, redrawn a little differently each time, then animates it in when the note scrolls into view. The hand-drawn underlines and circles elsewhere on the site work the same way.
To get a nice highlighter effect, I combine several randomized gradients, padding, and tilts, all seeded by the text itself. So it pools naturally, and never changes between renders.
And lastly, there’s a that interpolates between any two colors I choose.
Footnotes
-
Except maybe Sam Altman and Paul Graham. ↩
-
The Consumer Price Index is up about a fifth since 2020. Designer rates, in my experience, did not stop there. ↩
-
The counter above is an ordinary client component co-located in this post’s folder. No plugin system, no shortcodes. It animates with Framer Motion. ↩