用Hexo-butterfly搭建个人网站

整合包安装

详情参见Jerry(主题作者)和guguge(整合包) 两位作者，他们的教程很详细，我就不再赘述了，推荐使用Guguge的整合包,内容详细,使用简单,方便日后升级。如果想要用Hexo框架下的其他主题，可以到Hexo官方站去看看,本篇文章仅适用Butterfly主题。

手动安装

1.安装 Node.js and npm
On Windows:
首先需要安装Node.js,安装完毕后通过CMD依次输入以下命令检查是否安装成功.
node -v
npm -v

On macOS/Linux:
打开控制台,通过package manager安装Node.js
macOS (Homebrew):
brew install node

Ubuntu/Debian (apt):
sudo apt update
sudo apt install nodejs npm

2.安装 Hexo CLI
npm install -g hexo-cli

3.安装 npm 依赖项
npm install

4.在本地创建并运行博客
创建博客文件
hexo new post “Blog name”

生成博客文件
hexo generate

注意Hexo框架自带一篇默认博客,可在目录下的source➡_post 看到

运行博客
hexo server

5.上传博客
在博客目录的config文件中找到deploy,修改为以下格式：

1
2
3
4
5
deploy:
type: git
repo: git@github.com:username/repository.git
branch: main
message: upload

username为Github用户名称，注意不是昵称，用户名一年只能改一次,而昵称能随意修改。
branch为上传到Github/gitee的项目分支,注意要和在Github/Gitee上的项目分支保持一致。
repository为你的Github项目名称,建议改为username.github.io的形式,这样在形成页面后链接会短一些，如果填写不同的名字，链接会长一些,当然如果你已经购买了域名，可以在项目的Github pages中设置自定义域名。
区别如下：
https://username.github.io 项目名称使用username.github.io
https://username.github.io.repository 项目名称使用repository

注意事项

容量限制

使用Gitee作为仓库所含内容不能超过500MB，单个文件不能超过50MB，否则超过三次会被警告，仓库被冻结，需要重新解封修改内容方可继续使用.
使用Github作为仓库做多可上传1GB内容，单个文件不能超过100MB，否则同样会被冻结，且由于距离的原因，用GitHub作为仓库建站延迟明显高于gitee.截至2024年,GitHub延迟稍微改善，裸连大部分地区皆可访问,推荐Github。可通过在cmd中输入ping github.com测试延迟,一般情况在200ms以内。

内容审查

内容审查是个老生常谈的问题了，只要使用了国内的服务器多多少少都有此类问题。Gitee需要实名认证才能开通仓库功能，审核时间一般为三天，且会审查上传文件的内容,介意慎用！像一些涉政言论,翻墙等词汇都是重点审查对象,博客文件中含有违禁词会无法更新博客并可能会强制关闭项目。Github上传后页面自动更新，Gitee需要先上传，再点击“更新仓库”，方可更新页面。

安装问题

在安装guguge大佬整合的文件尽量不要开启各种杀毒软件，否则可能各种会出现BUG，大多数是杀毒软件的原因,关闭杀毒软件再重启有奇效。比如说安装必要环境时候会安装失败且不停的弹出窗口，这种情况就是受到杀软的影响而无法正常安装某些必要软件，常见的为node.js安装失败，这时候关闭杀毒软件，重新安装node.js再安装环境就可以正常安装了。

各种插件

音乐播放器Aplayer大部分情况下都能正常使用，若抽风可参考这篇博客的解决办法：https://www.ottoli.cn/wordpress/anm
guguge整合了许多live2D模型，可以试着换一个自己喜欢的.更多用法请查看Hexo官方文档：https://hexo.io

Aplayer 音乐播放器配置：

1
2
3
4
5
6
7
8
9
10
11
Aplayer 音乐播放器配置：
  - <div class="aplayer no-destroy" 
    data-id="××××××××"       
    data-server="netease"      
    data-type="playlist" 
    data-fixed="true" 
    data-mini="true" 
    data-listFolded="false" 
    data-order="random" 
    data-preload="none" 
    data-autoplay="true" muted></div>

data-id=”××××××××” 通过查看腾讯，酷狗，网易等网页版播放列表的链接可以找到对应的ID号.
注意每个播放列表ID都不一样,换歌单只需要更换ID就行了.
data-server=”netease” 可选择 netease, tencent, kugou, xiami, baidu
只需简单调整以上两个参数，就可以轻松实现播放自己的歌单了,该设置仅适合Butterfly主题。

Live2D动画配置

1
2
3
4
5
6
7
8
9
10
live2d: 
  enable: true
  scriptFrom: local 
  pluginRootPath: live2d_models/ 
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: XXX

找到XX盘:\Hexo Environment\Hexo-butterfly\live2d_models 目录里的模型文件夹,把use：XXX 中的XXX替换成你想要使用的Live2D模型对应的文件夹名称即可。如果使用其他主题，也想添加Live2D动画，可以参考这篇文章:
https://sevencho.github.io/archives/cb206c67.html

版本兼容性问题

我现在用的版本是在Guguge大佬整合包的基础上更新原作者Jerry的butterfly4.13.0 版本，原作者Jerry还在不断更新，更新版本时网页可能出现问题，养成文件备份的习惯，能省去很多麻烦。

