Jason ZhuJasonZhu.AI
EN
返回博客
Vibe Coding2026-04-12

JasonZhu.AI 搭建之路：技术栈、实现框架与费用全记录

#建站#Next.js#Claude Code#Vercel#Supabase

JasonZhu.AI 搭建之路：技术栈、实现框架与费用全记录

一个前AI算法工程师用AI工具搭建个人品牌网站的完整记录。从零开始，2天上线，持续迭代。

项目概览

JasonZhu.AI 是我的个人品牌网站，集博客、AI工具推荐、服务展示、Newsletter订阅于一体。目标是打造一个高效的AI内容发布和个人品牌展示平台。

指标数据
博客文章72篇
页面数7个主要页面（首页、博客、快讯、AI工具、服务、手册、关于）
代码文件33个TypeScript/React文件
代码行数~2500行（不含博客内容）
Git提交41次
首次提交2026-04-11
开发方式99% Claude Code 生成

技术栈

核心框架

技术版本用途
Next.js16.2.3React全栈框架，App Router
React19.2.4UI组件库
TypeScript5.x类型安全
Tailwind CSS4.x原子化CSS样式

内容系统

技术用途
Markdown (.md)博客文章格式
gray-matterFrontmatter解析（标题、分类、标签等）
next-mdx-remoteMDX/Markdown渲染
remark-gfmGitHub Flavored Markdown（表格、删除线等）
rehype-highlight代码语法高亮
rehype-slug标题锚点

后端服务

技术用途
Supabase数据库 + 存储（PostgreSQL）
Supabase Auth后台管理认证
Supabase Storage图片存储
Next.js API Routes后端接口

部署与运维

技术用途
Vercel托管部署（自动CI/CD）
GitHub代码仓库
CloudflareDNS + CDN

开发工具

工具用途
Claude CodeAI编程主力（99%代码生成）
Obsidian博客内容编辑器
xreach CLIX/Twitter推文读取（批量生成博客）

网站架构

jasonzhu.ai/
├── src/
│   ├── app/
│   │   ├── [lang]/           # i18n路由 (zh/en)
│   │   │   ├── page.tsx      # 首页
│   │   │   ├── blog/         # 博客列表 + 详情
│   │   │   ├── tools/        # AI工具推荐
│   │   │   ├── services/     # 服务展示
│   │   │   ├── handbook/     # 手册下载(Lead Magnet)
│   │   │   ├── news/         # AI快讯
│   │   │   └── about/        # 关于我
│   │   ├── admin/            # 后台管理
│   │   └── api/              # API接口
│   │       ├── subscribe/    # Newsletter订阅
│   │       ├── views/        # 文章浏览量
│   │       ├── likes/        # 文章点赞
│   │       └── admin/        # 后台管理API
│   ├── components/           # React组件
│   ├── content/blog/         # Markdown博客文章
│   ├── dictionaries/         # i18n翻译文件(zh/en)
│   ├── generated/            # 预构建生成文件
│   └── lib/                  # 工具函数
├── public/                   # 静态资源
├── scripts/                  # 构建脚本
└── supabase/                 # Supabase配置

核心功能实现

1. 博客系统：Markdown + 预构建JSON

最初用fs.readdirSync读取Markdown文件，但Vercel Serverless函数无法访问未被Webpack打包的文件。

解决方案：预构建JSON清单

  • scripts/generate-posts.mjs 在构建前读取所有.md文件
  • 生成 src/generated/posts.json 静态JSON
  • mdx.ts 直接import这个JSON，不依赖运行时文件系统
// package.json
"prebuild": "node scripts/generate-posts.mjs",
"build": "next build"

2. 国际化 (i18n)：中英双语

  • [lang] 动态路由段实现 /zh/ 和 /en/ 路径
  • src/dictionaries/zh.json + en.json 存储翻译文本
  • Middleware自动检测浏览器语言并重定向
  • 博客分类也有翻译映射（categoryMap）

3. 互动功能

  • 浏览量统计：Supabase page_views 表，访问自动+1
  • 点赞系统：Supabase page_likes 表，localStorage防重复点赞
  • 评论系统：Giscus（基于GitHub Discussions），零成本
  • Newsletter订阅：Supabase subscribers 表

