Hexo 博客搭建、Fluid 主题与 Live2D 使用教程

如果你想搭一个不需要后端服务器、写 Markdown 就能发布文章的个人博客，选 Hexo 就对了。

这篇文章会带你完成三件事：

1. 从零搭一个 Hexo 博客
2. 把默认主题换成 Fluid
3. 给博客接入 Live2D

一、先搭一个 Hexo 博客

Hexo 本质上是一个静态博客框架。你平时写的是 Markdown，生成出来的是静态 HTML 文件，所以它很适合部署到 GitHub Pages、Vercel、Netlify 这类静态托管平台上。

Hexo 官方文档：
https://hexo.io/zh-cn/docs/

1. 准备环境

在开始之前，先准备两样东西：

• Node.js
• Git

Node.js 用来安装和运行 Hexo，Git 用来管理博客源码和部署代码。两者装好之后，先在终端里确认版本：

node -v
git --version

2. 安装 Hexo CLI

安装 Hexo 命令行工具：

npm install -g hexo-cli

安装完成后，可以检查一下是否成功：

hexo -v

3. 初始化博客项目

找一个你准备存放博客源码的目录，然后执行：

hexo init myblog
cd myblog
npm install

初始化完成后，本地启动博客：

# hexo s 其实是 hexo server 的缩写
hexo s

默认访问地址是：

http://localhost:4000

能看到默认页面，就说明本地博客已经跑起来了。

4. 常用的本地命令

这几个命令你后面会经常用到：

新建文章：

# 用命令行新建文章，Hexo 会帮你在 source/_posts 里生成一个 Markdown 文件，当然你也可以直接在那个目录里新建 Markdown 文件
hexo new post "first-blog"

启动本地预览：

hexo s

生成静态文件：

# 生成静态html文件，默认会放在 public 目录里
# hexo g 是 hexo generate 的缩写
hexo g

清理缓存后重新生成：

hexo clean
hexo g

Hexo 默认会把文章放到：

source/_posts

所以你后面写博客，主要就是在这个目录里维护 Markdown 文件。

5. 部署到 GitHub Pages

你可以把博客免费托管在 GitHub Pages，上手成本很低。

先安装部署插件：

npm install --save hexo-deployer-git

然后在 GitHub 上创建仓库。

如果你要用个人主页形式访问，仓库名建议直接建成：

[你的 GitHub 用户名].github.io

接着修改博客根目录的 _config.yml，把 deploy 配置补上：

deploy:
  type: git
  repository: [email protected]:yourname/yourname.github.io.git
  branch: main

然后执行：

# 生成静态文件
hexo g
# 部署到 GitHub Pages
hexo d

部署完成后，稍等几分钟，就可以通过你的 GitHub Pages 地址访问博客了。

6. 绑定自己的域名

这一步是可选的。如果你想让博客看起来更像一个正式站点，可以绑定自己的域名。

基本流程是：

1. 买一个域名
2. 在域名解析里把域名指向 GitHub Pages
3. 在 source 目录下新建一个 CNAME 文件
4. 文件内容写你的域名，不带 http:// 和路径

例如：

bestkele.com

重新部署之后，域名生效了就可以直接通过自己的域名访问博客。

二、把默认主题换成 Fluid

Hexo 默认主题能用，但是太丑了，我们换个漂亮的主题吧。

建议直接用 Fluid，文档完整、配置清晰、中文环境友好，而且它对个人博客这种场景支持得非常成熟。

Fluid 官方资源：

• 官方文档：https://hexo.fluid-dev.com/docs/
• 配置指南：https://hexo.fluid-dev.com/docs/guide/
• GitHub 仓库：https://github.com/fluid-dev/hexo-theme-fluid

1. 安装 Fluid 主题

直接通过 npm 安装：

npm install --save hexo-theme-fluid

2. 在 Hexo 里启用主题

打开博客根目录的 _config.yml，把主题改成：

theme: fluid
language: zh-CN

这里的 language 会影响主题界面的文案语言。

3. 创建 _config.fluid.yml

这一步很重要。

很多人换主题时，第一反应是直接去改：

themes/fluid/_config.yml

虽然这么改也能生效，但并不推荐。因为以后你升级主题时，这个文件很容易被覆盖。

更稳妥的做法是：

1. 在博客根目录新建 _config.fluid.yml
2. 把 themes/fluid/_config.yml 里的内容复制过去
3. 以后主要改根目录这份 _config.fluid.yml

这样做的好处是，主题更新和你自己的站点配置分得更清楚。

4. 先配一份最常用的基础配置

下面这份配置不是官方完整示例，而是一份更适合个人博客起步的精简版：

index:
  banner_img: /image/wallpaper.png
  banner_img_height: 60
  slogan:
    enable: true
    text: Move forward, or you'll fall behind

navbar:
  blog_title: "你的博客名"

post:
  banner_img_height: 60
  updated:
    enable: true

footer:
  beian:
    enable: false

有了这份配置，首页横幅、导航标题、文章页头图高度这些常用项就已经能控制起来了。

5. 创建关于页

Fluid 主题里，“关于页”通常不是直接新建一个普通 Markdown 文件，而是先新建页面：

hexo new page about

然后修改生成出来的文件：

source/about/index.md

给它加上 layout: about：

---
title: 关于
layout: about
---

正文部分再按你自己的情况写就行。

6. 文章里怎么使用封面图

如果你想让首页文章列表和文章详情页都有更完整的视觉效果，可以在文章头部加这两个字段：

---
title: 文章标题
index_img: /image/article/demo/cover.jpg
banner_img: /image/article/demo/cover.jpg
---

三、在 Hexo 博客里使用 Live2D

Live2D 可以理解成网页角落里的二次元看板娘。它不是博客必须要有的功能，但是加上去很好看哦。

这篇文章使用的是：

• hexo-helper-live2d
• live2d-widget-model-hibiki

插件仓库地址：
https://github.com/EYHN/hexo-helper-live2d

这里要提醒一下：目前这个仓库已经是归档状态，也就是只读、不再活跃维护。不过现有项目通常还能继续用的。

1. 安装 Live2D 插件和模型

在博客根目录执行：

npm install --save hexo-helper-live2d
npm install --save live2d-widget-model-hibiki

第一条是插件本体，第二条是角色模型。

2. 在 _config.yml 里添加配置

安装好之后，在博客根目录 _config.yml 里加上 live2d 配置：

live2d:
  model:
    use: live2d-widget-model-hibiki
  display:
    position: right
    width: 150
    height: 320
    hOffset: 20
    vOffset: 10
  mobile:
    show: false
    scale: 0.5

这一段的意思分别是：

• model.use：指定你要使用哪个模型
• display.position：角色显示在左下角还是右下角
• width / height：角色尺寸
• hOffset / vOffset：离页面边缘的偏移量
• mobile.show：手机端是否显示

3. 更换 Live2D 模型

如果你不想用 hibiki，可以换别的模型包：

1. 安装新的模型包
2. 把 model.use 改成新的包名

例如：

npm install --save live2d-widget-model-shizuku

然后改配置：

live2d:
  model:
    use: live2d-widget-model-shizuku

除了 npm 包模式，这个插件还支持：

• 直接使用本地模型目录
• 使用自定义模型路径
• 使用自定义模型 URL

如果你想折腾更多模型，可以再去看插件文档。