跳过正文

使用 Github Action + Hugo 实现推送仓库自动生成静态文件并推送到 Page 仓库

·2927 字·6 分钟· loading ·
技术教程 Github Page Github OpenWrt
褐瞳さん
作者
褐瞳さん
Everyone is mania in general
目录
自建博客 - 这篇文章属于一个选集。
§ 4: 本文

前言
#

我的这一篇文章说到了如何使用 hugo + github page 搭建自己的静态网站,但是每次都需要我们手动生成一次然后手动推送。而我又是用的源文件和生成文件分离的仓库,所以每次推送需要进行两次。在尝试使用 Github Actions 自动云编译 OpenWrt 的时候就想到还可以用来自动直接使用 Action 生成 Hugo 静态文件然后推送到我的 HeTongRe4per/HeTongRe4per.github.io 这个仓库中。

简单了解
#

Github Actions 是一个集成了许多操作的工具,可以帮助你实现自动化部署,测试,消息通知,定时任务 etc. 。实现方式是通过在一个或者多个虚拟机中按流程运行制定的指令。而 workflow 文件就相当于 Action 运行的脚本,哪一步改做什么,运行什么指令都是由你写在这个文件中的,你可以借助 ChatGPT 等人工智能来帮助你编写 workflow 文件。但十分建议看看这个视频:GitHub Actions工作流自动化的入门核心

TL;DR
#

  1. 直接跳转到 我的 workflow 这一步复制下来我的 workflow 然后创建一个 workflow 在.github/workflow/文件夹下创建一个deploy.yml,将我的文件粘贴进去;
  2. 确认自己主题和public/文件夹是否已经引入.gitmodules文件;
  3. 跳转到 创建和导入密钥 这一步创建密钥;
  4. Push 到源仓库。

开始
#

首先我们要清楚我们在使用 hugo 建站时的基本步骤:

  1. 安装 hugo
  2. 安装主题
  3. 调整页面,编写文章等
  4. 使用hugo指令生成静态页
  5. 进入生成的静态页文件夹public/推送到 Github Page 仓库中

现在我们知道了基本的步骤,而使用 Github Actions 实现自动化就是按照这个思路来撰写 workflow 文件。

整篇文章我将使用我自己的博客源代码仓库和 Page 仓库作为示例。

例如我网页的源代码存放在HeTongRe4per/Blog这个private仓库,而我实际的网页存放在HeTongRe4per/HeTongRe4per.github.io这个public仓库。

HeTongRe4per/HeTongRe4per.github.io

HTML
0
0

我想要实现的效果是每次只需用将我修改的网站源文件直接 Push 到HeTongRe4per/Blog这个源文件仓库中,然后源文件仓库的 Action 就开始下载 hugo,然后获取主题。获取到主题后就直接使用hugo指令生成静态页面到public/这个文件夹。接着将这个文件夹的内容全部 Push 到HeTongRe4per/HeTongRe4per.github.io这个仓库中就行了。因为使用<***.github.io作为仓库名时 Github 会自动将仓库中的文件自动进行发布当然也是使用的 Action,就不用我们自己编写 workflow 了。

撰写 workflow
#

YML 或者说 YAML 对格式的要求十分严格,可以参照 维基百科 - YAML 或者直接使用 YAML 格式检查工具 进行格式检查

创建 workflows 文件
#

首先我们需要在需要进行 Action 的仓库中创建一个文件夹.github/workflows/,这个文件夹专门用来存储运行 Action 的脚本,放在别的地方都是不能生效的。然后创建文件<文件名>.yml,其中文件名自己使用一个有辨识度的名字就行,但文件格式必须为.yml

workflow 基本属性
#

接下来我们就需要告诉 Action 它的名字、运行条件和使用的仓库分支等了:

name: <运行的时候显示的 Action 名字>

on:
  push:
    branches:
      - <分支名,一般为 main>

其中name后填运行时的 Action 名字;on后接运行条件,这里的条件就是接受到push时运行;运行的分支branches填入需要进行 hugo 的分支,一般都是main

添加 Jobs
#

填入了基本的内容后就需要创建 Job 了,填入作业名字,然后选择运行的平台:

jobs:
  <job名字>:
    runs-on: <运行平台>

作业步骤
#

接下来就需要告诉 Action 这一个 Job 的作业流程了:

jobs:
  <作业名字>:
    runs-on: <运行平台>

    steps:
    - name: <步骤名字-1>
      uses: <使用的工作流模版-1>
      run: <需要运行的指令-1>
      with: 
        <工作模版的额外参数-1-1>
        <工作模版的额外参数-1-2>

    - name: <步骤名字-2>
      uses: <使用的工作流模版-2>
      run: <需要运行的指令-2>
      with: 
        <工作模版的额外参数-2-1>
        <工作模版的额外参数-2-2>

以模块形式导入主题文件和 public 文件夹
#

如果你是按照我的搭建 Github Page 的教程进行搭建的话就只需要将public/导入子模块就行,如果不是的话就需要你将以前的主题文件夹先删除,然后使用下面指令以子模块形式导入主题。

git submodule add <仓库地址>.git themes/<主题名>

例如我的:

git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

接下来添加public/文件夹,修改站点根目录下的.gitmodules添加以下这一段就行:

[submodule "public"]
    path = public
    url = <你 Page 的仓库地址>

例如我的.gitmodules

