Hugo 实现 Coding + Github 自动化部署

@guole  |   2021-05-23T11:19:16+08:00  |  7 分钟阅读   |  更新于 2021-06-01T21:45:36+08:00

经过几天折腾,本站终于实现 Coding + Github 双平台自动化部署,guole.fun境内解析到腾讯云(Coding托管),境外解析到 Github Pages 页面,实现 Blog 快速访问。

起初,国内页面也直接托管在 Coding 的,但无奈这个平台部署触发规则有点……神奇?正常配置了分支更新自动部署,但还是每次要手动……

开始前,搞清我们有两个目录,一个是你的blog工程目录(源代码),一个是 Hugo 生成的静态文件目录blog/public。我们部署网站时,实际是把blog/public下的所有文件推送到仓库,利用平台网站托管,通过Jekyll方法构建静态网站。

使用 Git 子模块

最简单的方法,莫过于设置blog/public存储库为blog工程主仓库的子模块。方法很简单:

添加子模块

1
git submodule add git@github.com:kuole-o/kuole-o.github.io.git public

查看子模块

1
2
git submodule  
e33f854d3f51f5ebd771a68da05ad0371a3c0570 public (heads/master)

初始化子模块

如果此时展示的信息前,有个-,说明子模块文件还未拉取,则初始化子模块:

1
2
git submodule init
Submodule 'public' (git@github.com:kuole-o/kuole-o.github.io.git) registered for path 'public'

克隆了一个带有子模块的仓库,也需要执行上述初始化子模块的命令。

更新子模块

1
git submodule update

一次推送主仓库+子仓库

若不想每次 push 完主仓库,还得再操作一次子模块,则可以执行一次以下命令,然后git push就会自动更新主仓库+子模块:

1
git config push.recurseSubmodules on-demand

删除子模块

1
2
git rm --cached public
rm -rf public

删除.git/config.gitmodules文件中,[submodule "public"]相关的内容。

使用以上方法,基本可以一次 push,更新所有内容到 Github 了。接着,在 blog 工程的仓库中,创建 .github\workflows\gh-pages.yml文件,这是 Github Actions 自动部署时,使用的工作流文件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
#使用前,需要添加静态文件那个仓库为当前仓库的子模块,才能使用
name: github pages
on:
  push:
    branches:
      - main  # 每次推送到 main 分支都会触发部署任务
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
      - name: 'Building...'
        uses: reuixiy/hugo-deploy@v1
        env:
          DEPLOY_REPO: kuole-o/kuole-o.github.io
          DEPLOY_BRANCH: build
          DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
          TZ: Asia/Shanghai

这下,每次编辑好文章,执行git push origin main即可推送更新时,自动部署网站更新。

不过,以上方法只适合 Github 的自动化部署。实测 Coding 上,即便特别操作了,子模板也没法更新。于是个人使用以下方案:

我当前使用的部署方案

先说下思路,既然 git 子模块无法一次更新,不能把 public 下的静态文件推送到仓库,那我整个脚本不就完事儿了。

直接写了个 shell 脚本,结果可能是 Windows 下运行,有 git bash 和 shell 切换的原因?导致主仓库 push 完,剩下的命令不执行了……于是,又拆了个.bat的 Windows 批处理脚本,shell 执行完成后,最后一步自动调用这个 .bat,完事儿!

