前言

很早之前就想搭一个属于自己的博客，但一直停留在“想做”的阶段。

这篇文章主要记录我使用 Hexo + Butterfly 搭建博客的过程，一方面作为备忘，另一方面也算是这个博客的起点。

关于技术选型

一开始我也考虑过很多方案，比如 WordPress，或者干脆用前端框架自己写一套。
但综合考虑之后，还是选择了 Hexo。

原因其实很简单：
Hexo 是静态博客，结构清晰，写文章就是写 Markdown，不需要关心数据库和后端服务。对目前的我来说，这种“专注写作本身”的方式更合适。

在主题方面，我选择了 Butterfly。这个主题整体风格简洁，配置项比较全，文档也比较完善，适合长期维护。

Hexo 的安装与初始化

本地环境准备好 Node.js 和 Git 之后，就可以直接安装 Hexo CLI。

1
npm install -g hexo-cli

接着初始化博客目录：

1
2
3
hexo init blog
cd blog
npm install

随后在 themes 目录下克隆主题仓库：

1
git clone https://github.com/jerryc127/hexo-theme-butterfly.git

然后在站点配置文件 _config.yml 中，把主题改成：

1
theme: butterfly

接下来便是完善一些基础配置和页面。

添加 Live2D 小人

为了让博客更有趣一些，我在右下角添加了一个 Live2D 小人。Butterfly 主题支持通过代码注入的方式快速集成。

配置方法

打开 themes/butterfly/_config.yml，找到 inject 配置段，在 bottom 部分添加以下代码：

1
2
3
4
5
6
inject:
  head:
    # ... 其他配置
  bottom:
    - '<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script>'
    - '<script>L2Dwidget.init({ model: { jsonPath: "https://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json" }, display: { position: "right", width: 150, height: 300, hOffset: 30, vOffset: -10 }, mobile: { show: true, scale: 0.6 }, react: { opacityDefault: 0.8, opacityOnHover: 0.2 } });</script>'

参数说明

  • model.jsonPath：角色模型的 CDN 地址，这里使用的是 Shizuku（时雨）模型
  • display.position：显示位置（left/right），这里设为右下角
  • display.width/height：模型宽高（像素）
  • display.hOffset/vOffset：水平和垂直偏移量
  • mobile.show：是否在移动端显示
  • mobile.scale：移动端缩放比例
  • react.opacityDefault：默认透明度
  • react.opacityOnHover：鼠标悬停时的透明度（0.2 表示鼠标移上去会变淡）

可选模型

除了 Shizuku，还可以选择其他模型：

1
2
3
4
5
6
7
8
// Koharu（小春）
"https://cdn.jsdelivr.net/npm/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json"

// Hibiki（响）
"https://cdn.jsdelivr.net/npm/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json"

// Miku（初音未来）
"https://cdn.jsdelivr.net/npm/live2d-widget-model-miku@1.0.5/assets/miku.model.json"

只需要替换 jsonPath 的值即可切换角色。