手帐纸质风博客搭建记：Hexo 与 FlatPaper 主题调优 | VueWeb 随笔

搭建个人独立博客有很多种选择，从 WordPress 到 Hugo、Astro，再到久经考验的 Hexo。这次之所以选择 Hexo 配合 FlatPaper 主题，很大程度上是被它温润、带有纸面肌理的手帐风格所吸引。

这篇文章记录下整个站点的搭建历程，包括自定义域名配置、双分支协作流以及主题特性的调优要点。

为什么选择 FlatPaper 主题？

市面上大部分技术博客主题大多走极简科技风或 Material Design，但看多了容易产生视觉疲劳。FlatPaper 的不同之处在于：

• 纸张质感：页面底色微黄，带有细微的纸张噪点与撕纸毛边效果。
• 便签与胶带元素：文章标签像手撕胶带，提示块（Note）像随手贴上的便签纸。
• 安静的交互：没有过于浮夸的动效，阅读时注意力能完全集中在文字本身。

---

核心架构与 Git 双分支工作流

在将博客托管到 GitHub Pages 时，一个常见痛点是：编译后的静态网页与未编译的 Hexo 源码容易混在一起。

本站采用了优雅的双分支管理方案：

分支协作心法

• source 分支：存放 Hexo 完整源码（Markdown 文章、配置文件、主题等）。日常写文章只需提交并推送至该分支。
• main 分支：由 hexo-deployer-git 插件在执行 hexo deploy 时自动将 public/ 的编译产物强制推送至此处，专门供给 GitHub Pages 访问。我们永远不需要手动修改它。

日常更新发布只需一行命令：

# 本地编译并一键发布上线
hexo clean && hexo g --config _config.yml,_config.flatpaper.yml && hexo d --config _config.yml,_config.flatpaper.yml

---

自定义域名与 CNAME 配置

绑定自己的域名（如 www.vueweb.cn）时，最稳妥的做法是将 CNAME 文件放在 source/CNAME 下：

www.vueweb.cn

这样每次 Hexo 编译时，都会自动将 CNAME 复制到生成的 public/ 根目录下，不会因为执行了 hexo clean 而被意外清除导致域名解绑。

---

总结

一个舒服的写作环境能极大提升记录的欲望。接下来本站会围绕前端工程、日常踩坑和设计思考持续更新，欢迎订阅 RSS 一同交流。