自动化部署到Github

前言: github page 还是三年前配置的,最近心血来潮,就想把他更新一下.没想到一下整出来很多新东西.

Hexo 和 nexT 主题的更新

NexT 还是那么的漂亮和优雅,不再折腾样式了.当前更新了 hexo-cli ,然后又把NexT主题更到了最新版本.
然后一执行命令就挂掉了,报的很奇葩的错: Unhandled rejection Template render error .后面查询官网说到应该是由旧版本升级到 7.0 版本时,有些包已经过时了,可以通过命令查看: npm outdated ;
检查 package 里面的依赖包也很旧了,很多包的版本还是 0.0.\ *版本,手动改了版本更新后 hexo server 就可以正常运行了.

更新机制的改变

为什么要改变更新机制? 目前只能通过本地更新和部署,那万一哪天出差时手上没有电脑但是又想写点什么呢(虽说这种需求完全不是我的风格)?
记得我的初始想法是把源码和站点页面放在两个库,如果在另一台电脑,只需要把我的源码拉取下来,然后更新文章就可以了.但是要安装那么一堆东西,还有要配置 git,实在是繁琐至极.
关于部署,官网有一种,使用 [Travis CI](https://travis-ci.com/) 进行持续化集成部署,但是这个服务只有对 public 的库才免费,但我是想要把源码放到私有库(ps: Github 真的是太康概了,私有库也免费了). 同样解决的方法也是 Github,其推出了新的 Github Actions ,这个用于私有库也是可以的.对于我这种免费党来说实在太好了. 😄
那后面慢慢又从网上搜来很多好的 idea,最终选取了使用羽雀文章发布通过 serverless,出发 github 的 actions.
那下面就操练起来

准备工作.
1. key: 在后面的 workflow 部分,serverless,会需要相关的 token
2. 配置 SSH.我是用的原来使用 git 时配置的 ssh,貌似是可以新配置生成密钥的.可以参考下: ssh-keygen -t rsa -C "Github 的邮箱地址"
3. 生成的有公钥(带 pub 的)和私钥吧,其实当时我在配的时候都快混淆的,运维知识没学好.
4. 在 github 的全局设置中的 development 选项中 personal access token 拿到一个 token 可以使用 API;
5. 注册羽雀,在设置页面拿到一个 token;
6. 将源码上传到与 github page 不同的库,然后在该仓库配置
  1. secrets: 这个会在 workflow 中用到.需要储存两个.一个是 YUQUE_TOKEN ,当然这个就是填写羽雀中获得的 token
  2. 那刚才说的,两个 secrets,还缺一个.这个我看好几个文章,有不同做法.在那个 action 的 deployment 插件,它可以选取 PERSONAL_TOKEN 或者 DEPLOY_KEY.我理解的是 PERSONAL_TOKEN 就是 dev 的 author token,DEPLOY_KEY 就是要填那个私钥.
  3. 所以你可以选择用选项的 Deploy keys,填入私钥;也可以直接在 secrets 中再用私钥增加一个 key.我选择的后者,命名为: HEXO_DEPLOY_PRIVATE_KEY;
7. github page 的库也有自己配置好,记得命名为 username.github.io
准备工作结束后,就可以开始配置 actions 的 workflow 了.
1. 在源码仓库,点击 actions
2. .github/workflows/main.yml 编辑并配置,同时你也可以选择线下在编辑器按照相应的路径新建 main.yml.配置好后上传.

name: Deploy To Github Pages

on: [push, repository_dispatch]

jobs:
  deploy:
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Shanghai

    steps:
      - name: Checkout Repository master branch
        uses: actions/checkout@master

      - name: Setup Node.js 12.x
        uses: actions/setup-node@master
        with:
          node-version: "12.x"
      # 这里有使用到羽雀的key,就是刚在setting中设置的值,如果你设置的变量名不同,请更改
      - name: Setup Hexo Dependencies and Hexo Sync Files
        env:
          YUQUE_TOKEN: ${{ secrets.YUQUE_TOKEN }}
        run: |
          npm install
          npm run sync

      - name: Generate Public Files
        run: npm run start

      # from https://github.com/peaceiris/actions-gh-pages
      # 这里也有使用的deploy key,可以参考这个action的文档,两种key都可以
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.HEXO_DEPLOY_PRIVATE_KEY }}
          external_repository: 用户id/库名 #xx-xx/xx-xx.github.io
          publish_branch: master
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }},
          keep_files: true

