003Hexo + Butterfly

以下是基于 Hexo + Butterfly 主题 从零搭建一个技术博客的完整流程，适合本地搭建并部署至 GitHub Pages，无需服务器：

✅ 一、环境准备

工具 安装命令/说明
Node.js 官网下载，安装 LTS 版本
Git 官网下载，安装并配置用户名邮箱
Hexo CLI npm install -g hexo-cli

验证安装：

1
2
3
node -v
git --version
hexo -v

✅ 二、初始化 Hexo 项目

1
2
3
4
hexo init myblog
cd myblog
npm install
hexo server  # 本地预览：http://localhost:4000

✅ 三、安装并启用 Butterfly 主题

1. 安装主题（推荐 npm 方式）

1
npm install hexo-theme-butterfly

2. 启用主题

编辑根目录下的 _config.yml：

1
theme: butterfly

✅ 四、配置 Butterfly 主题

1. 创建 Butterfly 配置文件

复制一份主题配置到根目录下：

1
cp node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml

之后所有 Butterfly 主题配置都在 _config.butterfly.yml 中修改

2. 创建分类 / 标签 / 关于页面

1
2
3
hexo new page categories
hexo new page tags
hexo new page about

编辑对应页面的 index.md，例如：

1
2
3
4
5
---
title: 分类
type: categories
comments: false
---

✅ 五、写文章

1
hexo new post "我的第一篇技术博客"

文章位于 source/_posts/，使用 Markdown 编写，支持 YAML 前置信息：

1
2
3
4
5
6
7
---
title: 我的第一篇技术博客
date: 2025-08-01 10:00:00
tags: [Hexo, 教程]
categories: 技术博客
---

✅ 六、部署到 GitHub Pages

1. 安装部署插件

1
2
npm install hexo-deployer-git --save

2. 配置 _config.yml

1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: main

3. 部署

1
2
hexo clean && hexo generate && hexo deploy

访问：https://你的用户名.github.io

✅ 七、可选优化（进阶）

功能 配置入口文件 说明
评论系统 _config.butterfly.yml 支持 Valine、Twikoo、Giscus
网站图标/背景图 _config.butterfly.yml 设置 favicon、background
本地搜索 安装插件 hexo-generator-search
代码高亮 主题已集成 Prism.js
统计功能 支持百度/Google Analytics

✅ 八、常用命令速查

操作 命令
本地预览 hexo server
清除缓存 hexo clean
生成静态文件 hexo generate
部署到 GitHub hexo deploy
一键三连 hexo clean && hexo g -d

如需进一步美化或功能扩展，可参考 Butterfly 官方文档 或主题美化教程。

如果你有具体想集成的功能（如评论、搜索、图床、CDN），可以继续问我。