4. 后台管理 (/admin)

  • 简单密码保护（环境变量ADMIN_PASSWORD）
  • 文章管理：查看所有文章，按分类/标签筛选
  • 文章链接：直接跳转网站页面或Obsidian编辑
  • 图片上传：上传到Supabase Storage
  • 订阅者管理：查看订阅者列表

5. Lead Magnet（手册下载）

  • 首页醒目的蓝色渐变CTA卡片
  • 填写邮箱后下载《AIP出海自媒体实战手册》PDF
  • 邮箱自动存入Supabase订阅表

内容生产工作流

X/Twitter推文 → xreach CLI读取 → Claude Code生成.md → Obsidian编辑 → git push → Vercel自动部署

这套工作流让我在短时间内从几篇文章扩展到72篇，覆盖9个分类：

分类文章数内容类型
观点15+AI行业思考
教程10+工具使用教程
出海10+SaaS出海复盘
Vibe Coding8+AI编程实践
营销增长8+增长策略
AI工具5+工具评测
书单推荐5+读书笔记
咨询培训5+企业AI培训
出入金3+支付方案

费用统计

固定成本

项目费用周期
域名 (jasonzhu.ai)¥1,0922年
Vercel (Hobby Plan)$0免费
Supabase (Free Plan)$0免费
GitHub$0免费
Cloudflare (Free Plan)$0免费
Giscus (评论)$0免费

开发工具成本

项目费用说明
Claude Code (Max Plan)$200/月
Obsidian$0免费
xreach CLI$0免费开源

总计

类型月费用年费用
固定成本~¥46~¥546
工具成本$200$2,400
合计~$200 + ¥46~$2,400 + ¥546

💡 核心发现：得益于Vercel、Supabase、Cloudflare的免费层，网站托管几乎零成本。主要支出是Claude Code Max订阅（$200/月），但它不仅用于建站，更是日常工作的核心生产力工具，覆盖编程、写作、研究等多个场景，综合ROI极高。

踩过的坑

1. Vercel Serverless文件访问

问题：fs.readdirSync在Vercel上找不到Markdown文件 解决：预构建JSON清单，静态import

2. 环境变量尾部换行符

问题：通过echo | vercel env add设置的密码末尾多了\n，导致后台登录401 解决：.trim()处理环境变量值

3. Obsidian与网站的图片路径兼容

问题：Obsidian要求相对路径public/blog/...，网站需要/blog/... 解决：Markdown中写public/blog/...，MDXRemote自定义img组件自动去掉public/前缀

4. Zsh中带方括号的Git路径

问题：git add src/app/[lang]/...在zsh中报"no matches found" 解决：用双引号包裹路径

5. YAML Frontmatter引号问题

问题：标题中包含中文引号导致gray-matter解析失败 解决：使用「」替代内嵌引号

Claude Code使用体验

整个网站99%的代码是通过Claude Code生成的，我的角色更多是产品经理：

  • 提需求和方向
  • 审查生成的代码
  • 测试功能是否正常
  • 反馈问题让Claude Code修复

Claude Code的优势：

  • 理解项目上下文，能跨文件修改
  • 自主运行构建、发现并修复错误
  • 一次对话可以完成复杂的多文件改动
  • 从需求到部署的全链路支持

适合Claude Code的场景：

  • 全新项目搭建（框架+路由+组件）
  • 重复性工作（批量生成博客、添加工具条目）
  • Bug修复（给出错误信息，自动定位并修复）
  • 功能迭代（在现有代码基础上添加新功能）

总结

JasonZhu.AI的搭建证明了一件事：

在AI工具的加持下，一个人可以在极短时间内搭建并运营一个功能完整的个人品牌网站，月成本不到$25。

关键在于：

  1. 选对技术栈：Next.js + Vercel + Supabase 的免费组合足以应对大部分个人网站需求
  2. 善用AI工具：Claude Code大幅降低了开发门槛，让非前端开发者也能搭建专业网站
  3. 内容为王：技术只是载体，持续产出有价值的内容才是核心
  4. 快速迭代：先上线，再优化，不追求完美

💡 如果你也想搭建类似的个人品牌网站，欢迎参考这篇文章的技术方案，或通过服务页面联系我咨询。

📬

订阅 Newsletter，免费获取完整手册

Subscribe即送《AIP出海自媒体实战手册》完整版，还有每周AI精选内容推送

我们尊重你的隐私，不会发送垃圾邮件。可随时退订。

Jason Zhu

前AI算法工程师 | AI博主

在 X 上关注我