点击查看参考教程
参考内容参考链接
Hexo 搭建过程Hexo 搭建博客
Hexo 安装及使用Hexo
butterfly 主题设置Butterfly
butterfly 美化及插件参考博主akilar
butterfly 美化参考博文Guo Le

安装 hexo 并部署到 github

环境部署

进入GitHub注册并登录 github 后，点击new即可创建仓库

填写仓库名，仓库名的格式必须是 用户名.github.io ，然后点击Create repository创建

这样 github 的仓库就创建成功了

  1. 官网Git下载或git-for-windows/git (github.com)下载，这里提供阿里云下载，安装教程可以自行搜索

    Git-2.36.1-64bit下载

    在安装完后，在桌面鼠标右键会出现 Git Bash Here 代表安装成功

    点击进入 git命令行，输入 git --version 可查看 git 版本

  2. 在命令行中输入如下命令

    git config --global user.name "Your Name"
    git config --global user.email "email@example.com"

    其中 "Your Name" 设置为github 的用户名，"email@example.com" 设置为github 登录的邮箱，设置完后可以使用下面命令查看自己的配置

    git config --global --list

    也可以打开 C:\Users\用户名\.gitconfig 文件查看，这个步骤是配置 git 的相关信息

    以下所以命令都可 git命令行 或 cmd 中执行

安装Node.js，选择 .msi 的那个，这里提供阿里云下载，安装教程可以自行搜索

node-v16.15.0-x64下载

安装完后在 git 命令行或 cmd 执行下面命令运行查看版本

node -v

如果出现了版本则安装成功，在安装 node 的时候也会安装 npm，npm 是一个包管理工具，执行下面命令运行查看版本

npm -v

安装 Nodejs 到这里就可以使用了，下面的配置是修改全局包配置，可以不做。

点击查看修改全局包配置

下载包时会默认保存在 C 盘，通过下面命令查看当前路径

npm root -g

在安装目录或 C 盘以外的地方创建两个文件夹，node_global 存放全局包，node_cache 存放 node 缓存

现在通过下面命令更换路径，我的示例如下

npm config set prefix "D:\Promgrams\nodejs\node_global"
npm config set cache "D:\Promgrams\nodejs\node_cache"

个文件的路径记得改为自己的，可通过 npm config list 命令或打开 C:\Users\用户名\.npmrc 文件查看。

因为修改了默认路径，所以需要修改环境变量，修改位置如下

安装 Hexo

Hexo官网首页提供了安装步骤，在电脑在寻找一个放置 blog 的位置，右键 git bush here 打开 git 命令行。

  1. npm 可能下载太慢，通过下面命令更换为淘宝源

    npm config set registry https://registry.npm.taobao.org

    可以通过 npm config list 查看是否配置成功

  2. 接下来运行Hexo官网首页提供的命令，下面命令一个一个运行即可

    npm install hexo-cli -g
    hexo init blog
    cd blog
    npm install
    hexo server

    npm install hexo-cli -g 是全局安装 hexo；hexo init blog 会创建一个叫 blog 的文件夹并初始化，其中 blog 可以随意命名，如果省略会在当前路径的位置进行初始化；cd blog 会进入到刚刚创建的 blog 文件夹；npm install 会安装所有依赖；hexo server 启动服务器

    运行命令错误解决方案

    运行这些命令可能不成功，可以在安装位置找到 git-bash.exe 尝试以管理员的方式运行

    然后使用命令 cd 目录，目录是要创建 blog 的位置，再运行上面的命令

  3. 运行完后可以看到 INFO Hexo is running at http://localhost:4000/ . ，浏览器访问 http://localhost:4000 ，即可看到默认的主页

    这时打创建 blog 的路径中的blog文件夹会看到生成的一些目录

    红色的字是每个文件主要的功能，详情参考建站|Hexo

部署到 github