接下来就要配置 serverless,使用腾讯的云函数.(请查阅: hongwei )
1. 登录腾讯云服务器.
2. 搜索云函数.创建名称为 main_handler
3. 选择 python
4. 运行角色 SRC_QcsRole

# -*- coding: utf8 -*-
import requests
def main_handler(event, context):
    r = requests.post("https://api.github.com/repos/Nico-M/blog_source/dispatches",
    json = {"event_type": "start"},
    headers = {
        "User-Agent":'curl/7.52.1',
        'Content-Type': 'application/json',
        'Accept': 'application/vnd.github.everest-preview+json',
        'Authorization': 'token Github Api Token'})
    if r.status_code == 204:
        return "This's OK!"
    else:
        return r.status_code

可以测试如果成功,会返回 OK
配置出发方式,配置完后记下访问路径
配置 hexo-yuque
1. 配置羽雀的个人路径
  1. 新建一个知识库
  2. 管理新建的知识库
  3. 设置个人路径,尽量设置的容易记忆
  4. 工作台–>知识库–>找到新创建的知识库，管理–>设置–>开发者–>名称任意。URL 为云函数的地址，即上面获取到的 访问路径
2. 在本地添加 npm install yuque-hexo --save
3. 在 package.json 增加配置

{
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "语雀个人路径",
    "repo": "知识库名称",
    "mdNameFormat": "title",
    "postPath": "source/_posts",
    "onlyPublished": false
  },
  "scripts": {
    "start": "hexo clean && hexo generate",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "sync": "yuque-hexo clean && yuque-hexo sync"
  }
}

接下来就可以写一条推文测试下,在源码仓库应该会触发 actions.如果像下面这样,就成功啦.恭喜!!!🤗

这样一整条链就链接起来了

Issue:

实践过程中不免要遇到很多问题,有个困扰了我很久,不过最终还是解决了,总结一下,看有没有遇到同样问题的.

首先就是 next 主题 pull 之后,服务器无法运行, 记得要更新包
关于 git 的问题.默认我们的源码包就是一个源,但是 next 主题也是一个源,如果直接 push 时,next 主题的文件是不会上传的.所以当时出现了在 page 页面白屏的问题,问题无从查起.根源就是主题文件没有上传.正统的解决方案我也没有,我直接把 next 主题内的 .git 文件删除了.(不知道是不是需要用 submodule)
本地调试 gitalk 时,一直出现 404 , 就是 gitalk 里面的配置 repo 的问题;
在 github 会出现上传的图片无法显示,在 themes/next/layout/_layout.swig 头部添加 <meta name="referrer" content="no-referrer" />

结语:

好啦,以上就是全部啦,虽然现在部署一个博客很简单,但是一步一亲手操作过才知道真的不简单,作为一个前端,真的要好好学习后台的东西.

参考:

主要来源 hongwei: https://www.zhwei.cn/hexo-github-actions-yuque/
hexo 插件: https://github.com/x-cold/yuque-hexo
action: https://github.com/peaceiris/actions-gh-pages
hexo 官网: https://hexo.io/
next 中文文档: http://theme-next.iissnan.com/
Actions 官网中文: https://help.github.com/cn/actions

Nico酱的小站

自动化部署到Github

Hexo 和 nexT 主题的更新

更新机制的改变

更多配置

Issue:

结语: