Building "Our Story" - The Tech Behind This Blog

I wanted to share a bit about how this blog came to be from a technical perspective. If you're not into web development, feel free to skip this one! But if you're curious about how modern websites get built in 2025, read on.

The Tech Stack

This blog is built on some fantastic open-source technologies:

TanStack Start + React 19

TanStack Logo

At the core, we're using TanStack Start, a full-stack React framework built on top of Vite. It provides file-based routing, server-side rendering, and seamless data fetching.

We're also running on React 19, the latest version of React, which brings performance improvements and the new React Compiler for automatic optimizations.

Tailwind CSS v4

Tailwind CSS Logo

For styling, we use Tailwind CSS v4 with the new CSS-first configuration. The design follows the "Maia" style from shadcn/ui - soft, rounded corners with generous spacing. We're using an emerald accent color on a zinc neutral palette, all defined in the OKLCH color space for perceptually uniform colors.

Bun

Bun Logo

Bun serves as our JavaScript runtime and package manager. It's incredibly fast - installs happen in seconds and the dev server starts almost instantly.

Design Philosophy

The design follows a few key principles:

1. Content-First: The focus is on the writing and photos, not flashy UI
2. Soft & Approachable: Rounded corners, generous whitespace, and warm colors make it feel personal rather than corporate
3. Fast & Accessible: Server-rendered pages load quickly and work for everyone

How Content Works - The Magic of Markdown

Here's where things get interesting from a "non-coder friendly" perspective.

Write Markdown, Get a Page

All blog posts are just markdown files in a /content/posts/ folder. Each file has some metadata at the top (called "frontmatter") like the title, date, and tags:

---
title: My Post Title
date: 2025-12-21
tags:
  - travel
  - photos
---

Then you just write your content in markdown - a simple formatting language where # Heading creates a heading and **bold** makes text bold.

Automatic Routing

The magic is that creating a new .md file automatically creates a new page on the site. No code changes needed. Name your file my-vacation.md and it appears at ourstory.com/posts/my-vacation.

This is powered by TanStack Start's file-based routing combined with a server function that reads all the markdown files at build time.

The Deployment Flow

GitHub + Netlify

The entire site lives in a GitHub repository. When we push changes to the main branch:

1. GitHub notifies Netlify
2. Netlify pulls the latest code
3. Runs bun run build to create the production site
4. Deploys to their global CDN

The whole process takes about a minute, and the site is updated worldwide.

Anyone Can Write Content Without Coding!

This was a key design constraint from the start. Not everyone who wants to contribute is a developer, but they should still be able to write and publish content without needing to touch code or ask for help.

GitHub has a built-in web editor that makes this possible:

1. Navigate to the /content/posts/ folder on GitHub
2. Click "Add file" → "Create new file"
3. Name it something like 2025-our-trip.md
4. Write the post using simple markdown
5. Click "Commit changes"

That's it! Within a minute, the post is live on the site. No command line, no code editor, no deployment steps. Just write and publish.

Built with Claude Code

Here's a fun fact: most of this site was built via prompts to Claude Code.

Claude Code is Anthropic's AI coding assistant that runs in your terminal. I described what I wanted - a personal blog with a specific design aesthetic, markdown-based content, easy deployment - and worked iteratively with Claude to build it out.

This included:

• Setting up the TanStack Start project structure
• Creating the routing and markdown parsing logic
• Building the UI components with the Maia design system
• Configuring the Netlify deployment
• Even writing this blog post scaffold!

It's a fascinating glimpse into how AI-assisted development is changing the way we build software. I could focus on the what (what the site should do and look like) while Claude helped with the how (the actual implementation details).

The Stack at a Glance

Thanks for geeking out with me! If you have any questions about how the site works, feel free to reach out.