关联本地和 github

  1. 后面以 [Blogroot] 指代博客根目录。打开 [Blogroot] 文件中的配置文件，即 _config.yml，拉到最后可以看到如下内容

    将配置修改为如下

    deploy:
      type: git
      repo: https://github.com/用户名/用户名.github.io
      branch: main

    其中需要修改 repo 的内容，将用户名改为github 的名字，配置文件使用的是 .yml 文件要注意在冒号之后有一个空格。更多配置查看配置|Hexo

  2. 安装 hexo-deployer-git，在 [Blogroot] 右键 Git Bash Here 输入以下命令

    npm install hexo-deployer-git --save

    通过 deploy 可以通过 hexo 直接提交到 github。

  3. 和 github 进行关联，有两种方法可以进行关联，任选其中一个即可

    在任何位置右键 Git Bash Here 输入下面命令后回车三次即可，不用设置密码

    ssh-keygen -t rsa -C "github注册邮箱"

    可以通过命令

    less ~/.ssh/id_rsa.pub

    复制密钥（按 q 退出）或者在 C:\Users\用户名\.ssh 文件夹，可以看到两个文件

    其中id_rsa是私有的，id_rsa.pub 是对外开放的，复制id_rsa.pub的内容

    打开github SSH，点击 New SSH key 创建一个新的 SSH key。Title随意命名，Key填入复制的内容然后点击Add SHH key即可

    测试 SSH 是否绑定成功，输入下面命令

    ssh -T git@github.com

    成功会显示下面这句话

    点击Personal access tokens或如图所示点击添加 token

    Note可以任意命名，Expiration设置为不过期或者设置为其他时间，到期更换即可，然后勾选repo，其他的可以不设置。点击Generaten token生成 token。

    点击复制，这个 token 以后就不会再显示，忘记了只能重新生成

    然后打开 [Blogroot]\_config.yml，将配置修改为如下

    deploy:
      type: git
      repo: https://github.com/用户名/用户名.github.io
      branch: main
      token: ghp_3KakcaPHerunNRyMerofcFd9pblU282FSbsY

    其中 token 填生成的 token

部署

在 [Blogroot] 右键 Git Bash Here 输入以下命令，因为网络原因，可能会出现失败，多尝试几次

hexo d或者hexo deploy

在运行时可能会要求输入 github 密码，上传完毕后就可以在 github 的 用户名.github.io 仓库看到已经上传的文件，等待 github 红色方框的地方变为绿色的小 √

现在就可访问 https://用户名.github.io/ 查看到网页了

hexo 常用命令

  1. 通过下面命令新建一篇文章

    hexo new 名称

    新建的文章在 [Blogroot]\source\_posts 中，可以使用 Markdown 文本编辑器进行编写，推荐使用Typora，生成的文章位置在

    新生成一篇文章所用的模板在 [Blogroot]\scaffolds\post.md，修改这个文件的内容(修改内容参考)，再运行命令就会以这个文件为模板生成，我的 post.md 文件如下

  2. 生成静态文件使用以下命令，生成的静态文件会放在根目录下的 public 文件中

    hexo generate或hexo g

  3. 启动服务器可以使用以下命令，这时可以通过 http://localhost:4000 进行访问生成的网页

    hexo server或hexo s

  4. 部署网站，部署的网站可以通过 https://用户名.github.io/ 访问

    hexo deploy或hexo d

  5. 清除缓存文件和已生成的静态文件使用以下命令

    hexo clean

一般情况下会将命令配合如下使用，第一个是在本地生成静态文件运行；第二个是部署到 github；更多详情查看指令 | Hexo

hexo cl && hexo s #本地生成静态文件运行
hexo cl && hexo d #部署到github

Butterfly 主题安装及美化

安装 Butterfly 主题

查看 Butterfly 作者的教程，完成下载和配置

  1. Butterfly 安裝文檔(一) 快速開始
  2. Butterfly 安裝文檔(二) 主題頁面
  3. Butterfly 安裝文檔(三) 主題配置-1
  4. Butterfly 安裝文檔(四) 主題配置-2
  5. Butterfly 安裝文檔(六) 進階教程
如果不想安装Butterfly主题还可以通过下面两种方式寻找主题

通过Hexo 提供的主题寻找主题，一般有主题预览，可以查看制作好的网页的样式

GitHub搜索输入 hexo-theme，点击 All GitHub 搜索

可通过排序选择合适的主题

添加 Live2D 看板娘

参考 Live2d Widget | Akilar の糖果屋

  1. 在 [Blogroot] 右键 Git Bash Here，安装hexo-helper-live2d

    npm install --save hexo-helper-live2d #安装live2d插件

  2. 安装完后还需要下载模型，在live2d-widget-models中模型选择，可以在hexo live2d 插件中预览模型，选择好模型输入以下命令，其中 [packagename] 是模型名字，在模型选择中可以看到

    npm install [packagename]

  3. 在根目录 [Blogroot]\_config.yml 文件或 [Blogroot]\_config.butterfly.yml 中，添加以下代码，其中要修改的是 use 后面的内容，改为安装模型的名字

    # Live2D
    # https://github.com/EYHN/hexo-helper-live2d
    live2d:
      enable: true				# 是否开live2d
      pluginRootPath: live2dw/	# 插件在网站上的根路径
      pluginJsPath: lib/		# 插件脚本路径
      pluginModelPath: assets/	# 插件模型路径
      scriptFrom: local			# 从本地获取脚本
      tagMode: false
      log: false
      model:
        use: live2d-widget-model-wanko # 安装模型的名字，这个需要修改
      display:
        position: right	# 模型位置
        width: 150 		# 模型宽度
        height: 300		# 模型高度
      mobile:
        show: true		# 是否在手机端显示
      react:
        opacity: 0.7	#透明度

    设置好后运行 hexo cl && hexo s 就可以在 http://localhost:4000 看到

