How I Built JasonZhu.AI: Tech Stack, Architecture, and Full Cost Breakdown

A former AI algorithm engineer's complete record of building a personal brand website using AI tools. Built from scratch, live in 2 days, and continuously improving.

Project Overview

JasonZhu.AI is my personal brand website — a one-stop platform combining a blog, AI tool recommendations, service showcase, and newsletter subscription. The goal was to create an efficient platform for publishing AI content and building my personal brand.

Metric	Data
Blog posts	72
Pages	7 main pages (Home, Blog, News, AI Tools, Services, Handbook, About)
Code files	33 TypeScript/React files
Lines of code	~2,500 (excluding blog content)
Git commits	41
First commit	2026-04-11
Development method	99% generated by Claude Code

Tech Stack

Core Framework

Technology	Version	Purpose
Next.js	16.2.3	React full-stack framework, App Router
React	19.2.4	UI component library
TypeScript	5.x	Type safety
Tailwind CSS	4.x	Utility-first CSS styling

Content System

Technology	Purpose
Markdown (.md)	Blog post format
gray-matter	Frontmatter parsing (title, category, tags, etc.)
next-mdx-remote	MDX/Markdown rendering
remark-gfm	GitHub Flavored Markdown (tables, strikethrough, etc.)
rehype-highlight	Code syntax highlighting
rehype-slug	Heading anchor links

Backend Services

Technology	Purpose
Supabase	Database + storage (PostgreSQL)
Supabase Auth	Admin panel authentication
Supabase Storage	Image storage
Next.js API Routes	Backend endpoints

Deployment & Infrastructure

Technology	Purpose
Vercel	Hosting & deployment (automatic CI/CD)
GitHub	Code repository
Cloudflare	DNS + CDN

Development Tools

Tool	Purpose
Claude Code	Primary AI coding assistant (99% of code generated)
Obsidian	Blog content editor
xreach CLI	X/Twitter tweet reader (bulk blog post generation)

Site Architecture

jasonzhu.ai/
├── src/
│   ├── app/
│   │   ├── [lang]/           # i18n routing (zh/en)
│   │   │   ├── page.tsx      # Home page
│   │   │   ├── blog/         # Blog list + post detail
│   │   │   ├── tools/        # AI tool recommendations
│   │   │   ├── services/     # Service showcase
│   │   │   ├── handbook/     # Handbook download (Lead Magnet)
│   │   │   ├── news/         # AI news
│   │   │   └── about/        # About me
│   │   ├── admin/            # Admin panel
│   │   └── api/              # API endpoints
│   │       ├── subscribe/    # Newsletter subscription
│   │       ├── views/        # Post view counts
│   │       ├── likes/        # Post likes
│   │       └── admin/        # Admin API
│   ├── components/           # React components
│   ├── content/blog/         # Markdown blog posts
│   ├── dictionaries/         # i18n translation files (zh/en)
│   ├── generated/            # Pre-built generated files
│   └── lib/                  # Utility functions
├── public/                   # Static assets
├── scripts/                  # Build scripts
└── supabase/                 # Supabase configuration

Core Feature Implementation

1. Blog System: Markdown + Pre-built JSON

My initial approach used fs.readdirSync to read Markdown files, but Vercel Serverless functions can't access files that haven't been bundled by Webpack.

Solution: Pre-built JSON manifest

• scripts/generate-posts.mjs reads all .md files before the build
• Generates a static src/generated/posts.json file
• mdx.ts directly imports this JSON, with no runtime filesystem dependency

// package.json
"prebuild": "node scripts/generate-posts.mjs",
"build": "next build"

2. Internationalization (i18n): Chinese & English

• A [lang] dynamic route segment handles /zh/ and /en/ paths
• src/dictionaries/zh.json + en.json store translated UI strings
• Middleware automatically detects the browser language and redirects accordingly
• Blog categories also have a translation mapping (categoryMap)

3. Engagement Features

• View counter: Supabase page_views table, auto-increments on each visit
• Like system: Supabase page_likes table, with localStorage to prevent duplicate likes
• Comment system: Giscus (powered by GitHub Discussions) — completely free
• Newsletter subscription: Supabase subscribers table

4. Admin Panel (/admin)

• Simple password protection via environment variable (ADMIN_PASSWORD)
• Post management: view all posts, filter by category/tag
• Post links: jump directly to the live page or open in Obsidian for editing
• Image uploads: upload directly to Supabase Storage
• Subscriber management: view the subscriber list

