---
title: Building This Site on a Production-Grade Foundation — Mustafa Alfredji
description: Why a two-page personal site runs a tokenized design system, feature folders, layout-owned SEO, and a typed analytics catalog — and what that buys later.
url: "https://mustafaalfredji.com/blog/building-this-site"
type: static
generatedAt: "2026-08-07T05:10:56.611Z"
---

![Concentric rings on a warm paper grid, echoing the site mark](/_image?href=%2F_astro%2Fhero.B3wvGiZg.svg&w=1200&h=630&f=svg)
Most personal sites start as a single HTML file and grow scar tissue. This one started the other way: the smallest possible content on top of the same architecture I use for production apps. Two pages, but a real system under them.

## The rules that do the work

The whole setup reduces to a handful of conventions, each enforced by structure rather than discipline.

One stylesheet entry

Only the base layout imports CSS. Every page and component inherits design tokens, primitives, and Tailwind from a single entry point — so there is nowhere for one-off styling to hide.

**Tokens are the source of truth.** Color, type, spacing, elevation, and motion live as semantic CSS variables, bridged into Tailwind through `@theme`. The variable and the utility can never disagree, because the utility *is* the variable.

**Routes stay thin.** A file in `src/pages/` maps a URL to a feature page and does nothing else. Composition lives in the feature’s own folder, next to its copy and helpers.

**Copy lives apart from markup.** Every user-facing string sits in a `content.ts` as a typed constant. Rewording a page never touches layout code.

**SEO is not per-page work.** Canonical URLs, Open Graph, Twitter cards, and JSON-LD all render from one component that pages feed with props. A page cannot forget its meta tags, because it never writes them.

## Why bother for two pages

Because the cost curve is flat. The foundation took one evening, and every page after it inherits the system for free. The blog you are reading this on — content collections, hub archives, feeds, the works — dropped onto this structure without changing a line of what came before.

The deeper reason is that conventions only work when they are older than the content. Retrofitting a design system onto fifty pages is a migration; starting with one means there is never a “before”.

If you are curious how the machine-facing half works — the markdown mirrors, `llms.txt`, and structured data — that gets its own write-up in [How This Site Talks to LLMs](/blog/how-this-site-talks-to-llms/).

---

## Keep reading
![A stack of brand documents flowing into an AI chat panel](/_image?href=%2F_astro%2Fhero.DNqi1e3n.svg&w=1200&h=630&f=svg)
Build the System · Build the Brand

### [Load Your Brand Into a Claude or ChatGPT Project](/blog/load-your-brand-into-a-claude-or-chatgpt-project/)

The exact steps to turn brand documentation into a project your AI actually uses — Claude and ChatGPT, click by click, plus how to test that it worked.

August 7, 2026 · 5 min read
![A document with highlighted lines feeding into a node graph](/_image?href=%2F_astro%2Fhero.B08py7GJ.svg&w=1200&h=630&f=svg)
Build the System · Build the Brand

### [How This Site Talks to LLMs](/blog/how-this-site-talks-to-llms/)

Every page here ships a markdown mirror, an llms.txt index, a served AGENTS.md catalog, and answer-ready JSON-LD. Here is the whole setup, end to end.

July 26, 2026 · 2 min read

[← All posts](/blog/)