[submodule "themes/blowfish"]
        path = themes/blowfish
        url = https://github.com/nunocoracao/blowfish.git
        branch = main

[submodule "public"]
    path = public
    url = https://github.com/HeTongRe4per/HeTongRe4per.github.io

创建和导入密钥
#

因为我们如果想要跨仓库推送,而 Action 本身只有自己仓库的操作权限,所以我们需要给 Action 一个可以跨仓库推送的token

  1. 前往 GitHub 的 个人访问令牌设置页面
  2. 点击「生成新令牌」(Generate new token),选择「生成新 Token(classic)」
  3. 「Token name」自己填一个有辨识度的即可,「Expiration」选择「No expiration」,「Select scopes」勾选「repo」和「workflow」

生成密钥

  1. 点击最底下的「Generate token」按钮,将会显示里的token,点击右边的复制按钮复制下来。注意,这个token只会显示一次,请务必复制下来保存好

密钥

  1. 打开源文件的仓库「Settings」->「Secrets and variables」->「Actions」,点击 「New repository secret」
  2. 将「NAME」设为你希望的名称
  3. 将第四步生成的个人访问令牌粘贴到「Value」字段中。

导入密钥

我的 workflow
#

那么按照以上步骤,就可以写出来我们自己的 workflow 了,注意,第 30 行和 32 行肯定需要修改的,第 30 行的密钥名称PUBLIC需要修改为创建和导入密钥这一步中最后设定的名字;第 32 行仓库地址改为自己的 Page 页的仓库地址

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2
      with:
        submodules: true        # 使用子模块

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

    - name: Build the website
      run: hugo --gc --minify --cleanDestinationDir # 这里我加了附加参数,可以不需要

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        personal_token: ${{ secrets.PUBLIC }}   # PUBLIC 请改为你设置的 Secret 名称
        publish_dir: ./public
        external_repository: HeTongRe4per/HeTongRe4per.github.io    # 改为你自己的仓库
        publish_branch: main    # push 的仓库的分支

最后
#

以上全部完成后直接进行 push 就行:

# 添加所有文件到 git 缓存
git add .

# 添加提交描述
git commit -m "<提交说明>"

# 进行推送
git push -u origin <分支名,一般是main>

然后进入你的仓库 Action,就可以看见运行情况了。橙色是在运行中,蓝色的勾代表成功,红色的小叉代表失败。

运行结果

当然你可以使用这个方法给你的 OpenWrt 实现自动云编译,不需要服务器,不需要外网环境。

HeTongRe4per/OPi-R1-Plus-LTS-OpenWrt

For OrangePi R1 Plus LTS

C
0
0

我就直接放我的脚本吧(肯定不能直接照抄,里面很多参数都是我有部分个性化的):

name: Build OpenWrt

on:
  push:
    branches:
      - openwrt-21.02
  pull_request:
    branches:
      - openwrt-21.02
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-22.04
    permissions:
      contents: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          submodules: true

      - name: Show git config
        run: |
          git config --list
          git branch -a          

      - name: Set up Build Environment
        run: |
          sudo apt-get update
          sudo apt-get install -y gcc binutils bzip2 flex python3 perl make grep unzip swig gawk subversion libz-dev libc-dev rsync libncurses5-dev libncursesw5-dev libpam0g-dev liblzma-dev libsnmp-dev libnetfilter-queue-dev liblzma-dev libpam0g-dev          

      - name: Modify CMakeLists.txt for UA2F
        run: |
          sed -i 's/set(CMAKE_C_STANDARD 17)/set(CMAKE_C_STANDARD 11)/' package/build-ext/UA2F/CMakeLists.txt          

      - name: Compile OpenWrt
        run: |
          ./scripts/feeds update -a
          ./scripts/feeds install -a
          make defconfig
          make -j$(nproc)          

      - name: Upload Build Artifacts
        uses: actions/upload-artifact@v3
        with:
          name: openwrt-build
          path: |
            bin/targets/rockchip/armv8/**            
          if-no-files-found: error
          exclude: |
            bin/targets/rockchip/armv8/packages/**            

      - name: Set Tag Prefix
        run: echo "TAG_PREFIX=$(date +'%Y%m%d%H%M')" >> $GITHUB_ENV

      - name: Create Release
        id: create_release
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: openwrt-build-${{ env.TAG_PREFIX }}
          release_name: OpenWrt Build ${{ github.run_number }}
          draft: false
          prerelease: false

      - name: Upload files to release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          RELEASE_TAG="openwrt-build-${{ env.TAG_PREFIX }}"
          find ./bin/targets/rockchip/armv8 -maxdepth 1 -type f | while read file; do
            gh release upload "$RELEASE_TAG" "$file" --clobber
          done          

本文作者: 褐瞳さん
本文链接: https://www.hetong-re4per.com/posts/compile-openwrt-with-github-action/
版权声明: 本文文字在未特别注明下默认使用 CC BY-NC-SA 4.0 许可协议。

自建博客 - 这篇文章属于一个选集。
§ 4: 本文

相关文章

如何使用 Github Page 搭建自己的博客
·4595 字·10 分钟· loading
技术教程 Github Page Hugo
为 OrangePi 编译属于自己的 OpenWrt
·1339 字·3 分钟· loading
技术教程 OpenWrt OrangePi 开发板
校园网防止多设备检测指北
·2551 字·6 分钟· loading
技术教程 校园网 OpenWrt 多设备检测