diff --git a/apps/web/content/articles/hyprnote-publishing-stack.mdx b/apps/web/content/articles/hyprnote-publishing-stack.mdx new file mode 100644 index 0000000000..986fcc3b6c --- /dev/null +++ b/apps/web/content/articles/hyprnote-publishing-stack.mdx @@ -0,0 +1,278 @@ +--- +display_title: "How We Built Hyprnote’s Publishing Stack" +meta_title: "Hyprnote’s Publishing Stack: MDX, GitHub, and the Future of Docs" +meta_description: "A deep dive into how Hyprnote built a future-proof publishing system using MDX, GitHub workflows, custom components, and TanStack Start—and why this approach outlives most CMS platforms." +author: "John Jeong" +created: "2025-12-02" +--- + +Most teams pick a CMS. We ended up building a publishing system. + +Not because we wanted to. But because every CMS we evaluated pushed us away from the way we actually work. + +We're a deeply technical team. We write in our IDEs. We think in Git. We move fast. We rewrite things without ceremony. We treat documentation and blog posts as part of the product, not accessories to it. + +So when we looked at the landscape — WYSIWYG editors, headless CMS platforms, Git-based CMS layers, hosted docs systems — every option either slowed us down or boxed us in. + +So we did the simplest thing: we built our publishing system the same way we build Hyprnote. + +This post breaks down exactly how it works, why it works, and why I expect it to outlive most CMS platforms people are betting on today. + +This is Part 6 of our publishing series — the final one. + +## 1. Start With the Root: MDX + Git + +Everything begins with a simple rule: + +**Every piece of content is a file. Nothing more.** + +Not a record in a content lake. Not a block inside a WYSIWYG editor. Not a blob stored in a SaaS database. + +Just a folder of MDX files. + +This gives us: + +- perfect portability +- diffable history +- PR-based editorial workflow +- easy migrations +- infinite flexibility +- no vendor lock-in +- everything versioned forever + +It's the same model used by Vercel, Supabase, Astro, Deno, Expo, and most modern open-source developer tools. + +There's a reason they all use it: content ages better in plain text than in a proprietary editor. + + +## 2. The Framework: TanStack Start + MDX + +Most teams default to Next.js, but we're building on TanStack Start, because: + +- it's hyper-minimal +- it's type-safe +- it's extremely fast +- it plays perfectly with MDX +- it avoids the Next.js bloat and weird trade-offs +- it mirrors how modern engineering teams think (clean routing, simple loaders, SSR-first) + +Using MDX inside Start gave us: + +- frontmatter-based metadata +- custom components for callouts, figures, tabs, videos +- scoped styling +- zero-CMS layout control +- instantaneous rebuilds +- per-route SEO overrides +- OG image generation that "just works" + +Docs, blog posts, legal pages — they're all the same format, with different components. + +Minimalism is a feature. + +## 3. The Editorial Workflow: GitHub PRs + +We don't need a CMS workflow because GitHub already solved that problem at global scale: + +- branches = drafts +- PRs = editorial review +- comments = inline suggestions +- commits = revision history +- labels = status +- GitHub Actions = validation +- merge = publish + +It's not "content management." It's just engineering. + +And engineering workflows are better than every CMS workflow on the market. + +## 4. The Image Pipeline: Supabase + GitHub + +WYSIWYG editors make image uploading easy, but they hide the backend complexity. + +We want the convenience and the control. + +So here's our stack: + +- GitHub drag-and-drop for inline screenshots +- Supabase buckets for structured assets (covers, OG images, diagrams) +- automatic CDN-level optimization +- public URLs for MDX components +- no proprietary storage formats +- zero lock-in + +It takes seconds to add an image. And the image will still exist in 10 years. + +Try that with a SaaS CMS. + +## 5. Custom MDX Components: Our Secret Weapon + +The moment content becomes code, every document becomes a canvas. We built a small but powerful set of MDX components: + +- `
` +- `