未分類
26 2 月 2020

利用 Github Action 部署 Hexo

利用 Github Action 部署 Hexo

作者在本文向我们介绍了他通过 Github Action 部署 GitHub Pages Hexo 主题博客的经验

利用 GitHub Actions 这个工作流工具，可以实现写完 md 并 push上去，就可以自动 Deploy 的效果

================================================

先说说怎么在本地预览

不知道是我的 hexo 有问题还是它的设计有缺陷，我经常能遇到利用 hexo -s 启动起来测试服务器以后改东西也仍然会无法及时更新，然后我决定尝试利用 hexo g --watch 配合一个静态服务器（我用的是 Caddy，一个轻量又强大的服务器），测试下来发现成功率比 hexo -s 高不少。

前言

博客好久没管了，因最近 女朋友 想不开开始研究博客，故我也想起我自己的博客，就来折腾一下。受限于技术博客的简洁又复杂，大体上没什么可改的，主题也很满意，于是我的折腾便从主题的更新和部署下手了。

主题一直用的 NexT.Mist，从 NexT v3 一直用到了现在的 v7，比较满意的是 NexT 从 v6 全面社区化开始就增加了可以不修改主题模板而自定义配置的功能，v7 更是新增了数据目录，可以说是对于使用者非常友好了。
我的博客之前一直都是将 NexT 主题文件放入了代码仓库（v5 及之前的时代我更是完全没有把博客放入版本控制，就是因为主题更新复杂），这次的折腾改成了 submodule，以后的更新等便更加方便了。

而另一个改动就是利用 Github Action 进行部署。之前我的博客是利用 TravisCI 从 Github 拉取代码后传到 Coding 进行部署的，前不久 Github Action 发布我就一直打算迁移，还有就是 Coding 经常变动而且总是挂，这次打算回归使用 Github Pages + Cloudflare CDN（嗯完全不考虑国内用户了）。

之后都是一些小改动了，比如将 Disqus 评论切换成了更「智能」的 DisqusJS、合并了百度与 Google 的 sitemap，添加了一些个人联系方式等，就不细说了。

GitHub submodule 管理主题

偷懒，直接上代码

# 首先把 next 主题 fork 一份
# 添加 submodule
cd themes
git submodule add https://github.com/ImSingee/hexo-theme-next next
# 设定本地使用 SSH 推送
git config submodule."themes/next".url [email protected]:ImSingee/hexo-theme-next.git
git remote remove origin
git remote add origin [email protected]:ImSingee/hexo-theme-next.git
# 新建 publish 分支
cd next
git branch -b publish
git push origin publish
git branch --set-upstream-to=origin/publish publish
# 将默认的拉取路径设定为 publish 分支
cd ../..
echo "    branch = publish" >> .gitmodules

另外修改 .gitmodules 文件

我选择了 fork 一份 next 主题而不是直接使用 next 官方仓库，原因有以下几种

  1. 保证了后续部署过程中的版本稳定
  2. 可以自由的对主题进行一定的修改，后续升级的时候不会丢失这些修改信息
  3. 最主要的原因是，NexT 的 menu 必须有 Archives，但是我并不想要，这个菜单不能去掉应该是 bug，但是在修复前我只能选择自己克隆一个目录修改了

另外就是，我这里对 submodule 使用的是 https 格式，主要考虑到 https 格式的链接可以免登录直接 clone 而 ssh 格式则必须登录；而另外设定本地使用 SSH 则是为了防止推送时需要输入 github 密码

为了方便进行一些修改！

利用 Github Action 部署 Hexo

好了终于到了核心环节了，先上 Github Action 代码

name: Deploy Blog

on: 
  push:
    branches: 
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout source
      uses: actions/checkout@v2
      with:
        path: main
    - name: Checkout submodules
      run: |
        cd main
        auth_header="$(git config --local --get http.https://github.com/.extraheader)"
        git submodule sync --recursive
        git -c "http.extraheader=$auth_header" -c protocol.version=2 submodule update --init --force --recursive --depth=1
    - name: Setup node and yarn
      uses: actions/setup-node@v1
      with:
        node-version: 12.x
    - name: Install hexo dependencies
      run: |
        cd main
        yarn
        npm i -g hexo-cli 
    - name: Generate blog
      env:
        TZ: Asia/Shanghai
      run: |
        cd main
        hexo clean
        hexo generate
        ls
    - name: Checkout gh-pages
      uses: actions/checkout@v2
      with:
        path: gh-pages-pre
        ref: gh-pages
        fetch-depth: 0
    - name: Publish to gh-pages
      env:
        TZ: Asia/Shanghai
      run: |
        mv main/public gh-pages
        cp -r gh-pages-pre/.git gh-pages/
        cd gh-pages
        git config --local user.email "[email protected]"
        git config --local user.name "GitHub Action"
        git add .
        git commit -m "Auto Delopy at `date +"%Y-%m-%d %H:%M"`"
        git push origin gh-pages

主要做了以下几件事

  • 检出文章代码至 main 目录
  • 下载 submodule（默认 checkout 是不会拉取 submodule 的）
  • 下载 node 与 yarn
  • 安装依赖于 hexo-cli（hexo-cli 似乎只能用 npm 安装，我用 yarn 安装后续会提示找不到文件）
  • 生成博客（注意需要设定时区，不然 RSS 的时间等可能会出问题）
  • 检出原来存储博客文章的仓库及相应的分支至 gh-pages-pre 目录
  • 将文章存至相关目录并部署（注意需要设定时区，不然提交记录的时间会出问题；注意需要在 push 前设定用户信息）

总体而言各种奇奇怪怪的坑还是不少的（也可能是因为我其他 CI 工具也不熟练，但是，安装完 hexo-cli 并成功转眼就没了是什么操作！），网上也并没有一个很好的方案，希望有同样困惑的人可以看到这篇文章并解决 XD

后续

突然想开一个 Markdown 写作工具的坑，大概如下

  • Mac 可用
  • 所见即所得
  • 支持 Hexo Front-Matter
  • 文件列表显示标题，而不是文件名
  • 可以自动更新更新时间
  • 可以方便的利用模板新建文章
  • 可以辅助添加 <!-- more --> 标签，或是生成摘要
  • 可以管理 Category 与 Tag
  • 可以一键预览、发布
  • 可以管理图片、一键上传至 CDN

哎这么多年了竟然没人做（Typora 要是支持插件就好了），等我有空了（立 flag 时间到）我就做一个……