节约空间

网站使用的图片尽量精简大小，保证质量的条件下越小越好，图片越小，加载越快.如果上传高质量图片到图库中很快空间就会不够用了,如果使用Github或gitee提供的免费存储空间建立博客的话一定要注意这点,轻度博客用户Github仓库容量已足够使用，想要大容量更新博客内容推荐租赁或者自建服务器吧。

小技巧

常用命令

创建博客：
hexo new post “Blog name” ：这个命令用于创建新的博客文件,Blog name为创建的文件名称。
上传博客：
hexo d：这个命令用于将生成的静态文件部署（上传）到指定的平台，例如 GitHub Pages。

生成静态文件：
hexo g 或 hexo generate：这个命令用于生成网站的静态文件，将 Markdown 文件转换为 HTML。

清理缓存：
hexo clean：清理生成的静态文件和 Hexo 的缓存。当你遇到一些生成错误或想要确保生成的是最新文件时，可以先使用这个命令。

本地测试：
hexo s 或 hexo server：启动本地服务器以便你在本地预览博客，默认地址为 http://localhost:4000

清理缓存后重新生成并部署：
一条常用的组合命令是 hexo clean && hexo g && hexo d，先清理缓存，然后生成静态文件，最后上传。

或者直接用”运行脚本.bat”实现上述功能。

运行脚本

  如果你没有使用guguge的整合包,里面没有一键运行脚本也没关系，可以复制如下代码到txt文本中,更改后缀名称为bat就得到同样的脚本了。具体细节可自行修改。

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
@echo off
echo ===========================
echo 请选择命令：
echo ===========================
echo 1.安装必备插件【安装成功后无需再安装】
echo 2.本地运行测试
echo 3.上传网站
echo 4.清理缓存
echo.
set /p input="使用哪种安装方式？1/2/3/4: "
if %input%==1 goto A
if %input%==2 goto B
if %input%==3 goto C
if %input%==4 goto D

:A
cls
echo ======================================================
echo 请选择安装方式【下载慢或者下载失败请选择cnpm 或 yarn模式】：
echo ======================================================
echo 1.npm
echo 2.cnpm
echo 3.yarn
echo.
set /p install="使用哪种安装方式？1/2/3： "
if %install%==1 (
npm install
pause
exit
)
if %install%==2 (
cnpm install
pause
exit
)
if %install%==3 (
yarn
pause
exit
)

:B
start cmd.exe /k "@echo off && hexo s && pause && exit"
start http://localhost:4000
exit

:C
start cmd.exe /k "@echo off && hexo d && echo. && echo 命令已执行完成，如出错请检查配置 && pause && cls && 运行脚本.bat"
exit

:D
start cmd.exe /k "@echo off && hexo cl && echo. && echo 已清理缓存 && pause && cls && 运行脚本.bat"
exit


pause

  上传到Github需要在设置里配置对应的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
30
31
32
@echo off
color 2

echo ===========================
echo 设置你的用户名和邮箱
echo ===========================
echo.
set /p n="输入你的名字: "
set /p m="输入你的邮箱: "
git config --global user.name %n%
git config --global user.email %m%
cls
echo ===========================
echo 正在准备生成ssh密钥
echo ===========================
echo.
start C:\Program" "Files\Git\git-bash.exe --cd=C:\Users\%username% -c "ssh-keygen -t rsa -b 4096 -C %m%"
pause
cls
echo ===========================
echo ssh密钥已成功生成
echo ===========================
type C:\Users\%username%\.ssh\id_rsa.pub
echo.
echo ===========================
echo 正在导出txt文件：
echo ===========================
copy C:\Users\%username%\.ssh\id_rsa.pub .\已生成ssh密钥.txt
echo.
echo 请前往 github.com 或 gitee.com 配置你的ssh私钥

pause

  创建新文章既可以用cmd命令也可以直接用下面的脚本

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
@echo off
echo ===========================
echo 请选择命令：
echo ===========================
echo 1.新建文章页面
echo 2.新建独立页面
echo.
set /p input="选择功能？1/2: "
if %input%==1 goto A
if %input%==2 goto B


:A
cls
set /p t1="请输入文章文件名: " 
start cmd.exe /k "hexo n %t1% && echo. && echo 已经在 source/_posts 目录下生成文件：%t1%.md 与 资源文件夹： %t1% && pause && exit"
exit

:B
cls
set /p t2="请输入独立页面文件名: "
start cmd.exe /k "hexo n page %t2% && echo. && echo 已经在 source 目录下生成一个文件夹： %t2% 并在文件夹内创建了文件： %t2%.md && pause && exit"
exit

pause

Markdown文本用法

请看Guguge博主的有关Markdown用法的文章,写的很详细,这里不再赘述了。
文章链接：https://guguge.top/blog/markdown

Butterfly主题文档配置

请查看Jerry博主的butterfly主题文档配置一文,助你快速掌握butterfly主题下博客的设置与markdown文本的写法。
文章链接:https://butterfly.js.org/posts/4aa8abbe

祝您建站顺利!