Github Actions 实践 – Actions, Hugo, Cloudflare 工作流

– 实现一个优雅便捷的博客快速构建发布工作流

最近新买了个188十年的域名，想着把它利用起来。

原本本网站服务器位于境内，其实是有ICP备案的，而我人主要在国外，总觉得有点不方便。

在此之前，我的文章和Hugo都放置在一起，放置在服务器上。这就导致每次写完文章都要单独ssh进服务器构建。这就非常麻烦。想必也能看到我到现在拢共也没写几篇，只是闲的慌的时候才来写一写。

痛定思痛，我准备尽量在本地使用Typora书写，然后致力于实现一个Push就可以同时发布在境内境外两个网站上的能力。

在了解了一番之后，我决定依靠GitHub Actions来实现这一点。

大体架构

推送到GitHub Pages并由CloudFlare CDN进行除中国大陆之外的全局加速

Contents -> Blog Resources(Pages Branch) -> GitHub Pages

由于大部分普通的方法是将content和blog resources放在一起了，虽然这可以省下来一步，但是很不优雅啊。在开始写文章之前就已经被文件夹下那么多其实和文章内容无关的文件夹和文件弄烦了。

最终我决定将文章内容单独拿出来放在一个储存库中。

Contents 储存库中设置了一个Action，当储存库有push时，将contents的内容更新到Blog 存储库中。实现及其简单粗暴，能跑就行：

name: Copy to Blog

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  copy-file:
    runs-on: ubuntu-latest
    steps:
     - name: Checkout
       uses: actions/checkout@v2
     - name: Clone destination repository
       run: |             
         git clone https://*******:${{ secrets.BLOG_TOKEN }}@github.com/*****/*****.git
         git clone https://******:${{ secrets.BLOG_TOKEN }}@github.com/*****/*****.git
         cd Blog
         git config user.name "*****"
         git config user.email "*****"
         rm -rf content
         cd ..
         sudo mv Web-Contents/content Blog
         cd Blog
         git add .
         git commit -m 'update content'
         git push origin master

而在Blog存储库中，则使用了如下Hugo的构建命令：

# Sample workflow for building and deploying a Hugo site to GitHub Pages
name: Deploy Hugo site to Pages
on:
 push:
    branches:
      - master  # Set a branch to deploy
 pull_request:
 # Allows you to run this workflow manually from the Actions tab
 workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo -D

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          external_repository: HaldenMemphis/HaldenMemphis.github.io
          personal_token: ${{ secrets.HUGO_TOKEN }}
          publish_dir: ./public
          publish_branch: main

其中，由于GitHub Pages配置了自定义域名，并交由CloudFlare CDN进行境外加速，于是我们会被要求在 Pages 存储库中放置一个CNAME文件在根目录。

我的做法是将CNAME文件放置在Blog存储库中的public文件夹下，这样在hugo进行构建的时候会将CNAME文件带到网站的根目录下，并且由Actions连同网站内容一起推送到Pages存储库中。

推送到Server端，并交由Tencent Cloud CDN 进行中国大陆境内的加速

Contents -> Blog Resources(Server Branch) -> Server

在Blog存储库中创建如下的Actions：

name: Deploy Hugo site to Server
on:
 push:
    branches:
      - top  # Set a branch to deploy
 pull_request:
 # Allows you to run this workflow manually from the Actions tab
 workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo -D

      - name: Deploy
        uses: wlixcc/[email protected]
        with:
          username: 'root'   # ssh user name
          server: '${{ secrets.SERVER_IP }}' # 引用之前创建好的secret
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} # 引用之前创建好的secret
          local_path: './public'  # 对应我们项目build的文件夹路径（config.yml）
          remote_path: '/var/www/site_path' # 要部署到的位置

以上，一个优雅便捷的博客快速构建发布工作流便完成了。