图丙 Blog

Appearance

从 Hexo 被折腾到 VitePress：重建博客小记 ​

最近把博客从 Hexo 折腾到 VitePress，过程比想象中曲折一点，也顺便想清楚了几件事：

  • 框架可以随便换，但内容和结构一定要掌握在自己手里。
  • 能少折腾就少折腾，「好用 + 稳定」比「炫技」重要得多。
  • 博客这东西，最重要的不是主题有多花哨，而是写起来有没有阻力。

这篇就简单记一下这次重建博客的过程和一些感受。

1. 原来的世界：Hexo + GitHub Pages ​

最开始的博客是典型配置：

  • 框架：Hexo
  • 托管：GitHub Pages（仓库是 tuucc/tuucc.github.io）
  • 流程：本地 hexo new 写 Markdown → hexo g 生成静态文件 → 推到 GitHub

这套方案不算复杂，也比较成熟。问题出在——后来我想偷个懒，用了一些「一键改造」工具，结果把原来的主题和结构搞得稀碎：

  • 原来的 Hexo 源码被不小心删掉，只剩下生成后的静态文件；
  • 仓库里只有一堆 HTML/CSS/JS，看不到原来的 _config.yml、主题配置和文章源文件；
  • 想再改主题、再发文章，都变得非常别扭。

这一刻就很典型：

工具帮到一半跑了，后面只有你自己收拾残局。

2. 尝试补救：重新搭 Hexo（但心已经不在它那儿了） ​

为了把博客救回来，我在一台 LXC 容器里重新搭了一套 Hexo：

  • 新建了一个 hexo-src 作为源码目录；
  • 用 npx hexo init 初始化项目，默认主题、默认结构；
  • 用 Hexo 生成了一套新的静态站，覆盖到本地的 tuucc.github.io 上。

从结果上看，这一步是成功的：

  • 本地的 tuucc.github.io 变成了一份干净的 Hexo 默认主题站点；
  • 只要重新 init 一下 git，再 push 回 GitHub，线上就能恢复成一个正常的博客。

但做到一半，我突然发现一个问题：

我其实已经不太想继续用 Hexo 了。

不是 Hexo 有多不好，而是：

  • Node/npm 这一整套环境，动不动就一堆依赖和脚手架；
  • 我现在习惯在容器里折腾，越轻越好；
  • 再加上看到了一些基于 VitePress 的博客案例，视觉和体验更契合现在的审美。

于是，干脆不纠结，直接换路。

3. 换一条路：用 VitePress 重建 ​

最后选的方案是：

  • 在本地新建一个 VitePress 项目，专门用来写博客；
  • 把构建出来的静态文件，仍然部署到 tuucc.github.io 这个仓库；
  • 未来如果愿意，还可以无缝迁到 Vercel 之类的平台。

在 LXC 上做的大致步骤是：

  1. 创建 VitePress 博客项目：

    bash
    cd /root
mkdir -p vitepress-blog
cd vitepress-blog
npm init vitepress@latest docs
cd docs
npm install
npm run build

  2. VitePress 的输出目录大致是：

    bash
    /root/vitepress-blog/docs/docs/.vitepress/dist

  3. 用 rsync 把这个目录的内容同步到 tuucc.github.io：

    bash
    cd /root
rsync -av --delete vitepress-blog/docs/docs/.vitepress/dist/ tuucc.github.io/

    这样 tuucc.github.io 就从原来的 Hexo 静态站，变成了一个纯 VitePress 输出的站点。

  4. 最后只要在 tuucc.github.io 里 init git、加 remote、commit & push，GitHub Pages 就会自动刷新，博客正式切换到 VitePress。

从此以后：

  • 内容全部写在 VitePress 项目的 Markdown 里；
  • 主题和导航由 VitePress 的配置文件统一管理；
  • tuucc.github.io 只负责托管构建结果，不再混入任何手工修改。

4. 为什么最终选了 VitePress ​

这次重建里有几个取舍是比较明确的：

  1. 更贴近现在的技术栈和审美
    VitePress 基于 Vue 3 + Vite，文档站/博客站的体验都比较现代，主题风格也和我参考的那两篇 VitePress 搭建文章相似。

  2. 更清晰的「源代码 / 构建结果」分层
    这次踩坑的根源在于：源代码丢了，只剩下构建结果。
    换到 VitePress 之后，我会一直保持：

    • 源码在 vitepress-blog/docs；
    • 线上静态站在 tuucc.github.io；
    • 两者之间通过脚本 + rsync 严格区分。

  3. 未来扩展空间更大
    无论是加一点交互、组件，还是换主题、迁到 Vercel，VitePress 都更顺手一些，和前端生态也更贴近。

5. 以后我要怎么写 & 发一篇文章 ​

为了让这件事足够简单，我现在给自己定了一条规则：

写博客的流程要稳定到「我随时可以忘掉细节，只记住一两条命令」。

在这台 LXC 上，大致是这样：

  1. 在 VitePress 源码里写 Markdown：

    • 目录：vitepress-blog/docs/docs 下面，准备一个 blog/ 目录专门放文章；
    • 每一篇就是一个 blog/xxx.md。

  2. 生成静态文件：

    bash
    cd /root/.openclaw/workspace/vitepress-blog/docs
npm run build

  3. 同步到 tuucc.github.io 并推到 GitHub：

    bash
    cd /root/.openclaw/workspace
rsync -av --delete vitepress-blog/docs/docs/.vitepress/dist/ tuucc.github.io/

cd tuucc.github.io
git add .
git commit -m "Update blog"
git push

后面如果我懒得每次敲这三段命令，还可以再写一个脚本，把 build + rsync + git 提交封装成一条：

bash
./deploy-blog.sh

6. 一点小反思 ​

这次从 Hexo 到 VitePress 的折腾，最大的收获不在技术，而在习惯：

  • 不再把希望寄托在“神奇的一键工具”上，该自己掌握的结构一定要掌握在自己手里；
  • 框架只是壳，写东西才是核心；
  • 对于一个个人博客来说，「好看、好用、好维护」远比「功能最多」重要。

接下来，这个博客会主要记录几类内容：

  • 折腾环境和工具（LXC、OpenClaw、Skillhub、1Password、Navidrome 等）；
  • 一些自动化工作流的尝试（晨报、巡检、项目状态总结之类）；
  • 偶尔的碎碎念和复盘。

希望这次，能坚持比框架活得更久一点。

© 2026 图丙