在 blog 目录下,创建一个blog.sh脚本:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.if using a theme, replace with `hugo -t <YOURTHEME>
hugo
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push coding main
./deplay.bat

再创建一个deplay.bat的批处理脚本。需要注意的是,得在 blog 同级目录下,创建一个名为guole.fun的目录,存放 Hugo 每次自动生成的静态文件。每次脚本拷贝时,会先删除旧文件(.git的版本库配置文件,会过滤保留)。且这个目录,得第一次手动创建一个git版本库,设置一个名为 coding 的远程仓库。可根据自己情况修改:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@ECHO on
cd ../guole.fun
for /D %%i in (*) DO (
	if not %%i==.git (
			echo 删文件夹:%%i 
			rd /S /Q %%i
            del /Q /F %CD%
	)
)
Xcopy ..\blog\public\*.* . /S /E
git add .
git commit -m "%date% %time:~0,5% update"
git push coding main --force
pause

以上完成后,每次码完博文,只需执行一个 ./*sh即可自动 push 网站源代码 + 静态文件到 coding。

接下来,使用 coding 持续集成功能,自动 push 代码到 github 上的工程仓库及网站静态文件仓库!

Coding 持续集成

搞完上面的东西,来配置下 Coding 持续集成。同样要创建一个项目,项目下创建两个仓库,一个为 blog 工程源代码仓库,一个为 Hugo 生成的静态文件仓库,作为部署网站的源。

在你的 blog 项目下,创建一个自动同步 blog 源代码到 Github 的集成任务。

Note

  • 代码源:CODING
  • 代码仓库:选择你的 blog 源代码仓库
  • 配置来源:使用静态配置的 Jenkinsfile
  • 节点池配置:使用 CODING 提供的云主机进行构建,选择 香港 机房(同步到 Github 快一些)

流程配置

直接选择文本编辑器,粘贴下面的代码,其中仓库信息改为你自己的:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
pipeline {
  agent any
  stages {
    stage('blog代码检出') {
      steps {
        checkout([
            $class: 'GitSCM',
            branches: [[name: env.GIT_BUILD_REF]],
            userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]
        ])
      }
    }
    stage('代码推送到Github/blog') {
      steps {
        echo '正在推送文件...'
        sh 'git fetch https://kuole-o:$Github_token@github.com/kuole-o/blog.git'
        sh 'git push -f https://kuole-o:$Github_token@github.com/kuole-o/blog.git HEAD:main'
        echo '已完成文件推送.'
      }
    }
  }
}

接着去 Github 创建一个 Token,https://github.com/settings/profile选择Developer settings,创建并记录下这个Token(勾选 repo)。点此查看详细创建方法

在 Coding 中,创建一个环境变量,名称为Github_token,值为字符串,就是刚才保存的 Token ,勾选保密。

接着配置触发规则:

Note

触发规则

  • 代码源更新:代码更新时自动执行
  • 勾选自动取消相同版本号
现在试试在 Coding 的 blog 仓库里,网页创建一个文件,稍等片刻,看看 Github 会不会自动更新出来,若是则成功了。继续配置一个,网站静态文件自动同步的集成任务。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
pipeline {
  agent any
  stages {
    stage('abc代码检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]],
          userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]
        ])
      }
    }
    stage('代码推送到kuole-o.github.io.git') {
      steps {
        echo '正在推送文件...'
        sh 'git fetch https://kuole-o:$Github_token@github.com/kuole-o/kuole-o.github.io.git'
        sh 'git push -f https://kuole-o:$Github_token@github.com/kuole-o/kuole-o.github.io.git HEAD:main'
        echo '已完成文件推送.'
      }
    }
  }
}

同样创建一个同名的环境变量,值与上述保持一致。至此,源代码和网站静态文件都会自动同步到 Github 了。GitHub 的网站托管,在代码更新时,会自动部署,就不用管了。Coding 托管静态网站,设置了代码更新自动部署,也无法生效,不得其解,于是我自己配置了一个腾讯云存储桶。

Coding 代码更新时,用构建计划自动部署到腾讯云。

自动化部署到腾讯云

Coding官方详细教程点此查看
首先去腾讯云,创建一个存储桶。https://console.cloud.tencent.com/cos5/bucket

Note

  • 存储桶名称:blog(或自定义)
  • 所属地域:广州
  • 访问权限:公有读私有写
像上面一样,创建一个“blog自动部署”的构建计划。其他配置同上,代码如下(无需改动,直接copy):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]], 
          userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]
        ])
      }
    }
    stage('部署到腾讯云存储') {
      steps {
        sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY} -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
        sh 'rm -rf .git'
        sh 'coscmd upload -r ./ /'
      }
    }
  }
}

Warning!

  • 这里,因为是部署到腾讯云广州机房,所以构建任务机房可以选国内,如上海
  • 一定要配置定时任务,否则你代码更新了,任务不触发……Coding抽风
在腾讯云中,创建一个 API 密钥 ,添加到 Coding 构建计划环境变量里。

终于!blog源代码 Coding + Github 自动同步,blog网站自动化部署,都已搞定。现在,试试本地 hugo new posts/test.md创建一篇文章,随便写点什么,然后draft: false,执行./*sh 试试看。

片刻之后,你的源代码将自动 push 到 Coding 和 Github,你的文章将自动发布在博客网站上!收工~~

  1. Hugo 国内腾讯云域名注册
  2. 使用 Hugo + Dream主题搭建个人Blog
  3. Hugo 启用 Twikoo 评论系统
  4. Hugo 设置不同页面共用一套 Twikoo 评论
  5. Hugo 实现 Coding + Github 自动化部署

评论区

avatar
关于我

Guo Le 的博客 ❤️❤️

你来到了一片知识的荒芜区 🏜🌵🏜🌵

心血来潮有此页面

  • 感谢 g1eny0ung 前人栽树
  • 一个喜欢瞎折腾的互联网打工人
  • 当前行业:人工智能 🤖🤖

免责声明 📢📢

  • 本站页面的部分内容,包括但不限于图片、音频、视频,来源于网络。由于无法深究其原作者,因此未曾署名。若您是部分内容原作者,且不希望本站使用,可联系本人删除。
其他

持续分享一些好玩的东西,或是美好的短文,又或者一段优美的文案。

欢迎与我交流,右边邮箱可联系到我。

斗胆放上乞讨码。😂😂
最好附加一下信息或者留言,十分感谢 💖💖

捐赠列表 💖💖

再次感谢以下朋友:

WeChat

  1. 2021.05.13 收到来自 浅浅 的 ¥8.88
  2. 2021.05.13 收到来自 宁哥 的 ¥8.88
  3. 2021.06.21 收到来自 浅浅 的 ¥1.88
  4. 2021.07.12 收到来自 。旧念 的 ¥8.88

留言板