前言

一直以来，苦于找不到好看的博客模板与不知道如何优雅地进行部署，搭建博客的计划一直都处于搁置的状态，但前几天偶然看到某位大佬的 博客页面，惊为天人，这就是我想要的博客效果！（指对markdown语法的高度支持与排版的清新，绝对不是因为二次元壁纸与看板娘）

于是便研究了两天，最终还算顺利地搭建起了目前十分满意的博客页面。

搭建过程

此博客采用 Hexo 框架 + Butterfly 主题 + GitHub Pages 部署 + GitHub Actions 自动发布的做法，可以做到自动地静态博客编译和部署，十分方便，下面将逐步介绍各个部分的流程。

准备工作

  1. GitHub 仓库

    实现 GitHub-Page 的自动部署需要两个仓库，一个用于存放 Hexo 项目的源代码（以下称为 source，本例中为 Qlipphoth-blogs 仓库），另一个用于存放编译之后的静态页面（以下称为 page，本例中为 Qlipphoth.github.io仓库）。如果想要使用 GitHub-Page功能，需要将 page 仓库命名为 <user>.github.io 或 <organization>.github.io，详见 GitHub Page 文档。

    这里建议将 source 仓库设置为 private，page 仓库设置为 public，以保证重要信息不会泄露（如一些 apikey 与 token）。

  2. NodeJS

    由于 Hexo 是 NodeJS 编写的，所以需要安装NodeJS和npm工具，教程。

  3. Git

    hexo 部署到 GitHub 时要用到 Git，教程。

Hexo

Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。

安装 Hexo

bash
1
npm install -g hexo-cli

查看版本

bash
1
hexo -v

创建一个 hexo 项目并初始化

bash
1
2
3
hexo init hexo-blog
cd hexo-blog
npm install

本地启动（hexo 三连）

bash
1
hexo clean && hexo g && hexo s

在浏览器中输入 localhost:4000 即可看到效果。

Butterfly

默认的 Hexo 主题比较简陋，这里选择了 Butterfly，官方的文档写得很详细，按照文档的步骤进行配置即可。详见 Butterfly 文档。关于 Butterfly 的改造与美化，可以参考我的 Butterfly 改造记录。

在你的博客创建完成后，需要将本地文件夹与 GitHub 仓库进行关联，需要注意的是，如果你配置了 gitignore 文件，那么有可能会忽略掉 public 文件夹，这里需要手动 add 一下。可以选择将上面创建的 source 仓库 clone 到本地，然后将 Hexo 项目中的文件复制到 source 仓库中再 push 的方式，或者 添加文件到仓库，配置完成后的 source 仓库如下图所示：

10.png

注意，在 push 你的 Hexo 项目时可能会遇到大量的 git 错误，耐心搜索解决办法总会成功的。

GitHub Pages

什么是 GitHub Pages

GitHub Pages 是 GitHub 提供的一项免费的静态网页托管服务。它允许用户创建和托管个人、项目或组织的静态网站，使用 Git 仓库来管理网站的内容和版本控制。GitHub Pages 的网站内容可以使用 HTML、CSS、JavaScript 等前端技术编写，并且可以通过自定义域名或 GitHub 提供的域名访问。

配置 GitHub Pages

  1. 首先找到 page 仓库的 setting 选项。
    1.png

  2. 找到 Pages 选项，该选项用于控制生成网站的方式与仓库分支。我们选择 deploy from a branch，第二项先不用管，目前我们的仓库还没有这个分支。
    2.png

GitHub Actions

什么是 GitHub Actions

GitHub Actions 是 GitHub 的持续集成服务。持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。
很多操作在不同项目里面是类似的，完全可以共享。GitHub 允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。
如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。

