Hexo + Butterfly 个人网站搭建全记录

一、准备工作

安装 Node.js

官网：https://nodejs.org
下载 LTS 版本，一路下一步安装

安装 Git

官网：https://git-scm.com
下载安装，全部默认选项

验证安装
打开命令行，输入以下命令，出现版本号即成功：

1
2
3

node -v
npm -v
git --version

二、本地搭建 Hexo

1. 安装 Hexo

1	npm install -g hexo-cli

2. 初始化博客

1
2
3

hexo init my-blog
cd my-blog
npm install

3. 本地预览

1	hexo server

浏览器打开 http://localhost:4000，看到默认页面即成功。

三、部署到 GitHub Pages

1. 创建 GitHub 仓库

仓库名必须为：用户名.github.io
选择 Public

2. 配置部署
打开 _config.yml，修改最后几行：

deploy:
  type: git
  repo: git@github.com:用户名/用户名.github.io.git
  branch: master

3. 安装部署插件

1	npm install hexo-deployer-git --save

4. 配置 SSH 密钥

1	ssh-keygen -t ed25519 -C "你的邮箱"

一路回车，然后复制公钥：

1	notepad ~/.ssh/id_ed25519.pub

去 GitHub → Settings → SSH and GPG keys → New SSH key，粘贴保存。

5. 部署

1	hexo clean && hexo generate && hexo deploy

访问 https://用户名.github.io 即可看到网站。

四、安装 Butterfly 主题

1. 下载主题

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

2. 安装依赖

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

3. 启用主题
打开 _config.yml，修改：

1	theme: butterfly

4. 创建主题配置文件

1	copy themes\butterfly\_config.yml _config.butterfly.yml

5. 语言改为中文
打开 _config.yml，修改：

1	language: zh-CN

五、配置 Gitee 图床

1. 创建 Gitee 仓库

2. 获取私人令牌

设置 → 私人令牌 → 生成新令牌
只勾选 projects 权限

3. 配置 PicGo

插件市场搜索 gitee，安装 gitee-uploader
图床设置 → Gitee，填入：
- repo：用户名/img-bed
- branch：master
- token：粘贴令牌
- path：images/
设为默认图床

4. 解决防盗链
打开 _config.butterfly.yml，找到 inject → head，添加：

1
2
3

inject:
  head:
    - '<meta name="referrer" content="no-referrer">'

图片链接格式

1	https://gitee.com/用户名/img-bed/raw/master/images/文件名.png

六、配置看板娘

1. 安装插件

1 2	npm install hexo-helper-live2d --save npm install live2d-widget-model-shizuku --save

2. 配置
打开 _config.yml，末尾添加：

live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-shizuku
  display:
    position: left
    width: 150
    height: 300
  mobile:
    show: true

七、绑定自定义域名

1. 购买域名
腾讯云或阿里云，搜索注册 .top 域名

2. DNS 解析
添加两条 CNAME 记录：

主机记录	记录值
`@`	`用户名.github.io`
`www`	`用户名.github.io`

3. GitHub 绑定

仓库 Settings → Pages → Custom domain
填入域名，保存

4. 创建 CNAME 文件
在 source/ 文件夹下新建 CNAME 文件，内容为你的域名，例如：

1	zju-weaver.top

八、Obsidian 写文章

1. 用 Obsidian 打开
打开 my-blog/source/_posts/ 作为仓库

2. 文章格式

---
title: 文章标题
date: 2026-07-08 20:00:00
tags:
  - 标签1
  - 标签2
---

正文内容...

![](https://gitee.com/用户名/img-bed/raw/master/images/xxx.png)

3. 一键部署
安装 Obsidian 插件 Shell Commands，创建命令：

1	cd C:\Users\用户名\my-blog && hexo clean && hexo generate && hexo deploy

绑定快捷键，写完即部署。

4.Obsidian 自动上传图片
（1）. 安装插件
Obsidian 插件市场搜索 Image auto upload，安装启用。

（2）. 配置插件

默认上传器：选 PicGo(app)
PicGo server 地址：http://127.0.0.1:36677/u
图片描述：选 移除

（3）. 确保 PicGo 后台运行
电脑右下角任务栏要有 PicGo 图标，Server 设置里开启 Server。

（4）. 使用
截图后直接 Ctrl + V 粘贴到 Obsidian，自动上传到 Gitee 并返回链接。

（5）. 注意
如果粘贴后出现 |650 等尺寸后缀，检查 Image auto upload 设置里的 图片大小后缀，保持为空。

九、日常维护

写新文章

1	hexo new "文章标题"

本地预览

1	hexo server

部署上线

1	hexo clean && hexo generate && hexo deploy