Hexo+Github Action构建Github Page博客

最近重拾了Github page，之前有了解到结合Github Action这个利器，现在发文章更流畅了，正好这段时间想着重新写写博客，对自己技术做一些反思和沉淀，所以就重新折腾了一次，在这里做一个生成Github Page的总结，可以避免各位踩坑

<!–swig8–>

毕竟总是手写html不方便，我们写博客，程序员当然最喜欢用Markdown来写，而Hexo就是其中最好的选择之一，我们首先全局安装hexo命令
1
npm install hexo-cli -g
然后clone 刚才你建好的github.io的项目，输入命令git branch来建一个新的分支并checkout

这一步记得做，之后用Github Action会涉及到
1
2
git branch xxx
git checkout xxx
在你新建好的xxx目录下，开始初始化hexo博客
1
hexo init
初始完成后，直接start命令就可以本地预览你的博客了
1
hexo s
写作的话都是在source里面的_posts去编辑对应的文章markdown，你可以用方便的hexo命令来生成文章
1
hexo new xxx
xxx就是生成的markdown的文件名，hexo的写作还有一些文档和注意事项，可以在文档Front-matter中查看，如果你希望用不同的模板来新建文章，可以在scaffolds中新建一个markdown模板，然后新建文章的时候，可以直接写(比如aaa就是你新建的aaa.md的模板)
1
hexo new aaa xxx
预览完毕后，可以直接用generate命令来生成博客，也就是hexo会将你的markdown，生成githubpage所需要的html文件，生成目录是public
1
hexo g

那么到这一步，其实你就可以手动将public中的文件，复制到你的master分支，提交后访问你的Github Page地址，就可以看到Hexo生成好的博客了

复制到你GithubPage设置的分支去，不一定是master

Github Action

但这样每次都要复制也太麻烦了，有没有什么方法可以只要我们提交当前分支，Github就自动帮我们生成博客呢，答案当然是肯定的，下面有请神奇的Github Action

大家知道，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为 actions。

很多操作在不同项目里面是类似的，完全可以共享。GitHub 注意到了这一点，想出了一个很妙的点子，允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。

如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方。 - 阮一峰

Github Action -github.com/features/actions

所以我们现在的目标就是，只要提交我们的hexo代码后，也就是提交到我们的博客分支后，action自动帮我们运行hexo c && hexo g生成博客文件，然后把生成的产物推送到master分支，那以后我们只要关注我们的markdown代码即可，其他的都是action帮我们处理好，那么现在开始action教程

新建一个Access Token

进入个人设置页新建一个Access Token
AccessToken

直接全选所有选项后，点击Generate token

生成后请自行保存好生成的token，如果关掉后就不再显示了

设置个人Secrets

回到github.io项目的Settings中，新建一个token，名字是ACCESS_TOKEN，值是刚才你保存的access token，如图

新建action的yml文件

回到刚才博客源码的那个分支，新建目录.github/workflows，然后新建一个main.yml文件，到时候Action就会读取这个文件来做对应的操作，将以下代码复制进去

name: Blog CI/CD

# 触发条件：在 push 到 hexo-blog-backup 分支后触发
on:
  push:
    branches: 
      - hexo-backup

env:
  TZ: Asia/Shanghai

jobs:
  blog-cicd:
    name: Hexo blog build & deploy
    runs-on: ubuntu-latest # 使用最新的 Ubuntu 系统作为编译部署的环境

    steps:
    - name: Checkout codes
      uses: actions/checkout@v2

    - name: Setup node
      # 设置 node.js 环境
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'

    - name: Cache node modules
      # 设置包缓存目录，避免每次下载
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

    - name: Install hexo dependencies
      # 下载 hexo-cli 脚手架及相关安装包
      run: |
        npm install -g hexo-cli
        npm install

    - name: Generate files
      # 编译 markdown 文件
      run: |
        hexo clean
        hexo generate

    - name: Deploy hexo blog
      env: 
        # Github 仓库
        GITHUB_REPO: github.com/fangge/fangge.github.io
      # 将编译后的博客文件推送到指定仓库
      run: |
        cd ./public && git init && git add .
        git config user.name "mrfangge"
        git config user.email "fangge-sun@163.com"
        git add .
        git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
        git push --force --quiet "https://${{ secrets.ACCESS_TOKEN }}@$GITHUB_REPO" master:master