从零搭建一个全栈博客，我踩了哪些坑
用 Astro + Supabase + Vercel 搭了一个自己的博客，折腾了两周，记录一下实际的技术选型和踩坑。
起因
之前一直用现成的博客系统，但总觉得哪里不对劲。想加个功能要翻半天文档，样式改来改去也就那几种。
后来想，不如自己搭一个。要求不高：能写文章、能管理、长得不丑就行。
技术选型纠结了一阵。Next.js 功能多但重，Hexo 只能生成静态页面，最后选了 Astro。原因很简单：默认生成静态页面，需要交互的组件直接丢 React 进去，不用全站跑在一个框架上。 部署用的 Vercel，git push 就自动上线。
实际用了什么
Astro 4.16 + React 18 + Tailwind CSS 3.4
Supabase（PostgreSQL 数据库）
Vercel Serverless（部署）
Supabase 主要是省事。之前试过自己搭 PostgreSQL，光是配连接池和 SSL 就折腾了半天。Supabase 帮你搞定了这些，还送个管理面板，够用了。
踩过的坑
1. 从内容集合迁移到数据库
一开始用 Astro 自带的内容集合，markdown 文件放在 src/content/posts/ 目录下，构建时自动生成页面。但这样做有个问题：每次改文章都得改文件，然后重新部署。
后来决定把所有内容迁到 Supabase。写了个 getPosts() 函数，所有页面统一从数据库查数据。原来的 11 个文件全部改了一遍，删掉了旧的 content collection 配置。
2. Markdown 渲染
Astro 的内容集合自带 markdown 转 HTML。迁移到 Supabase 后，正文存的是原始 markdown，渲染得自己搞。
一开始想在客户端用 marked 库，但发现 Astro 的 define:vars 和 ES module 的 import 冲突，脚本直接报错。最后改在服务端用 marked.parse() 转好，再用 set:html 输出，简单粗暴但管用。
3. 管理面板
第一版用 localStorage 存数据，只能本地用，换个浏览器就没了。
第二版想直接在 Supabase 控制台改，太丑了受不了。
第三版就是现在这个，7 个 Tab：数据看板、文章管理、项目管理、名言管理、站点设置、插件管理、主题外观。文章支持新建、编辑、删除，所有内容实时同步到 Supabase。
4. 四套主题
搞了四个主题：Light、Dark（极客绿）、Deep Blue（深夜蓝）、Eye Green（护眼绿）。用户切换后存 localStorage，下次访问自动加载。
SSR 渲染的时候拿不到 localStorage，页面会闪一下。解决方案是在 <head> 里加一段内联 JS，优先读 localStorage 设置 class，避免 FOUC。
博客实际有哪些功能
搭完之后数了一下，功能还挺多的：
- 首页：Hero 动画 + 打字机效果 + 最新文章列表
- 文章：分类筛选、标签过滤、分页、无限滚动
- 单篇文章：Markdown 渲染、LaTeX 公式、Mermaid 图表、代码高亮（Shiki github-dark 主题）、阅读进度条、目录导航
- 评论：Giscus（GitHub Discussions）
- 搜索：实时搜索，不用等
- 音乐：本地 MP3 + 网易云音乐双模式
- 项目展示：从 Supabase 读取
- 归档：时间轴视图
- 友链：链接管理
- 联系：表单提交到 Supabase
- 关于：3D 头像 + 随机名言 + 发文日历
- 分享：社交媒体分享按钮
- SEO：RSS 订阅、sitemap、Open Graph 标签
- 管理面板：/admin，全功能 CMS
部署
部署在 Vercel 上，SSR 模式。git push 到 main 分支就自动构建部署。
有个小坑：本地 Node.js 是 22，但 Vercel Serverless Functions 要求 Node.js 18，构建时会出一个警告，但不影响运行。
写在最后
搭博客这个过程，比想象中花的时间多。但好处是每个环节都过了一遍：数据库设计、API 设计、前端渲染、部署优化、SEO、安全。
比如 Supabase 的 service_role key，只能在服务端用，绝不能暴露给前端。比如 Vercel 的 Serverless Functions 是按需启动的，第一次访问会慢一点（冷启动）。
这些细节，看教程学不到，只有自己踩一遍才知道。
代码开源在 GitHub，欢迎交流。
评论
加载中...