5. Lead Magnet (Handbook Download)

• A prominent blue gradient CTA card on the home page
• Users enter their email to download the AIP出海自媒体实战手册 PDF
• Email addresses are automatically saved to the Supabase subscribers table

Content Production Workflow

X/Twitter tweets → xreach CLI → Claude Code generates .md → Obsidian editing → git push → Vercel auto-deploy

This workflow is how I scaled from a handful of posts to 72 in a short period, covering 9 categories:

Category	Posts	Content Type
Opinion	15+	AI industry commentary
Tutorials	10+	Tool usage guides
Going Global	10+	SaaS overseas expansion retrospectives
Vibe Coding	8+	AI-assisted programming
Marketing & Growth	8+	Growth strategies
AI Tools	5+	Tool reviews
Book Picks	5+	Reading notes
Training & Consulting	5+	Enterprise AI training
Payments	3+	Payment solutions

Cost Breakdown

Fixed Costs

Item	Cost	Billing Cycle
Domain (jasonzhu.ai)	¥1,092	2 years
Vercel (Hobby Plan)	$0	Free
Supabase (Free Plan)	$0	Free
GitHub	$0	Free
Cloudflare (Free Plan)	$0	Free
Giscus (comments)	$0	Free

Development Tool Costs

Item	Cost	Notes
Claude Code (Max Plan)	$200	/month
Obsidian	$0	Free
xreach CLI	$0	Free & open source

Total

Type	Monthly	Annual
Fixed costs	~¥46	~¥546
Tool costs	$200	$2,400
Total	~$200 + ¥46	~$2,400 + ¥546

💡 Key insight: Thanks to the free tiers from Vercel, Supabase, and Cloudflare, hosting the site costs essentially nothing. The main expense is the Claude Code Max subscription at $200/month — but it's not just a site-building tool. It's a core productivity tool I use daily for coding, writing, research, and more, making the overall ROI extremely high.

Lessons Learned

1. Vercel Serverless File Access

Problem: fs.readdirSync couldn't find Markdown files on Vercel Fix: Pre-build a JSON manifest and use static imports

2. Trailing Newlines in Environment Variables

Problem: Passwords set via echo | vercel env add had a trailing \n, causing 401 errors on the admin login Fix: Use .trim() when reading environment variable values

3. Image Path Compatibility Between Obsidian and the Site

Problem: Obsidian requires a relative path like public/blog/..., but the website needs /blog/... Fix: Write public/blog/... in Markdown; a custom img component in MDXRemote automatically strips the public/ prefix

4. Git Paths with Square Brackets in Zsh

Problem: Running git add src/app/[lang]/... in zsh throws "no matches found" Fix: Wrap the path in double quotes

5. Quotes in YAML Frontmatter

Problem: Chinese quotation marks inside titles caused gray-matter to fail parsing Fix: Use 「」 instead of embedded quotation marks

My Experience with Claude Code

99% of this site's code was generated by Claude Code. My role was closer to a product manager:

• Describing requirements and direction
• Reviewing generated code
• Testing features
• Reporting issues back to Claude Code for fixes

Where Claude Code shines:

• Understanding project context and making changes across multiple files
• Autonomously running builds, identifying errors, and fixing them
• Handling complex multi-file changes in a single conversation
• End-to-end support from requirements to deployment

Ideal use cases for Claude Code:

• Building new projects from scratch (framework, routing, components)
• Repetitive tasks (bulk blog post generation, adding tool entries)
• Bug fixes (provide the error message, it locates and fixes the issue automatically)
• Feature iteration (adding new functionality on top of existing code)

Conclusion

Building JasonZhu.AI proved one thing:

With the right AI tools, a single person can build and run a fully featured personal brand website in a very short time — for less than $25/month.

The keys to making it work:

1. Choose the right stack: The free tier combination of Next.js + Vercel + Supabase handles the vast majority of personal website needs
2. Leverage AI tools: Claude Code dramatically lowers the barrier to development, making it possible for non-frontend developers to build professional websites
3. Content is king: The tech is just the vehicle — consistently producing valuable content is what actually matters
4. Ship fast, iterate often: Get it live first, optimize later, and don't chase perfection

---

💡 If you're thinking about building a similar personal brand website, feel free to use this post as a reference for your tech decisions — or reach out through the Services page to chat.