Hexo + Butterfly + Github Page + Github Action 配置自己的个人网站

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
Butterfly 是 Hexo 的一个流行的主题，它的用户量很大，使其扩展丰富，使用方便。
Github Action 是一种持续集成和持续交付 (CI/CD) 平台，可用于自动执行生成、测试和部署管道，而且可以免费使用。
Github Page 是免费的静态站点，只需要一个代码库，就可以免费构建自己的网站。

本文将以上四者相结合，构建个人博客网站。部署流水线，让我们只需要关注内容的产出，而无需关心 hexo 的部署与博客的发布。Let’s go.

1. 预准备

github 上创建账号，并创建两个 git repo。
- 一个 repo 用来保存平时编辑的博客文件
- 一个用来保存 hexo 生成的静态文件，并为其设置为 github page.
本机安装 docker 与 vscode 软件。
- docker 用来运行 hexor 容器，用来本地开发与调试
- vscode 用来日常编写博客文本
- 安装 vscode 插件 docker, markdown images

2. 准备 hexo，使用 docker image

> docker run --name hexo -p 4000:4000 -it --rm --entrypoint="bash" -v ~/blog/:/app xhuaustc/hexo:latest
root@291c4cec0506:/app/# hexo init myblog
root@291c4cec0506:/app/# cd myblog
root@291c4cec0506:/app/# cd myblog
root@a20365558032:/app/myblog# hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

该镜像已经准备好了 hexo 的编译与运行环境，其中 ~/blog/中存放第 1 步创建的 git 代码。

3. 安装 butterfly 主题

安装 butterfly

1	npm i hexo-theme-butterfly

: 将 butterfly 的默认配置拷贝到项目根目录_config.butterfly.yml

1	wget https://raw.githubusercontent.com/jerryc127/hexo-theme-butterfly/dev/_config.yml _config.butterfly.yml

: hexo 设置主题 buterfly

1	theme: butterfly

4. 配置本地搜索

安装 hexo-generator-search

1	npm install hexo-generator-search --save

hexo 配置中配置 search

search:
  path: search.xml
  field: post
  content: true
  format: html

butterfly 配置中打开 search

1 2	local_search: enable: true

5. 配置 tags 页面

新建 tags page

1	$ hexo new page "tags"

更新 source/tags 文件夹下 index.md 文件内容为

1
2
3

type: "tags"
layout: "tags"
comments: false

在_config.butterfly.yml 中 menue 打开 tags

# Menu 目錄
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags

6. 配置 categories 页面

同tags页面

新建 categories page
1
$ hexo new page "categories"
更新 source/tags 文件夹下 index.md 文件内容为

1
2
3

type: "categories"
layout: "tags"
comments: false

在_config.butterfly.yml 中 menue 打开 tags

# Menu 目錄
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open

7. 添加置顶功能

安装置顶插件

1 2	$ npm uninstall hexo-generator-index --save $ npm install hexo-generator-index-pin-top --save

在post的元数据描述中添加top标识即可：如

---
title: 置顶配置
date: 2021-09-08 12:00:25
categories: 教程
top: true # true 或者数字
---

6. 配置 github page

只需要将 repo 名字设置为.github.io,即可通过浏览器 https://.github.io 访问。

7. 使用 github action 实现自动部署

安装 hexo-deployer-git 插件并配置

1	npm install hexo-deployer-git --save

在 hexo 项目的配置中设置 deploy

deploy:
  type: git
  repository: https://<username>:GIT-TOKEN@github.com/<username>/<username>.github.io.git
  branch: master
  name: <username>
  email: <email>

repository 便是静态文件 repo, 也是 Github Page 对应的 repo。 2. 在 github 中创建 token(Settings Developer / settings / personal access tokens / tokens(classic)，并为其添加 repo、workflow 权限 3. 在代码 repo 中创建 secret，将 2 步创建的 token 保存为 secret,名为 GIT_TOKEN
github设置secret
4. 在代码 repo 中设置 github action.

# .github/workflows/build.yaml
name: Deploy Blog site
run-name: ${{ github.actor }} is deploy blog site 🚀
on: [push]
jobs:
  Deploy-Actions:
    runs-on: ubuntu-latest
    env:
      TOKEN: ${{ secrets.GIT_TOKEN }}
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v3
        with:
          node-version: "20"
      - run: |
          sed -i "s/GIT-TOKEN/${TOKEN}/" _config.yml
          npm install hexo-cli -g
          npm install --force
          hexo clean
          hexo deploy

8. 加速 github page 网站

国内访问 github page 速度很慢，可以通过Netlify对其进行免费加速
具体操作请参考：Github Pages 访问太慢？通过 Netlify 免费加速

9. 提交文章

以上就绪后，在_source/_posts 中创建新的博客，并其提交到代码库。 Github Action 将自动触发，生成静态文件，并将其提交到静态文件 repo。通过 Github Page 便可访问最新的博客了。
vscode插件Markdown Image可以方便（Alt+Shift+V）上传插件，并生成Markdown文本。
vscode 插件 Markdown Image配置