Hugo + Gitlab CI/CD 实现自动部署博客到阿里云OSS (S3)

前言

半年前博客挂了以后拖延症犯了，一直没有修复和更新，直到管局催我恢复访问才折腾起来。

以前的自动部署技术方案是：通过gitlab的webhook + 服务器上的程序实现的自动部署。

flowchart TD
  A[gitlab有新提交] --> B[触发webhook]
  B -->|webhook| C[服务器端小程序 执行hugo命令构建静态文件]

服务器提前配置了nginx，并将虚拟主机的root目录设置到了hugo的public文件夹下，这样一来就实现了自动构建和“部署”。

但是现在不想再把博客单独部署在某个服务器上，希望尽量“Serverless”，于是新的技术方案大概如下：

flowchart TD
    A[提交到gitlab仓库] --> B[GITLAB CI/CD]
    B --> C[CI使用hugo构建静态文件]
    C --> D[推送CI构建结果推送到阿里云OSS上]

至于为什么不使用gitlab的pages，主要原因是gitlab pages在国内访问速度较慢。

GITLAB CI/CD设定

自行在项目下建立 .gitlab-ci.yml ，内容如下，需要根据说明和注释作必要的修改

stages:
  - build
  - deploy

build-job:
  stage: build
  image: hugomods/hugo:ci-0.131.0   # 这里是docker镜像, 请根据需要修改tags, 我使用的主题不支持很高的版本, 这里选用0.131.0
  before_script:
    - git submodule update --init   # 这个必须带, 因为我是使用git submodule引入的主题文件
  script:
    - hugo
  artifacts:
    paths:
      - public
  after_script:
    - echo "Hugo build completed!"

deploy-job: 
  stage: deploy
  image: alpine
  before_script:
    - wget https://gosspublic.alicdn.com/ossutil/v2/2.1.1/ossutil-2.1.1-linux-amd64.zip
    - unzip ossutil-2.1.1-linux-amd64.zip
    - cd ossutil-2.1.1-linux-amd64
    - cp ossutil /usr/bin/ossutil
    - chmod 755 /usr/bin/ossutil
    - cd ..
  script:
    - /usr/bin/ossutil sync ./public/ oss://$OSS_BucketName -i $OSS_AccessKeyId -k $OSS_AccessTokenSecret --region rg-china-mainland -e $OSS_Endpoint --delete -u

如果你用的也是hugo，也是阿里云OSS，原封不动照抄即可。

变量设置

为了避免密钥泄漏风险，我们没有将密钥直接写入在ci/cd文件，而是使用变量替代，所以我们也需要设置变量。

在项目的设置 -> CI/CD -> 变量中添加所需的变量

image-20250617144504526 image-20250617144527871

我们要添加OSS_BucketName、OSS_AccessKeyId、OSS_AccessTokenSecret、OSS_Region、OSS_Endpoint五个变量，分别对应你的阿里云OSS桶、阿里云AccessKeyId、阿里云AccessTokenSecret、OSS区域名（有坑注意）和访问点，这五个东西我们可以在阿里云这五个地方找到，怎么创建OSS桶略。

找到你的OSS桶，点开详情，第一个就是BucketName

image-20250617144921111

地域这个字段记下来，随后跑到阿里云文档找到OSS_Region：https://help.aliyun.com/zh/oss/user-guide/regions-and-endpoints 注意不是“OSS专用地域ID”

image-20250617145033839

AccessToken和AccessID请参见我的另一篇博文：https://naturesuki.net/post/post-24-05-18-1/#%E7%94%9F%E6%88%90%E4%B8%80%E4%B8%AA%E8%AF%81%E4%B9%A6dns%E6%A8%A1%E5%BC%8F ，这里添加的权限是AliyunOSSFullAccess。

这样我们就得到了五个值，逐个添加到gitlab中即可，这里以添加OSS_BucketName为例：

image-20250617145606014

此处需要注意可见性要根据情况设置，比如OSS_BucketName、OSS_Endpoint、OSS_Region并不属于敏感信息，可以直接设置为可见。至于OSS_AccessTokenSecret这类属于敏感信息，则设置为“隐藏”乃至“掩码并隐藏”。

保存后提交到gitlab上，然后尝试运行一下pipeline（流水线），观察通过情况。