部署butterfly主题的Hexo博客系统

本次部署是在Windows底下的WSL虚拟机里部署的。

一、部署环境

主机环境
Windows 11 企业版 24H2
WSL 版本： 2.4.13.0
Node v22.14.0
Git 2.47.1

虚拟机环境
Ubuntu 24.04.2 LTS
Node v22.14.0
Git 2.43.0
hexo: 7.3.0
os: linux 5.15.167.4-microsoft-standard-WSL2 Ubuntu 24.04.2 LTS

二、部署路径

hexo路径：\wsl.localhost\Ubuntu\home\xuan
blog路径：/home/xuan/blog

三、部署过程

1. 安装node.js和git

1
2
3
4
5
6
7
8
9
# 更新源
sudo apt update && sudo apt upgrade
# 更新npm
sudo npm install -g npm@11.2.0

# 安装node
sudo apt-get install -y nodejs
# 安装git
sudo apt install git

2. 安装hexo

1
2
3
4
5
6
7
8
9
10
11
~$ sudo npm install hexo
~$ echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
~$ hexo init blog

~$ cd blog
~/blog$ npm install

~/blog$ hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

3. 安装主题butterfly

1
2
3
4
5
6
7
8
9
10
11
参考文档：https://butterfly.js.org/posts/21cfbf15/

cd ~/blog
# 下载主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

# 应用主題
修改 Hexo 根目录下的 _config.yml，把主題改為 butterfly
theme: butterfly
# 安裝插件
npm install hexo-renderer-pug hexo-renderer-stylus --save

4. 运行hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Hexo：清理/生成/发布/启动
xuan@xuan:~/blog$ hexo clean
xuan@xuan:~/blog$ hexo generate
xuan@xuan:~/blog$ hexo deplay
xuan@xuan:~/blog$ hexo server
INFO  Validating config
INFO
  ===================================================================
      #####  #    # ##### ##### ###### #####  ###### #      #   #
      #    # #    #   #     #   #      #    # #      #       # #
      #####  #    #   #     #   #####  #    # #####  #        #
      #    # #    #   #     #   #      #####  #      #        #
      #    # #    #   #     #   #      #   #  #      #        #
      #####   ####    #     #   ###### #    # #      ######   #
                            5.3.5
  ===================================================================
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

四、建立本地git仓库与github的ssh连接

设置git用户信息

1
2
git config --global user.email "friendxuan@163.com"
git config --global user.name "friendxuan"

步骤1：生成 SSH 密钥

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
ssh-keygen -t ed25519 -C "friendxuan@163.com"
文件：~/.ssh/id_ed25519
ssh-keygen -t rsa -b 4096 -C "friendxuan@163.com"
文件：~/.ssh/id_rsa
按提示保存密钥文件（默认路径为 ~/.ssh/id_ed25519 或 ~/.ssh/id_rsa）。
设置一个密码（可选）。

xuan@xuan:~$ ssh-keygen -t ed25519 -C "friendxuan@163.com"
Generating public/private ed25519 key pair.
Enter file in which to save the key (/home/xuan/.ssh/id_ed25519):
Created directory '/home/xuan/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/xuan/.ssh/id_ed25519
Your public key has been saved in /home/xuan/.ssh/id_ed25519.pub
The key fingerprint is:
SHA256:7C9d6/A9LnqxkoLZybKFbtjVXXOQ04Rkfs5Brs3G5fA friendxuan@163.com
The key's randomart image is:
+--[ED25519 256]--+
|             .o*.|
|             oB .|
|              o=o|
|       .      BB+|
|        S. . o BE|
|       o. . + .  |
|     o.*oo.o +   |
|    ..*.*.+o=..  |
|     .oo oo=ooo. |
+----[SHA256]-----+

步骤 2：添加 SSH 密钥到 GitHub

1
2
3
cat ~/.ssh/id_ed25519.pub
登录 GitHub 账户，进入 Settings > SSH and GPG keys > New SSH key。
将公钥粘贴到 Key 字段中，并为其命名，然后保存。

步骤 3：修改本地仓库的远程地址

1
2
将现有的 HTTPS 远程地址替换为 SSH 地址：
git remote set-url origin git@github.com:friendxuan/friendxuan.github.io.git

步骤 4：测试连接

1
2
3
4
5
6
7
8
9
10
11
运行以下命令以验证 SSH 配置是否正确：
ssh -T git@github.com
如果看到类似以下输出，则配置成功：
Hi friendxuan! You've successfully authenticated, but GitHub does not provide shell access.

xuan@xuan:~/blog$ ssh -T git@github.com
Hi friendxuan! You've successfully authenticated, but GitHub does not provide shell access.


xuan@xuan:~/blog$ hexo clean && hexo deploy

五、将本地hexo blog发布GitHub Pages

  1. 在 Github 上创建名字为 XXX.github.io 的项目，XXX为自己的 GitHub 用户名。

  2. 配置Hexo的_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
打开本地的 ~/blog 文件夹项目内的 _config.yml 配置文件，将其中的 type 设置为 git :

deploy:
  type: git
  repository: git@github.com:friendxuan/friendxuan.github.io.git
  branch: main

运行：
npm install hexo-deployer-git --save

xuan@xuan:~$ cd blog
xuan@xuan:~/blog$ sudo npm install hexo-deployer-git --save
  1. 将blog初始化一个新的git仓库
1
2
3
4
5
6
7
8
9
10
11
cd ~blog
初始化一个新的git仓库
git init
然后，将远程仓库地址设置为新的 SSH 地址：
git remote add origin git@github.com:friendxuan/friendxuan.github.io.git
查看
git remote -v

xuan@xuan:~/blog$ git remote -v
origin  git@github.com:friendxuan/friendxuan.github.io.git (fetch)
origin  git@github.com:friendxuan/friendxuan.github.io.git (push)
  1. 配置git默认分支
1
2
3
4
5
6
7
8
9
10
11
全局配置默认分支名称
git config --global init.defaultBranch main
重命名当前分支
如果你只想更改当前仓库的默认分支名称，可以运行以下命令：
git branch -m master main

本地生成静态文件，并将静态文件推送至GitHub，运行：
hexo clean
hexo generate
hexo deplay
此时，打开浏览器，访问 http://your-name.github.io ，恭喜你，到此为止你的博客已经建设完毕了。