The Rules I Set While Building This Site

I built this site alone, from design through code. Which means there is nobody to complain when I break my own rules. Here are the five I set while building it — not a story about making screens look good, but about making it hard for tomorrow’s me to break them.

A laptop on a desk with a code editor open, a second monitor showing the page being worked on — Closing the distance between the screen you designed and the screen that actually runs.

1. Keep content and code apart

The writing and the work live in content/; the site lives in src/. Replace the stack and the source survives. I did replace it once, and all that moved was the code.

2. One project, one folder

A piece of work is a folder. Text and images live in it together. Dumping every image into one shared directory looks convenient until you delete a project and nobody knows which images were supposed to leave with it. Now a folder writes /media/blog/making-this-site/… and the site turns that into a URL. Deleting a project became deleting a folder.

3. Give every surface its own sentence

The title that belongs on a list card isn’t always the title that belongs on the detail page. At first one title was shared by every surface: tune it for the list and the detail reads flat; tune it for the detail and the list overflows. Now each surface holds its own title and summary. The same sentence gets written more than once — and fixing one screen stopped breaking another.

4. Fix the rule, not the value

Spacing and type sizes aren’t decided on the screen; they’re decided as tokens. One incident showed why that matters. A heading on the About page kept splitting into four lines, and the cause wasn’t the heading’s size — it was the body’s reading measure (34rem) being applied to the heading too. Leaving that cap on the body alone brought the heading down to two lines. What got fixed wasn’t a number but a rule: who is this width for?

Curved library shelves receding into the distance — Stacking the same content in three languages means shelving the same library three times.

5. Don’t trust what you saw

Looking fine in a browser and being fine are different states. So every time I change a screen, I measure: how many lines the heading takes, how many pixels the column is, whether the counter runs again when you scroll back to it. Tests are what hold those numbers in place. The next time I break one absent-mindedly, they do the shouting for me.

On a site built alone, the danger isn’t the deadline — it’s consistency. If yesterday’s me and today’s me work to different rules, the site stops looking like one person made it. All five rules say the same thing.

Taste can’t be handed over. A rule can — even when the person receiving it is tomorrow’s me.