从零搭建一个现代博客

在过去的一段时间里，我搭建了这个博客。它基于 Next.js 15 + Supabase + Tailwind CSS 构建，部署在 Vercel 上。这篇文章记录整个过程和技术选型的思考。

为什么自建博客

市面上有很多博客平台 —— Medium、Substack、掘金、知乎专栏。但作为工程师，我更想要：

• 完全控制：从设计到数据，一切自主
• 技术实践：博客本身就是一个完整的全栈项目
• 长期积累：内容归属于自己，不受平台迁移影响

技术栈选择

Frontend:   Next.js 15 (App Router) + TypeScript
Styling:    Tailwind CSS v4
Database:   Supabase (PostgreSQL + Auth + RLS)
Deployment: Vercel
Markdown:   react-markdown + rehype-highlight

为什么选 Next.js

App Router 带来了 Server Components，让页面性能和 SEO 开箱即用。配合 Vercel 的边缘网络，全球访问速度极快。

为什么选 Supabase

Supabase 提供了 PostgreSQL 数据库、身份认证、行级安全策略（RLS），一站式解决了博客的后端需求。最关键的是——免费额度完全够用。

功能清单

这个博客目前支持：

• 文章管理：Markdown 编写、标签、精选文章、草稿/发布
• 评论系统：支持嵌套回复、审核机制
• 后台管理：Dashboard 统计、文章 CRUD、评论审核、标签管理、菜单设置、站点设置
• 搜索：Cmd+K 全文搜索
• RSS 订阅：/feed.xml
• 多语言：中文/英文切换
• SEO：Meta 描述、OG Image、RSS 自动发现
• 代码高亮：基于 rehype-highlight
• 文章目录：长文自动生成 TOC
• 相关文章：基于标签匹配推荐

设计理念

设计灵感来自 Anthropic 官方博客——温暖的深色调、衬线体标题、有机的色彩卡片。追求的是编辑杂志感而非传统的技术博客风格。

核心原则：

• 大量留白，让内容呼吸
• 衬线体（Playfair Display）做标题，增加阅读质感
• 温暖的大地色系卡片，而非冰冷的纯黑白

接下来

这只是起点。后续计划：

• 接入网站分析（Umami / Plausible）
• 图片上传到 Supabase Storage
• 更完善的编辑器体验
• Newsletter 订阅功能

感谢你读到这里。如果你也在考虑自建博客，希望这篇文章能给你一些启发。