❯field notes_
← cd ..

2026-10-10 · Tech / Behind the scenes

How Field Notes Is Built

A quick tour of the stack behind this blog: TanStack Start, Content Collections, and OpenAI Pages.

Field Notes is a TanStack Start app with React 19 and Tailwind CSS 4, prerendered and deployed on OpenAI Pages. A small Worker serves the pages, a published-post feed, and browser telemetry configuration.

Writing a post

Each entry is a Markdown file in content/posts/. The frontmatter carries the title, summary, date, and categories. Content Collections validates that frontmatter at build time, so a missing field fails the build instead of quietly rendering a broken page.

The URL slug comes from the title, so "Welcome to Field Notes" becomes /posts/welcome-to-field-notes.

Styling

The colors and fonts are the same tokens the homepage uses. They live in one @theme block in src/styles.css, which means changing the palette in one place updates every screen.

What comes next

Right now the content lives in the repository. The roadmap in PLAN.md covers moving to an editable CMS, along with the features that come with one.