CI 部署 Hexo 静态博客

2020-12-20技术

使用 GithubAction 自动部署 Hexo 静态博客。

引言：原本根据 Hexo的版本控制与持续集成，想要使用 AppVeyor 来建立 CI，但是 AppVeyor 一直注册失败，加上根据评论看出会有不少问题，于是放弃该方案。后来根据将 Hexo 部署到 GitHub Pages，成功利用 Travis CI 将源码备份到 Github 仓库，并实现自动编译部署到分支。再后来了解到 Github Action 本身就具有免费的 CI 功能，于是实现将源码 PUSH 到私密仓库，再自动推送到博客文件所在仓库。

利用Travis_CI自动部署

CI，即持续集成 (Continuous Integration)，是在源代码变更后自动检测、拉取、构建和进行单元测试的过程。这种方法与前面直接进行部署的方法不同，是从使用 hexo cl & hexo g & hexo d 的前一步开始的。

新建GitHub仓库

创建一个用来存储 Hexo 项目源代码和静态页面的 GitHub 仓库，如果你希望你的站点能通过 <GitHub 用户名>.github.io 域名访问， repository 应该直接命名为 <GitHub 用户名>.github.io。

用 master 分支 来存储 hexo 博客项目源代码。
用 gh-pages 分支 存储来编译生成后静态页面。

当 master 分支的源代码（主题文件，文章 md 文件、图片等）有变动时，CI 会自动编译并部署到 gh-pages 分支。

注：使用Travis需要将源码放在<GitHub 用户名>.github.io ，由于前面已经将<GitHub 用户名>.github.io 进行了博客部署，因此要么将仓库删除重建或者移到分支，要么新注册账号。建议直接删除重建，后者还涉及不同 Github 布置 SSH 问题。如果不想麻烦，建议跳到后面利用Github_Action自动部署。

Travis_CI关联项目仓库

在用户头像处点击 Settings->Developer settings->Personal access tokens->Generate new token 创建 github 访问令牌，名称随意，勾选 repo 选项，然后复制密匙：

使用 GitHub 账号登录 Travis CI 官网，关联你的 hexo 博客项目仓库。在所列出来的仓库里找到你的 hexo 项目仓库，点击 Settings 。增加环境变量，名称随意但是后面需要使用，我在这里设置为GH_TOKEN ，值一栏粘贴入在前面生成的 GitHub Token，最后点击 Add 添加：

添加.travis.yml文件

在你的 Hexo 博客项目根文件夹下添加 Travis CI 的配置文件 .travis.yml。

.travis.yml 文件的内容如下：

sudo: false
language: node_js
node_js:
  - 12
cache: npm
branches:
  only:
    - master # build master branch only
script:
  - hexo generate
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN   #这里为环境变量名称
  keep-history: true
  on:
    branch: master
  local-dir: public

push到github

将你的 hexo 项目代码 push 到 GitHub 仓库的 master 分支，Travis CI 检测到 master 分支代码有变动，会自动执行脚本命令，将 hexo 项目编译生成静态页面，部署到 gh-pages 分支。

部署方法，在 Hexo项目根目录右键 Git Bash Here：

1. git init      #首次Push
2. git remote add origin https://github.com/Lykisun/xxx.git  #首次Push
3. git add .     #首次Push，后面也可将.改为发生变动的文件
4. git commit -m "init"     #引号内为注释内容
5. git push -u origin msater

若命令2报错：git remote add origin https://github.com/Lykisun/xxx.git

则先执行：git remote rm origin

然后再执行：git remote add origin https://github.com/Lykisun/xxx.git

其他报错自行搜索皆有解决方案。

设置Github_Pages

在 GitHub 中前往仓库的 setting->Options，往下修改 GitHub Pages 的部署分支为 gh-pages 然后 Save，即可通过<你的 GitHub 用户名>.github.io 域名访问（这里我已经删除gh-pages分支因此没有显示）：

如果显示404只需要等待一段时间。

进一步

参考了几篇文章，失败了好多次，终于成功使用 Travis CI 将 Hexo 博客部署到 GitHub Pages 上，但这也意味着站点文件将会是公开的。虽然并没有什么重要文件，但是还是希望能够把源码放在私密仓库。

一开始的时候我就觉得应该有两种思路：

源码推送到User.github.io公开仓库，hexo g后推送到分支，将分支作为博客仓库；
源码推送到private私密仓库，然后自动构建public文件推送到User.github.io 公开仓库。

由于一开始我就已经建立了部署博客的User.github.io 公开仓库，因此在尝试第一种思路的时候我特意去新申请了一个 Github 账号，不同账号使用 SSH 也出现了让我头秃的问题。但是第二种思路并不需要我们改动已经建立好的博客。

第一种思路成功后我就开始尝试第二种。我在搜索后没有发现利用 Travis CI 使用私密仓库跨仓库部署推送的相关文章，好像之前 Travis CI 对于私密仓库是收费的，现在免费但也有次数限制。进行了好几次尝试之后，每次要么编译失败，要么就只是部署到原仓库的分支，于是放弃。

