Case Study · Design & Development
A trader had written a field manual on discipline under market pressure: eight numbered stops, a glossary, and a field guide, all in Notion. We put it on a reading site that search engines can index and readers can finish. It went live as a Next.js site that reads from Notion. Now the manual is moving to Markdown in a repo, built with Astro and served from Cloudflare.
The manual already existed. It ran to 178 pages in a Notion workspace, with nested toggles, emoji headings, and links written as raw Notion IDs. Anyone opening a share link landed in Notion's own interface, and every URL was a 32-character ID.
The author wanted the material to start building a public name ahead of a book, without leaving the tool they write in.
The first version leaves the writing where it is. A Next.js 16 site reads the Notion workspace through react-notion-x and renders every page under a readable URL, like /stop-3/regulation-and-reset-protocols. Old Notion-ID links 308-redirect to the new ones. Pages regenerate hourly, so an edit to an existing page reaches the site without a deploy. New pages still need the crawl script rerun.
The first commit landed on 23 September 2026. It was live within three days, with 165 URLs in the sitemap, and it still serves traderphilosophy.com. The next two stages take the manual out of Notion and the site off Vercel.
The path
The move happens in three stages. Every page keeps its address and its look at each step.
The fastest way to a real site was to leave the writing in Notion. react-notion-x renders Notion's blocks, and browser-side passes restyle them after load: emoji to icons, recurring forms to cards, Stop references to links. It works, but a lot of that code exists only to make Notion's output look designed. Vercel's Hobby plan also caps deploys per day and doesn't allow commercial use.
The manual moves into Markdown in the repo, one STOP per pull request. An AI coding agent copies each Notion page in untouched, then adds front matter, points links at site URLs, and reconciles the text with the author's January book, each as its own commit. It asks the author only about editorial decisions. A content check runs on every pull request. All eight STOPs, the glossary, and the field guide are in. Nine pages from the last STOP are held back as drafts for the author.
An Astro 7 rebuild renders the Markdown to static pages on Cloudflare Workers. Its renderer outputs the class names react-notion-x used, so the existing stylesheet carries over, and the restyling that ran in the browser now runs at build time. Pages not moved yet come from a frozen copy of the Notion tree, and a script screenshots each page against the Next.js build. Search, the sitemap and the old Notion-ID redirects are all built from the repo. It is live at astro.traderphilosophy.com, kept out of search while traderphilosophy.com stays on Vercel. The domain moves once all 178 pages are in Markdown and every URL checks out.
How it's built
The live site builds them from the Notion tree. The Astro build makes the same ones from Markdown.
A build script walks the whole Notion tree and writes out slugs, the page hierarchy, and a redirect map. It also flags links that point at private or deleted pages, so a dead link shows up in a report instead of in front of a reader.
Press ⌘K or / anywhere. MiniSearch runs in the browser over every page, 1,251 section headings, and 49 glossary terms. It needs no search server and no third-party service.
Glossary terms open as definition popovers wherever they appear. References like "Stop 3.2" become links automatically. The glossary page has an A to Z strip, with letters that have no entries dimmed.
The author repeats a few structures: lock-in pledges, core principles, playbooks. The renderer recognises them by their headings and gives each its own treatment: pledge cards, pull-quotes, spec sheets. Emoji headings become Lucide icons, and keycap numbers become mono numerals in the accent colour.
A guided path runs from the overview through STOP 00 to 07, with an eight-segment progress rail and a next-stop link. The site remembers where you stopped reading. Wide tables break out of the text column with scroll shadows and a sticky first column.
Light and dark themes, reduced-motion support, a skip link, and a heading outline with no gaps for screen readers. Type is EB Garamond for display and Geist for body text.
Live: Next.js 16 · React 19 · react-notion-x · hourly ISR · Vercel. Next: Markdown · Astro 7 · Cloudflare Workers. Both: Tailwind CSS v4 · MiniSearch.
What this shows
Most of this work is invisible when it's right: readable URLs, redirects that don't break old links, search that doesn't need a server, and a renderer that knows the manual's recurring forms. On the author's side, the job is still writing.
Each stage keeps the same URLs and the same look. The first put the manual in front of readers in three days without changing how the author writes. The second turns it into files the author edits through an AI agent, with every change a reviewable diff. The third drops the code that exists only to restyle Notion, and moves hosting to Cloudflare, where the domain's DNS already is.
We design and build content sites around the tools you already write in, from one studio.