使用 GitHub Actions 自动部署的好处

  • 可以直接在线编辑 md 文件，立即生效。假设你已发布一篇文章，过几天你在别的电脑上浏览发现有几个明显的错别字，这是完全不能容忍的。但此时你电脑上又没有 hexo + node.js + git 等完整的开发环境，重新配置开发环境明显不现实。如果使用 CI，你可以直接用浏览器访问 GitHub 上的项目仓库，直接编辑带错别字的 md 文章，改完，在线提交，稍等片刻，你的网站就自动更新了。

  • 如果手动部署，需要先执行 hexo g 编译生成静态文件， 然后推送 public 整个文件夹到 GitHub 上，当后期网站文章、图片较多时候，很多时候连接 GitHub 不是那么顺畅，经常要傻等很长的上传时间。使用 GitHub Actions 自动部署，你只需 push _post 文件里单独的 md 文件即可，其他不用管，效率瞬间高了许多，其中的好处，谁用谁知道。

配置 GitHub Actions

  1. 创建 GitHub Token
    创建一个有 repo 和 workflow 权限的 GitHub Token。这里如果怕麻烦的话可以直接创建一个不会过期的 token，当然这会有一定的安全问题。
    4.png

    保管好新创建的 Token，后面会用到。
    5.png

  2. 创建 repository secret
    将上面生成的 Token 添加到 source 仓库的 Secrets 里，并将这个新增的 secret 命名为 HEXO_DEPLOY （名字无所谓，看你喜欢）。
    6.png

    新创建的 secret HEXO_DEPLOY 在 Actions 配置文件要用到，需跟配置文件保持一致！

  3. 添加 Actions 配置文件

    1. 在你的 Hexo 项目（source 仓库）根目录下创建 .github 文件夹。
    2. 在 .github 文件夹下创建 workflows 文件夹。
    3. 在 workflows 文件夹下创建 hexo-deploy.yml 文件。

    7.png

    hexo-deploy.yml 文件内容如下：

    yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    name: deploying Hexo project to GitHub pages
    on:
    push:
        branches:
        - main # main 分支有 push 行为时就触发这个 action

    jobs:
    build-and-deploy:
        runs-on: ubuntu-latest
        steps:
        - name: Checkout
            uses: actions/checkout@main

        - name: Build and Deploy
            uses: theme-keep/hexo-deploy-github-pages-action@master # 使用专门部署 Hexo 到 GitHub pages 的 action
            env:
            PERSONAL_TOKEN: ${{ secrets.HEXO_DEPLOY }} # secret 名
            PUBLISH_REPOSITORY: Qlipphoth/Qlipphoth.github.io # 公共仓库，格式：GitHub 用户名/仓库名
            BRANCH: gh-pages # 分支，填 gh-pages 就行
            PUBLISH_DIR: ./public # 部署 public 目录下的文件

    在上面的配置文件中，使用了 theme-keep 组织封装的 hexo-deploy-github-pages-action ，是一款专门部署 Hexo 博客到 GitHub pages 的 action，欢迎大家 Star 和 Fork。

  4. 自动部署触发流程

    1. 修改你的 Hexo 博客源代码（例如：增加文章、修改文章、更改主题、修改主题配置文件等等）。

    2. 把你修改过的 Hexo 项目内容（只提交修改过的那部分内容） push 到 source 仓库（本例：Qlipphoth-blogs）的 main 分支。

    3. GitHub Actions 检测到 main 分支有内容 push 进来，会自动执行 action 配置文件的命令，将 Hexo 项目编译成静态页面，然后部署到公共仓库的 gh-pages 分支。

      gh-pages 分支是 GitHub Pages 服务的固定分支，你只需在 hexo-deploy.yml 文件正确填写，会自动创建。

      注意，在 page 仓库自动创建好 gh-pages 分支后，需要手动修改一下 GitHub Pages 的配置，将 Source 设置为 gh-pages 分支，这样才能正常访问。修改完成后的效果如下：

      3.png

    4. 在私有仓库的 Actions 可以查看到你配置的 action。

      8.png

    5. 通过 GitHub Actions 自动部署成功的效果图：

      9.png

总结

至此，我们就拥有了一个操作简单、制作精良、可拓展性强、可自动部署的博客了！虽然说对于个人博客而言，内容才是核心，框架和插件都是次要的，但一个看起来就很舒服的页面还是能激发人创作的动力的，希望能够保持总结与创作吧。