最后我搜索到使用 GitHub Actions 自动部署博客教程，发现 Github 本身就有免费的 CI 功能，于是开始尝试利用 Github Action 开始了第二种思路。

利用Github_Action自动部署

配置Github_Token

在用户头像处点击 Settings->Developer settings->Personal access tokens->Generate new token 创建 github 访问令牌，名称随意，勾选 repo 选项，然后复制密匙：

新建用来存放源码的私密仓库，名称无妨，在仓库的 Setting->Secrets->New repositorysecret 添加新Secret，名称随意但是后面需要使用，我这里设置为 ACCESS_TOKEN，内容粘贴入刚才复制的 token ：

不同文章设置不太一样，有的用生成的ssh设置的，有的还要设置博客仓库的Deploy keys的，不过我用那些方法都失败了，只用上述办法才成功。

Push源码

同第一节 PUSH源码小节。

配置 GitHub Actions

在私密仓库的 Action->New workflow 添加新 Action 文件，这里有很多 Action 模板和别人造好的 Action，后续需要可以进行了解使用，这里我们直接选择 set up a workflow yourself，会在仓库新建 .github/workflows/xxx.yml ，然后填入以下内容：

# workflow name
name: CI Hexo Blog Deploy LTS

# master branch on push, auto run
on: 
  push:
    branches:
      - master

jobs:
  Deploy-Pages: 
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest 

    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository master branch
      uses: actions/checkout@master 

    # from: https://github.com/actions/setup-node  
    - name: Setup Node.js 12.x 
      uses: actions/setup-node@master
      with:
        node-version: "12.x"

    - name: Setup Git Infomation
      run: | 
        git config --global user.name 'Github用户名'           #修改处
        git config --global user.email 'Github注册邮箱'        #修改处

    - name: Get Latest Commit Message 
      run: |
        git log --pretty=format:"%s from Github Actions at `date +"%Y-%m-%d %H:%M:%S"`" --date=short -n 1  > commit-message.log

    - name: Setup Hexo Dependencies
      run: |
        npm install hexo-cli -g
        npm install

    - name: Generate public files
      run: |
        hexo clean
        hexo generate 

    - name: Deploy To Github Pages 
      env:
        Github_Pages: github.com/Github用户名/Github用户名.github.io    #修改处
        Github_Token: ${{ secrets.ACCESS_TOKEN }}                      #修改处
      run: |  
        git clone https://${Github_Pages} .github_pages
        cd .github_pages
        git checkout master
        cd ../
        mv .github_pages/.git/ ./public/
        cd ./public/
        git add .
        git commit -F ../commit-message.log
        git push --force --quiet "https://${Github_Token}@${Github_Pages}" master:master

注：以上需要更改 Github用户名、Github注册邮箱，以及刚才你设置的 Secret 名称。

有的相关文章中直接使用了别人的 Action ，但是我使用后一直出现 fatal: could not read Username for https://github.com: No such file or directory 的错误，没有找到解决方法，就换了一种方式。

完成后提交到仓库，就会开始自动构建并部署：

在我重新进行部署的时候，由于我用另一个账号新建了 Github用户名.github.io 仓库，然后将源码推送到新建的私密仓库，再建立 Action 后，出现了以下错误：

这是由于Github用户名.github.io 仓库并没有 master 分支的缘故（如果之前用本地 Hexo d 建立的仓库未删除就不需会有此问题），因此可以 PUSH 一个 README 文件上去并将其设为 master 分支，或者直接建立的时候勾选 README 选项，当然也可以在仓库建立，我就是直接新建的，不过这样产生的分支名称是 main ，上述 xxx.yml Action文件就要调整 master 为 main：

然后就成功了：

之后就可以看到博客的更新了。今后可以在源码仓库直接修改文件或者本地修改后推送到源码仓库，就会自动构建然后推送到博客仓库，一来备份了源码，二来免去部署步骤。

在我更新两篇文章后，Action 出现以下错误：

改了改又后来出现错误：

搜索后发现原因和办法：

其他

使用自定义域名访问

你可以使用自己的域名来访问 GitHub Pages 服务，只需在 hexo 项目的 source 目录下添加 CNANE 文件。

CNANE 文件内容为自定义域名，例如：xxx.xxx.cn，然后在仓库 Settings 开启域名 https 协议。

Project page

如果你更希望你的站点部署在 <你的 GitHub 用户名>.github.io 的子目录中，你的 repository 需要直接命名为子目录的名字，这样你的站点可以通过 <你的 GitHub 用户名>.github.io/<repository 的名字> 访问。你需要检查你的 Hexo 配置文件，将 url 修改为 <你的 GitHub 用户名>.github.io/<repository 的名字>、将 root 的值修改为 /<repository 的名字>/