第 1 章
看到别人的博客之后,我推倒重来了
妲学笔记有过两个版本。之前的版本是一个完整的全栈博客系统,而现在改成纯前端了。
第一个版本
2025 年 12 月,由于没有开发项目,也没太大的机会出来实习,我开始着手准备自己的个人项目,选中了个人博客这个方向。主要理由一是记录自己,二是提升开发能力。经过两周左右的密集工作(AI Vibe Coding,当时还是手动粘代码,没有用 Agent),我完成了妲学笔记第一个版本的开发与上线。
整体包括三个 Docker 容器——前端、后端、数据库。后端用 FastAPI + SQLAlchemy,前端用 React 18 + React Router,数据库用的 MySQL。我自己购买了阿里云的 ECS 云服务器,买了域名,做了 ICP 备案和公安备案。终于能在网页上看到它了。
由于我是第一次做没有啥经验,整体看起来呆呆的。出于学习目的,我没有用那种一键建站的博客框架,而是坚持手搓:做了管理后台的登录与验证,做了文章的草稿/发布状态,还做了一个在线 Markdown 编辑器,粘贴截图能自动上传到自建图床。文章 + 合集的数据库建模倒是挺有创意的,还做了章节排序和搜索功能。
最终我的网站于 2025 年 12 月 25 日成功上线。
契机
跑了大半年,没出过大问题,功能够用。直到有一天我看到了别人做的博客——jerrygao.cn,感觉效果比我好多了。调查之后发现这个网站是 Next.js 一把梭,效果却比我完整前后端 + 数据库好得多。
于是开始反思我到底需要一个什么样的博客。仔细想想,之前的三容器更多是"为了学前后端开发、学数据库、学 CI/CD 来做博客",而不是在交付一个自己真的需要、真的好用的产品。
使用体验上也确实越来越别扭:每次改文章要打开浏览器登后台,但我本地有 Typora,写 Markdown 的体验远好于任何网页编辑器;文章内容本质上就是文本文件,放数据库里备份要 mysqldump、版本历史看不到,不如直接用文件 + git;三个容器常驻跑着服务几十篇静态文章;React 单页应用初始 HTML 是空的,搜索引擎爬虫看到的就是空壳。
推翻重来
2026 年 8 月,决定重做。想把时间花在设计和内容上,后端能不要就不要了。
技术栈换成了 Next.js + MDX + Tailwind CSS。选 Next.js 是因为它能静态导出,解决 SEO 问题,而且复用 React 的经验;选 MDX 是因为内容变成文件之后 git 直接管版本,不需要数据库了;Tailwind 写样式比之前手写 BEM 命名的 CSS 快很多。搜索换成了 Pagefind,构建时生成索引,浏览器端直接搜,不需要后端 API。评论系统用了 Twikoo,自托管在服务器上,独立部署。
没有选 Hexo / Hugo(模板引擎不够灵活,想用 React 组件嵌在文章里)、WordPress(又回到数据库管内容的老路)、Vercel(保留国内 ECS,照顾访问速度和 ICP 备案)。
砍掉了不少东西:FastAPI 后端、MySQL 数据库、JWT 认证和管理后台、网页端的 Markdown 编辑器、三容器的 Docker Compose、后端搜索 API、自建图床的 API 端点。每一个都不是因为做不了,是想清楚了不需要——静态站没有运行时请求,内容用文件管就行,编辑器用 Typora 更好,图片 SFTP 传上去 Nginx 直接服务。
砍掉的比留下的多,但该有的都有。
现在的版本
现在的版本清爽多了。静态 HTML,塞在一个 Nginx 容器里,数据库和后端都不需要。
对于内容创作,直接修改文件夹目录、在 Typora 里改 .mdx 文件就好,写完 git push,自动触发 CI/CD。之前那套登后台、在网页编辑器里改、点保存的流程全没了。更让我安心的是再也不用担心备份——文章就是本地文件,天然有全量备份,git 仓库又是一层备份,不会出现数据库没备份然后文章全丢的情况。
内容的组织方式也变了——每个合集是一个文件夹,每篇文章是一个文件:
content/
├── blog-building/ ← 你正在读的这个合集
│ ├── _meta.json ← 合集配置(标题、描述、封面)
│ └── 1-架构演进.mdx ← 这篇文章
├── leetcode/
│ ├── _meta.json
│ ├── 1-两数之和.mdx
│ └── ...(50 篇)
└── ...
想开一个新合集,建个目录、写一个配置文件就行,不用动代码。你现在读的这个"个人博客搭建"合集就是这么建起来的。
留言区待配置
部署 Twikoo 后端后,设置环境变量 NEXT_PUBLIC_TWIKOO_ENV_ID