水月小筑

@叶知秋

今儿的风,甚是喧嚣。

  • 北京 | 东城
  • https://yezheng.fun
  • 网站已被续

叶知秋

  • 折腾
  • # Hugo # blog
  • 2625 字

利用GitHub Actions自动化部署Hugo博客到阿里云OSS

需求

自 Hugo 博客建立以来,一直在用那个就几个命令叠一块都称不上是脚本的脚本来负责部署,但是也只能部署到 GitHub Pages 这类仓库,而由于 GitHub Pages 国内网速太慢、Coding Pages 又时常宕机,Gitee码云要钱,最终我还是觉得对象存储的静态页面最为靠谱。

用Mac一直有个担忧,由于它是不可拆卸硬盘,万一哪天电脑打不开了,我的数据怎么办,因为它真的很老了,感觉哪一天随时都有可能直接罢工。所以我的博客源码一定要备份到 Git 仓库。事实上很多网友都会把博客源码也放在GitHub上,甚至公开。

由于部署时 public 文件夹已经建立了Git仓库,此时再在博客根目录新建git仓库以备份就会出现莫名错误,因为冲突了,将根目录仓库的 .gitignore 文件中加入 public/ 就可以解决这个问题。

现在我的需求是,根目录仓库用以备份源码,public 仓库用以部署在 Coding Pages 上的静态网站,作为每次本地修改过后的网络端测试,毕竟有时候本地测试正常到远端情况又不一样了,只需执行一下我的那个懒人脚本,而由于是 Hugo,这个过程啪的一下非常快,待一切满意以后,阿里云OSS再部署一次最终的 public 文件夹内内容,作为主站对外展示。

就如何把 public 静态内容推送到阿里云对象存储,我折腾出了好几套方法,你可以下载阿里云OSS 的桌面客户端「OSS Browser」,可视化操作很方便,每次打开文件夹将所有东西直接丢进 bucket,用域名访问就已经是新的内容了,很快啊!你也可以使用命令行工具,阿里云官网提供了「OSS Util」,用几行命令将本地文件夹内的文件复制上传至 bucket,原理跟前者一样,只不过在命令行里操作逼格看起来高一点,也是把命令写进一个脚步文件,每次执行即可。

那么,有没有什么办法可以实现阿里云OSS 的自动部署呢,上述两种方法都略显繁琐,给人一种不大聪明的亚子!后来终于让我发现了一个神器:GitHub Actions。

GitHub Actions 自动部署工作原理简述

关于如何给 Hexo 博客自动部署的教程网上已经数不胜数,Hugo 异曲同工,我就是看 Hexo 的教程举一反三的,我并不打算重复造轮子,这篇文章一如既往只是个记录,方便失去后复现。

GitHub Actions 作为官方 CI/CD 的新功能模块,这玩意博大精深,咱们要用的功能只是其冰山一角,不过以我的水平,太复杂的东西我也用不了也不想碰。简而言之,在简单设置一番后,它可以帮助我们在每次推送代码到GitHub仓库后,自动化部署博客代码到阿里云OSS 或别的载体上。

之前折腾过 Netlify 部署 Hexo、jekyll,Netlify 会自动监控 Github 仓库的变更,在变更后自动使用自己的 node.js 或 ruby 环境帮你编译生成好博客,并推送到它自己的 CDN 网络中,Github Action原理类似,但是功能更强大一些,只是配置起来也稍微麻烦一丢丢。

每次我们推送源代码成功后 GitHub 就自动在他们的服务器上搭个博客运行环境,并生成 public 静态文件,再复制上传到 OSS bucket,这一套流程是全自动化的,搭环境生成静态文件这一切都是在远程进行的,和我们本地的环境和文件不搭噶。

假设你还没有备份过源码到 GitHub,先创建一个新 repository 来装本地推送的源码,并设为私有仓库,我不好意思像网友们那样公开源代码,我怕社死。

建好以后,切记不要初始化,初始化就会让远程仓库里有东西了,后面再与本地建立联系就会冲突。

