这个博客是怎么搭起来的？

2025-05-26 12:19

“记录内容的地方，本身也值得被记录。”

这一篇，是我写下第一篇博客之后的延续——
我想聊聊我眼前这个博客网站，它是怎么一步步搭建起来的，背后用了哪些技术，以及我做这些选择的理由。

核心框架：Next.js

我选择用 Next.js 作为博客的基础框架。

原因其实很简单：我希望这个博客是“前端驱动的”，但又不想陷入一堆复杂的构建配置中。而 Next.js 的零配置路由、SEO 友好的静态页面支持、灵活的 app 目录结构，刚好解决了我所有的需求。

我也对比过一些其他方案：

最终，Next.js 的“现代 + 全栈 + 灵活”特性赢了我。

写博客虽然是内容为主，但我始终觉得视觉交互是让一个网站有“灵魂”的关键。

于是我用了 Framer Motion，这是我目前最喜欢的 React 动效库。相比 CSS 动画，它提供了：

我之前也用过 react-spring 和 GSAP，它们功能更强，但学习成本略高。Framer Motion 则像是动画界的 Tailwind，用起来很“顺手”。

我希望博客的内容是用 Markdown 写的，而不是存数据库、写富文本编辑器。

所以我用了一套简单的组合：

这种方式非常轻便，不需要管理后台，不需要登录系统。写一篇文章只要新建一个 .md 文件。

我觉得这也很符合博客的本质：专注于写，而不是构建系统本身。

除了写文章，我还希望读者可以和我联系，所以我加了一个“邮件联系”功能。

这里用的是 Resend，这是一个新兴的邮件 API 服务，主打简单、安全、为开发者友好。它直接支持 Next.js 的 Edge Runtime，调用 API 发信也非常直观。

为什么不用传统的 SMTP、SendGrid、Mailgun？原因也很简单：

我个人非常喜欢这种“少即是多”的工具。

博客部署在 Vercel，这是 Next.js 的母公司出品的部署平台，天然支持 Next.js 项目。每次我 git push，它就自动构建并上线，非常方便。

静态资源和页面缓存方面，我在 Vercel 之外加了一层 Cloudflare，用于：

这套组合对个人博客来说，几乎可以说是“无脑上车”，简单、稳定、免费、快速。

搭建这个博客的过程并不复杂，但每一个技术选择我都有过思考。
不是为了“炫技”，而是希望它既对我好用，也对访客友好。

它可能没有花哨的功能，但对我来说，它是一块温暖的自留地。
写博客的过程，其实也在构建一个表达与连接的空间。

如果你也想搭建一个属于自己的博客，希望这篇文章能带来一些启发。如果有任何问题或想法，欢迎随时交流。我们可以一起，把想法写下来，把故事留下来。