diff --git a/cli.ts b/cli.ts
index dfa4420..b9252f7 100644
--- a/cli.ts
+++ b/cli.ts
@@ -1,6 +1,23 @@
-import { pages } from "./content/pages.js"
+import * as fs from "node:fs";
+import * as posix from "node:path/posix";
 import { prettify, htmlDocument } from "antihtml";
-import * as fs from "node:fs"
+import { pages } from "./content/pages.js";
+import type { Page } from "./content/types.js";
+import { resolveRefs } from "./utils/resolve-refs.js";
+
+function pageToHtml(page: Page) {
+	if (!page.ref.startsWith("/")) {
+		throw new Error(`ref "${page.ref}" for "${page.title}" is not absolute.`);
+	}
+	return htmlDocument(
+		prettify(
+			resolveRefs(
+				page.content,
+				posix.dirname(page.ref),
+			)
+		)
+	)
+}
 
 const outDir = "build/web";
 if (!fs.existsSync(outDir)) {
@@ -15,8 +32,8 @@ for (const page of pages) {
 			fs.mkdirSync(dir);
 		}
 	}
-	console.log(`writing ${outDir}/${page.ref}`);
-	fs.writeFileSync(`${outDir}/${page.ref}`, htmlDocument(prettify(page.content)));
+	console.log(`writing ${outDir}${page.ref}`);
+	fs.writeFileSync(`${outDir}${page.ref}`, pageToHtml(page));
 }
 
 console.log(`writing ${outDir}/style.css`);
diff --git a/content/bases.tsx b/content/bases.tsx
index cf9f3ae..9e81ea7 100644
--- a/content/bases.tsx
+++ b/content/bases.tsx
@@ -9,12 +9,12 @@ export function BasePage(props: BaseProps) {
 		<head>
 			<meta charset="utf-8" />
 			<title>{props.title}</title>
-			<link rel="stylesheet" href="./style.css" />
+			<link rel="stylesheet" href="/style.css" />
 		</head>
 		<body>
 			<header class="header">
 				<nav>
-					<a href="./index.html">Home</a> <a href="./updates.html">Updates</a> <a href="./projects.html">Projects</a>
+					<a href="/index.html">Home</a> <a href="/updates.html">Updates</a> <a href="/projects.html">Projects</a>
 				</nav>
 			</header>
 			{props.children}
diff --git a/content/index.tsx b/content/index.tsx
index e4cef5f..1b01c06 100644
--- a/content/index.tsx
+++ b/content/index.tsx
@@ -5,7 +5,7 @@ import { updates } from "./updates.js"
 const title = "Hornwitser's Site";
 export const index = {
 	title,
-	ref: "index.html",
+	ref: "/index.html",
 	content: <BasePage title={title}>
 		<main>
 			<div class="hero" />
@@ -21,13 +21,13 @@ export const index = {
 			<p>
 				I'm a red dragon that mostly dabble in hobby programming and the occasional artwork.
 			</p>
-			<h2>Latest <a href="./updates.html">Updates</a></h2>
+			<h2>Latest <a href="/updates.html">Updates</a></h2>
 			<ul>
-				{ updates.map(update => <li><a href={"./" + update.ref}>{update.title}</a></li>)}
+				{ updates.map(update => <li><a href={update.ref}>{update.title}</a></li>)}
 			</ul>
 			<h2>Projects</h2>
 			<ul>
-				{ projects.map(project => <li><a href={"./" + project.ref}>{project.title}</a></li>)}
+				{ projects.map(project => <li><a href={project.ref}>{project.title}</a></li>)}
 			</ul>
 		</main>
 	</BasePage>,
diff --git a/content/projects.tsx b/content/projects.tsx
index a5f0493..43b12b5 100644
--- a/content/projects.tsx
+++ b/content/projects.tsx
@@ -4,23 +4,23 @@ import type { Page } from "./types.js";
 export const projects: Page[] = [
 	{
 		title: "Buddhabrot renderer",
-		ref: "projects/buddhabrot.html",
+		ref: "/projects/buddhabrot.html",
 	},
 	{
 		title: "Wooden Drawing Board",
-		ref: "projects/drafting-board.html",
+		ref: "/projects/drafting-board.html",
 	},
 	{
 		title: "Flying Hornwitser Paper Craft",
-		ref: "projects/paper-hornwitser.html",
+		ref: "/projects/paper-hornwitser.html",
 	},
 	{
 		title: "Prototype Soren Plush",
-		ref: "projects/plush-soren.html",
+		ref: "/projects/plush-soren.html",
 	},
 	{
 		title: "Blender to CSS export script",
-		ref: "projects/blender-css.html",
+		ref: "/projects/blender-css.html",
 	},
 ].map(page => ({
 	title: page.title,
@@ -35,12 +35,12 @@ export const projects: Page[] = [
 const title = "Hornwitser's Projects";
 export const projectsIndex: Page = {
 	title,
-	ref: "projects.html",
+	ref: "/projects.html",
 	content: <BasePage title={title}>
 		<main>
 			<h1>{title}</h1>
 			<ul>
-				{ projects.map(project => <li><a href={"./" + project.ref}>{project.title}</a></li>)}
+				{ projects.map(project => <li><a href={project.ref}>{project.title}</a></li>)}
 			</ul>
 		</main>
 	</BasePage>
diff --git a/content/updates.tsx b/content/updates.tsx
index 6c5d095..935af7e 100644
--- a/content/updates.tsx
+++ b/content/updates.tsx
@@ -5,7 +5,7 @@ export const updates: Page[] = [
 	{
 		published: "2025-xx-xx",
 		title: "Website Launch",
-		ref: "updates/site-launch.html",
+		ref: "/updates/site-launch.html",
 	}
 ].map(page => ({
 	title: page.title,
@@ -20,12 +20,12 @@ export const updates: Page[] = [
 const title = "Website Updates";
 export const updatesIndex: Page = {
 	title,
-	ref: "updates.html",
+	ref: "/updates.html",
 	content: <BasePage title={title}>
 		<main>
 			<h1>{title}</h1>
 			<ul>
-				{ updates.map(update => <li><a href={"./" + update.ref}>{update.title}</a></li>)}
+				{ updates.map(update => <li><a href={update.ref}>{update.title}</a></li>)}
 			</ul>
 		</main>
 	</BasePage>
