使用 AI 搭建 Hexo + Next 主题博客

发表于 更新于 分类于 阅读次数： 本文字数： 1.7k 阅读时长 ≈ 6 分钟

使用 AI 搭建 Hexo + Next 主题博客

💡本文背景
本文记录了借助 AI 辅助，使用 Hexo 7.0.0 + Next 8.18.2 搭建个人博客的过程，包括主题配置、插件安装和功能开启。如果版本不一致，可能会有报错，请以实际版本为准。

📦 Hexo 安装配置

操作比较简单，可以直接参考 Hexo 官方配置文档。

1
2
3
4
5
6
7
# 全局安装 Hexo CLI
npm install -g hexo-cli

# 初始化博客项目
hexo init my-blog
cd my-blog
npm install

初始化完成后，执行以下命令即可在本地预览：

1
hexo server

浏览器访问 http://localhost:4000 即可看到博客。

🔢 版本说明

以下为本项目使用的依赖版本，供参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo-site@0.0.0
├── @waline/hexo-next@3.0.1
├── hexo-cli@4.3.1
├── hexo-deployer-git@4.0.0
├── hexo-generator-archive@2.0.0
├── hexo-generator-category@2.0.0
├── hexo-generator-index@3.0.0
├── hexo-generator-searchdb@1.4.1
├── hexo-generator-tag@2.0.0
├── hexo-renderer-ejs@2.0.0
├── hexo-renderer-marked@6.1.1
├── hexo-renderer-stylus@3.0.0
├── hexo-server@3.0.0
├── hexo-symbols-count-time@0.7.1
├── hexo-theme-landscape@1.0.0
├── hexo-theme-next@8.18.2
└── hexo@7.0.0

版本升级

如需升级 Hexo 及其插件，可以按以下步骤操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 1. 升级 Hexo CLI
npm install -g hexo-cli
hexo version

# 2. 检查项目依赖是否需要升级
npm install -g npm-check
npm-check

# 3. 升级项目依赖
npm install -g npm-upgrade
npm-upgrade

# 4. 更新全局插件
npm update -g

# 5. 清除缓存并重新生成
hexo clean && hexo g && hexo s

🎨 Next 主题配置

主要是修改 themes/next 文件夹内的 _config.yml 文件中的配置。

参考 Next 主题官方文档

开启阅读时长

第一步：安装插件

1
npm install hexo-symbols-count-time

第二步：修改 Hexo 主配置文件 _config.yml，添加以下内容：

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 3
  wpm: 200
  suffix: "mins."

第三步：确认 Next 主题配置文件中包含以下内容：

1
2
3
4
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
⚠️注意
配置完成后必须执行 hexo clean，否则阅读时长可能会显示 NaN。
1
hexo clean && hexo g && hexo s

搜索功能

第一步：安装插件

1
npm install hexo-generator-searchdb

第二步：在 Next 主题配置中开启本地搜索：

1
2
local_search:
  enable: true

开启访问数统计

在 Next 主题配置中开启：

1
2
busuanzi_count:
  enable: true

添加评论系统（Waline）

经过综合评估，选择了 Waline 作为评论系统，支持评论管理、邮件通知等功能。

第一步：注册和部署相关应用

参考官方文档：Waline 快速开始

第二步：安装 Waline 的 Hexo 插件

由于 Next 主题中没有内置 Waline 配置，需要安装官方插件：

1
npm install @waline/hexo-next

第三步：在 Next 主题配置中添加以下内容（注意修改 serverURL 为自己的服务端地址）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Waline
# For more information: https://waline.js.org/, https://github.com/walinejs/waline
waline:
  enable: true                        # 是否开启
  serverURL: 你的服务端地址              # 部署后获取的地址（如 Vercel 地址）
  placeholder: 请文明评论呀             # 评论框默认文字
  avatar: mm                          # 头像风格
  meta: [nick, mail, link]            # 自定义评论框输入项
  pageSize: 10                        # 分页评论数量
  lang: zh-cn                         # 语言
  visitor: false                      # 文章阅读统计（不要与 leancloud_visitors 同时启用）
  comment_count: true                 # 是否在主页显示评论数
  requiredFields: []                  # 评论必填项
  libUrl:                             # 自定义 CDN 地址（可选）