因为 jsdelivr 暂时在国内不能使用，所以安装完后还需要观看本地化 API 配置，完成设置才能显示看板娘（如果 CDN 为如下可以暂时使用）

cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/";

  1. 如果已经安装过正常版需要先卸载

    npm uninstall hexo-helper-live2d

  2. 下载项目Live2D widget for web platform到本地，解压到 [Blogroot]\themes\butterfly\source 中并重命名为 live2d-widget

  1. 进入 live2d-widget 将 autoload.js 文件中的 live2d_path 设为自己的路径，一般为绝对路径：/live2d-widget/

  1. 在 Butterfly 的主题配置文件 [Blogroot]\_config.butterfly.yml 的 inject 部分添加

    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
      head:
        # - <link rel="stylesheet" href="/xxx.css">
      bottom:
    +   - <script defer src="/live2d-widget/autoload.js"></script>

  2. 重新运行 hexo cl && hexo s 就可以在 http://localhost:4000 看到

  1. 其他修改

    修改 live2d 位置，在 [Blogroot]\themes\butterfly\source\live2d-widget 目录下的 waaifu.css 的 #waifu 选择器修改

    waifu-tips.js 和 waifu-tips.json 两个文件都是和 live2d 对话相关的文件，可以修改想要的对话以及对应的触发条件

    其中模型引用在Live2D 看板娘插件上使用的后端 API

本地化 API 配置

安装正常版不需要观看

在 [Blogroot]\themes\butterfly\source\live2d-widget\autoload.js 中可以看到模型引入方法是 CDN 方法，使用 CDN 会根据项目的 model_list.json 的内容寻找 model 文件夹中的模型，然后再通过模型的 index.json 文件来确定模型资源。其中 Pio 酱和 Tia 酱是要配合有后端服务器的 API 装配方式，所以会造成 Pio 酱和 Tia 酱的模型无法换装。可以将模型装配模式由 单模型 多组皮肤 转换为 同分组 多个模型。

cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/";

将 [Blogroot]\themes\butterfly\source\live2d-widget\autoload.js 中的 cdnPath 改为 apiPath

if (screen.width >= 768) {
    Promise.all([
        loadExternalResource(live2d_path + "waifu.css", "css"),
        loadExternalResource(live2d_path + "live2d.min.js", "js"),
        loadExternalResource(live2d_path + "waifu-tips.js", "js")
    ]).then(() => {
        initWidget({
            waifuPath: live2d_path + "waifu-tips.json",
-            //apiPath: "https://live2d.fghrsh.net/api/",
-            cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+            apiPath: "https://live2d.fghrsh.net/api/",
+            //cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
        });
    });
}

但是这个 API 随时可能到期

  1. 下载店长已经改好的 live2d 到本地并解压

然后在github新建一个放置 live2d 的仓库

  1. 在 live2d_api 文件夹右键 Git Bash Here 输入以下命令

    git init
    git add .
    git commit -m "commit"
    git branch -M main
    git remote add origin https://github.com/[Yourname]/[Repository].git #地址改为你的仓库
    git push -u origin main

    提交到github后可以在对应仓库看到上传的文件

  2. 注册Vercel账号

    注册完后，在主页点击New Project

    点击 Add GitHub Account 添加自己的 github 账号，找到对于的仓库然后点击 import

    然后点击 Deploy完成在 Vercel 的部署

    部署成功后，在部署好的项目中点击 Settings->Domains 可以看到链接，复制这个链接在下个步骤会用到

  3. 更改 [Blogroot]\themes\butterfly\source\live2d-widget\autoload.js 中的 cdnPath

    if (screen.width >= 768) {
        Promise.all([
            loadExternalResource(live2d_path + "waifu.css", "css"),
            loadExternalResource(live2d_path + "live2d.min.js", "js"),
            loadExternalResource(live2d_path + "waifu-tips.js", "js")
        ]).then(() => {
            initWidget({
                waifuPath: live2d_path + "waifu-tips.json",
                 //apiPath: "https://live2d.fghrsh.net/api/",
    -            cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
    +            cdnPath: "https://live2d-api-hjqecho.vercel.app/"
            });
        });
    }

    至此就完成了设置

鼠标指针

在鼠标指针选择自己想要的指针样式，下载解压，解压文件能使用的是 .cur 格式

其中图片的大小要为 32×32 左右不宜过大或过小

source\css\custom.css 中添加