记录一下本站的搭建过程,方便日后重建或迁移。

为什么选 Hexo

  • 纯静态:构建产物就是 HTML/CSS/JS,不需要常驻进程,扔给 nginx 就能跑
  • Markdown 写作:文章就是一个个 .md 文件,好备份、好迁移、好版本管理
  • 生态成熟:Butterfly 等主题功能完善,搜索、RSS、归档开箱即用

对比过 Hugo,速度更快,但 Hexo 的 Node 工具链在本机已经验证可用(npm 走国内镜像很稳),模板定制也更顺手,最终选了它。

初始化

1
2
3
4
5
6
7
npm install -g hexo-cli        # 或使用 npx hexo-cli
hexo init blog
cd blog
npm install

# 主题走 npm 安装,不依赖 GitHub 直连
npm install hexo-theme-butterfly hexo-generator-search hexo-generator-feed hexo-wordcount

站点根目录放一个 _config.butterfly.yml,即可覆盖主题默认配置,主题升级不会丢定制。

关键配置

1
2
3
4
# _config.yml
url: https://example.com
permalink: posts/:title/   # 短链,按文件名生成
theme: butterfly
1
2
3
4
5
# _config.butterfly.yml
darkmode:
  enable: true
  button: true
display_mode: dark          # 默认深色

深色科技风定制

想和站点首页风格统一,核心是三层:

  1. 变量覆盖:在自定义 CSS 里覆盖主题的 CSS 变量(--global-bg、--card-bg 等),把底色换成 #060a13
  2. 毛玻璃:给卡片和导航加 backdrop-filter: blur() + 半透明背景 + 细描边
  3. 背景特效:用几行 JS 注入网格线和三颗模糊渐变光球,animation 让它们慢慢漂浮
1
2
3
4
html[data-theme='dark'] {
  --global-bg: #060a13;
  --card-bg: rgba(15, 23, 42, 0.55);
}

日常写作

1
2
3
hexo new "文章标题"     # 在 source/_posts 生成 md
hexo clean && hexo g    # 清理并构建
hexo s                  # 本地 http://localhost:4000/blog/ 预览

现在博客挂在本站 /blog/ 子路径,管理员登录门户后可直接在 /blog/admin/ 在线发布。

剩下的就是坚持写了。