第四步：重新生成

1
hexo clean && hexo g && hexo s

登录注册评论后台

Waline 提供服务端评论管理功能：

  1. 在博客页面找到评论框，点击「登录」按钮
  2. 在弹出窗口中注册账户
  3. ==第一个注册的用户自动成为管理员==，所以部署好之后一定要及时注册
  4. 注册登录后即可对评论进行管理

开启 Mermaid 图表支持

Mermaid 可以帮助在 Markdown 中绘制流程图、时序图、甘特图等。

第一步：安装依赖

1
npm install hexo-filter-mermaid-diagrams

第二步：在配置中开启

1
2
mermaid:
  enable: true

第三步：在 Markdown 文件中使用



graph TD
    A[开始] --> B{是否安装成功?}
    B -->|是| C[🎉 开始写作]
    B -->|否| D[排查问题]
    D --> A




graph TD
Start --> Stop




sequenceDiagram
    participant 用户
    participant Hexo
    participant Next主题
    用户->>Hexo: hexo new "文章"
    Hexo->>Next主题: 应用主题样式
    Next主题-->>用户: 渲染博客页面

📋 总结

以下是搭建博客时安装的所有插件及其用途：

插件 用途
hexo-theme-next Next 主题
hexo-deployer-git Git 部署
hexo-generator-searchdb 本地搜索功能
hexo-symbols-count-time 文章字数和阅读时长
@waline/hexo-next Waline 评论系统
hexo-filter-mermaid-diagrams Mermaid 图表支持
ℹ️参考来源
本文基于 hexo-next主题配置方式 整理，结合 AI 辅助完善。

🤖 正文开始、如何让 Claude Code 一键搞定

💡思路转变
上面记录的是传统手工搭建的完整流程——每一步都需要查阅文档、手动编辑配置文件、逐条执行命令。如果使用 Claude Code（Anthropic 推出的 AI 编程助手），整个流程可以被大幅简化。

传统方式 vs Claude Code 方式

步骤 传统手工操作 Claude Code 方式
项目初始化 手动执行 hexo init、npm install 一句话指令，自动完成
主题安装 查文档 → 执行命令 → 手动改配置 自然语言描述需求，自动安装并配置
插件安装 逐个查找、安装、配置 批量安装，配置文件自动生成
功能调试 报错 → 搜索 → 试错 → 修复 自动检测问题并修复
版本升级 手动检查依赖 → 逐个升级 一条指令完成全部升级

简化后的操作步骤

只需要打开终端，启动 Claude Code，然后用自然语言描述你的需求即可：

1
2
3
# 1. 安装并启动 Claude Code
npm install -g @anthropic-ai/claude-code
claude

然后在 Claude Code 的交互界面中，依次描述需求：

1
2
3
4
5
6
7
8
9
10
11
# 第一步：初始化项目
> 帮我用 Hexo 7 初始化一个博客项目，安装 Next 主题

# 第二步：配置功能（可以一次性说完）
> 帮我开启以下功能：阅读时长统计、本地搜索、Mermaid 图表支持

# 第三步：添加评论系统
> 帮我配置 Waline 评论系统，服务端地址是 https://xxx.vercel.app

# 第四步：发布
> 帮我配置 Git 部署到 GitHub Pages，并完成首次发布
📌核心差异
  • 传统方式：需要理解每个配置项的含义、查阅文档、手动编辑 YAML、处理版本兼容问题
  • Claude Code 方式：用自然语言描述「我想要什么」，Claude Code 自动完成「怎么做」——包括安装依赖、修改配置、处理报错、验证结果

整个搭建过程从数小时的手工操作，缩短为几分钟的对话交互。

💬总结
本文记录的手工步骤，本质上是一份「理解原理」的参考文档。在实际搭建时，推荐使用 Claude Code 等 AI 工具——你只需要知道自己想要什么功能，剩下的交给 AI 来完成。