阿里云OSS 使用客户端时就会让你新建一个子账户,只给这个子账户操控 OSS 的权限,其他业务它没有权限,这样相对安全一点,我建议你照做,当然你也可以直接用主账户,但这样显得很虎。准备好子账户的 AccessKey IDAccessKey Secret,下面要用。

AccessKey

本文默认 Hugo 博客和阿里云OSS 静态页面展示网站都已经会弄,这里不再赘述。

配置密钥

GitHub 要与阿里云OSS 建立联系并试图往里面传数据,必然要求通过密钥去访问阿里云 API,而我们不可能在 GitHub Actions 脚本中明文显示,所以则需要配置一下GitHub,登录GitHub官网,进入博客源代码仓库,选择 Setting/Secrets/Actions,New repository secret 按钮,新建两个变量,名称自己定,值就是前面阿里云子账户的 AccessKey IDAccessKey Secret

Actions secrets

创建 workflow 脚本

与 GitLab CI、Travis CI 不同的是 GitHub Actions 功能是建立在一个个 action 之上的,官方已经提供需要方便好用的 action,针对环境的部署与配置会比 GitLab CI 和 Travis CI 方便很多。下面直接上手好理解点。

相信很多小伙伴已经注意到了,这玩意很像 iPhone 的捷径啊!对 iOS 生态了解的童鞋应该都知道,以前有一款神器,名字就是 Workflow,常年入选iOS推荐软件,后来 Workflow 的开发团队被 Apple 招安了,在 iOS12 正式成为 iOS 预装程序,并改名为捷径,现在叫快捷指令。在 GitHub Action 里,持续集成一次运行的过程,也叫做一个 workflow。

GitHub Actions 相关术语:

  1. runner:github 分配的用来执行 CI/CD 的构建服务器 (也可以自建 runner)
  2. workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。
  3. job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。
  4. step(步骤):每个 job 由多个 step 构成,一步步完成。
  5. action (动作):每个 step 可以依次执行一个或多个命令(action)。

在博客根目录下新建一个 .github/workflows/ 两层文件夹,这是 GitHub Actions 默认读取的配置文件目录,新建一个 workflow 脚本 ci.yml,文件名可自定义,内容如下:

name: MainWorkflow

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: Setup Hugo Environment
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: '0.55.6'
    - name: Build
      run: hugo --gc --cleanDestinationDir --minify
    - uses: manyuanrong/setup-ossutil@v2.0
      with:
        # endpoint 可以去oss控制台上查看
        endpoint: "oss-cn-hongkong.aliyuncs.com"
        # 使用我们之前配置在secrets里面的accesskeys来配置ossutil
        # OSS_ID、OSS_KEY 是前面自定义的变量名
        access-key-id: ${{ secrets.OSS_ID }}
        access-key-secret: ${{ secrets.OSS_KEY }}
        sts-token:
    - name: Deply To OSS
      # oss://easter/ 是博客所用的bucket的阿里云内部链接,根据实际情况调整
      run: ossutil cp public oss://easter/ -rfu

至此,我们的工作都完成了,再次推送代码,就会触发脚本,帮助我们自动部署博客到 OSS,可以在 GitHub 仓库界面的 Actions 查看脚本执行过程。

Actions

本文写于2022年5月24日,这篇文章日期距今已是差不多整整两年,我滴拖延症啊!时至今日,Coding.net 早已弃用,Coding Pages 也已下线好久了,换成腾讯云的一个新业务(云开发 CloudBase)可以继续托管静态页面,但只能在内地,所以我无法自定义域名,但我也搞了,在 Coding 这里推送到 hugo/public 仓库,会自动在腾讯云那个业务端部署。注意区分这个腾讯云新业务和 COS静态托管,COS 现在香港存储桶支持无需 CDN 也能自定义域名了。最终这俩我都没使用,轻度用用就哗哗掉钱。腾讯系的算是彻底废了,没法用。Coding 作为 GitHub 中国版都不够格,太不稳定了,很拉,转了一圈,还是 GitHub 原创正版最为给力,现在又投入微软爸爸的怀抱,更加财大气粗,就是网速越来越拉了。