这个博客是怎么搭起来的？
2025-05-26 12:19
“记录内容的地方，本身也值得被记录。”
这一篇，是我写下第一篇博客之后的延续——
我想聊聊我眼前这个博客网站，它是怎么一步步搭建起来的，背后用了哪些技术，以及我做这些选择的理由。
核心框架：Next.js
我选择用 Next.js 作为博客的基础框架。
原因其实很简单：我希望这个博客是“前端驱动的”，但又不想陷入一堆复杂的构建配置中。而 Next.js 的零配置路由、SEO 友好的静态页面支持、灵活的 app 目录结构，刚好解决了我所有的需求。
我也对比过一些其他方案：
- 纯 React + Vite：轻量但缺乏 SSR 和 SEO 支持
- Astro：很新、很轻，但生态和社区还没有我熟悉的 Next.js 成熟
- Hexo / Hugo / Jekyll：偏传统，缺乏现代化交互（比如动画、React 组件）
最终，Next.js 的“现代 + 全栈 + 灵活”特性赢了我。
动效体验：Framer Motion
写博客虽然是内容为主，但我始终觉得视觉交互是让一个网站有“灵魂”的关键。
于是我用了 Framer Motion，这是我目前最喜欢的 React 动效库。相比 CSS 动画，它提供了：
- 更自然的过渡体验
- 路由切换时的进出场动画
- 在滚动或 hover 中添加微动效
我之前也用过 react-spring 和 GSAP，它们功能更强，但学习成本略高。Framer Motion 则像是动画界的 Tailwind，用起来很“顺手”。
内容系统：Markdown + gray-matter + ReactMarkdown
我希望博客的内容是用 Markdown 写的，而不是存数据库、写富文本编辑器。
所以我用了一套简单的组合：
gray-matter：读取 Markdown 文件的头部信息（title、date、tags 等）fs/promises+path：读取本地posts文件夹下的文章ReactMarkdown+remark-gfm：把 Markdown 渲染成 HTML，支持 GitHub 风格的语法
这种方式非常轻便，不需要管理后台，不需要登录系统。写一篇文章只要新建一个 .md 文件。
我觉得这也很符合博客的本质：专注于写，而不是构建系统本身。
邮件功能：Resend
除了写文章，我还希望读者可以和我联系，所以我加了一个“邮件联系”功能。
这里用的是 Resend，这是一个新兴的邮件 API 服务，主打简单、安全、为开发者友好。它直接支持 Next.js 的 Edge Runtime，调用 API 发信也非常直观。
为什么不用传统的 SMTP、SendGrid、Mailgun？原因也很简单：
- Resend 的入门门槛非常低
- 文档非常干净，没有营销成分
- 免费额度对我来说绰绰有余
我个人非常喜欢这种“少即是多”的工具。
部署与加速：Vercel + Cloudflare
博客部署在 Vercel，这是 Next.js 的母公司出品的部署平台，天然支持 Next.js 项目。每次我 git push，它就自动构建并上线，非常方便。
静态资源和页面缓存方面，我在 Vercel 之外加了一层 Cloudflare，用于：
- 自定义域名 DNS 解析
- 静态内容缓存加速
- 基础的 DDoS 保护和性能优化
这套组合对个人博客来说，几乎可以说是“无脑上车”，简单、稳定、免费、快速。
写在最后
搭建这个博客的过程并不复杂，但每一个技术选择我都有过思考。
不是为了“炫技”，而是希望它既对我好用，也对访客友好。
它可能没有花哨的功能，但对我来说，它是一块温暖的自留地。
写博客的过程，其实也在构建一个表达与连接的空间。
如果你也想搭建一个属于自己的博客，希望这篇文章能带来一些启发。如果有任何问题或想法，欢迎随时交流。我们可以一起，把想法写下来，把故事留下来。