使用Hexo搭建个人博客指南（Butterfly主题版）

本教程将指导你使用Hexo搭建支持Butterfly主题的博客，并配置分类和标签功能。

环境准备

1. 安装Node.js

如果已安装请跳过此步骤。

访问Node.js官网下载LTS版本：

  • Windows用户：双击.msi安装包默认安装
  • Mac用户：推荐使用brew安装 brew install node
  • Linux用户：sudo apt install nodejs npm

安装后验证：

node -v  # 应显示v18.x或更高
npm -v   # 应显示9.x或更高

2. 安装Git

访问Git官网下载：

  • Windows：勾选”Add to PATH”选项
  • Mac：brew install git
  • Linux：sudo apt install git

验证安装：

git --version  # 应显示2.x或更高

3. 配置SSH密钥（部署需要）

ssh-keygen -t ed25519 -C "your_email@example.com"
cat ~/.ssh/id_ed25519.pub  # 复制到GitHub/GitLab的SSH设置

Hexo初始化

1. 安装Hexo CLI

npm install -g hexo-cli

2. 创建项目

hexo init myblog  # 替换myblog为你的项目名称
cd myblog
npm install

3. 目录结构说明

.
├── _config.yml     # 主配置文件
├── source          # 文章/页面目录
├── themes          # 主题目录
├── public          # 生成的静态文件
└── package.json    # 依赖管理

Butterfly主题配置

1. 安装主题

npm install hexo-theme-butterfly

2. 启用主题

修改 _config.yml：

theme: butterfly

3. 分类/标签设置

创建分类页面：

hexo new page categories

编辑 source/categories/index.md：

---
title: 文章分类
type: categories
comments: false
---

创建标签页面：

hexo new page tags

编辑 source/tags/index.md：

---
title: 文章标签
type: tags
comments: false
---

编写文章示例

新建文章：

hexo new "我的第一篇博客"

编辑 source/_posts/我的第一篇博客.md：

---
title: 我的第一篇博客
date: 2025-03-13 20:00:00
categories:
  - [技术, Hexo]
  - [日常]
tags:
  - 博客搭建
  - 教程
---

恭喜！你的Butterfly主题博客已就绪！

高级功能

1. 主题样式定制

创建 _config.butterfly.yml：

# 分类图标
category_icon:
  default: fas fa-folder
  技术: fas fa-code

# 标签云
tag_cloud:
  min: 12
  max: 30
  unit: px

2. 本地调试

hexo clean && hexo g && hexo s

访问 http://localhost:4000 查看效果

3. 部署到GitHub Pages

参考链接：GitHub Pages部署

  1. 安装部署插件：
npm install hexo-deployer-git --save
  1. 修改配置：
# _config.yml
deploy:
  type: git
  repo: git@github.com:用户名/用户名.github.io.git
  branch: main
  1. 执行部署：
hexo deploy

常见问题

Q1: 页面显示404？

  • 执行 hexo clean 清除缓存
  • 确认分类/标签页面类型设置正确

Q2: 图标不显示？

  • 检查主题配置的Font Awesome版本
  • 确保分类名称与配置完全一致

Q3: 部署失败？

  • 确认SSH密钥已正确配置
  • 检查仓库权限设置

提示：可使用 hexo server -p 5000 指定其他端口

更多功能参考：Butterfly官方文档 Hexo官方文档

本文由Hexo驱动，Butterfly主题渲染