如何部署 Hugo 至 gitlab page 並導向 Gandi 網域？

GanniPiece
技術

Table of Contents

前言

之前的個人網頁一直是存放在 Github 上面，透過 Github Action 部署 Hugo 靜態網頁，然後再將自己的網域導向 Github Page 的位置。這樣的流程為寫作帶來相當多的便利，好比說一旦流程串起後，我便不需要理會部署的問題，只要專心內容就好。

然而，這之中有一個小缺點：放置 Github Page 的 repo 必須是公開的，想要轉為私人 repo，也不是不行，就是錢的問題。另一方面，Gitlab Page 目前仍提供了 private repo 部署的 Gitlab Page 的選項，想說就趁這個機會，將原先的流程轉移到 Gitlab 上來。

在接下來的介紹中，我會分成以下三個階段介紹：

  1. 轉移 Github repo 至 Gitlab repo
  2. 設定 Gitlab CI/CD 部署文件
  3. 將網站導向個人 Gandi 網域

轉移 Github repo 至 Gitlab repo

  1. 在 Gitlab 頁面點選 New Project 創建新專案
  2. 點選 Import project 選項
  3. 選擇 Github import
  4. 連結個人的 Github account
  5. 選擇 Github 專案，並將其導入 Gitlab
  6. 確認 repo 底下為 Hugo 的檔案結構
  7. 完成

設定 Gitlab CI/CD 部署文件

在專案底下，我們需要建立一個 .gitlab-ci.yml 的文件，作爲 CI/CD 的設置。

  1. 在 repo 頁面，點擊 + 新增文件 (New file)
  2. 將檔名設置為 .gitlab-ci.yml
  3. 新增配置內容
yaml
 1# To contribute improvements to CI/CD templates, please follow the Development guide at:
 2# https://docs.gitlab.com/ee/development/cicd/templates.html
 3# This specific template is located at:
 4# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Pages/Hugo.gitlab-ci.yml
 5
 6---
 7# All available Hugo versions are listed here:
 8# https://gitlab.com/pages/hugo/container_registry
 9default:
10image: "${CI_TEMPLATE_REGISTRY_HOST}/pages/hugo:latest"
11
12variables:
13GIT_SUBMODULE_STRATEGY: recursive
14
15test:
16script:
17    - hugo
18rules:
19    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH
20
21pages:
22script:
23    - hugo
24artifacts:
25    paths:
26    - public
27rules:
28    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
29environment: production

  • 這個 Gitlab 預設給 Hugo 的配置文件中分成三個部分，環境參數、測試 與 部署。
    • 環境參數
      • image: 作為本次部署的容器環境
      • GIT_SUBMODULE_STRATEGY 設置為 recursive，能自動更新相依的 repo
    • 測試 test
      • 執行於任何非預設 branch 的程式碼
    • 部署 deploy
      • 執行預設 branch 的程式碼
  1. 提交程式碼
  2. 在 Build > Pipelines 頁面底下，確認工作是否被成功 triggered

自動化發布排程違章（定時 deploy 網站）

以我自己的使用情境來說，我希望每天網站都能重新 deploy 一次。如此一來，排程在未來發佈的文章，就會在當天自動上線毋需自行管理。

要做到自動排程，我們可以前往 Build > Pipeline schedules1 頁面新增一個排程。

  1. 前往 Pipeline schedules 頁面
  2. 點擊新增排程 New schedule 按鈕
  3. 設定 Description 描述
  4. 選擇 Interval Pattern
    • 我希望每天凌晨 12 時進行這個自動化的作業，因此在 Custom 的選項中設置為 0 0 * * *。
  5. 選擇 Cron2 timezone
    • 設定為台灣時間 UTC+8
  6. 選擇要執行的 branch 或是 tag
  7. 勾選 Activated checkbox
  8. 點擊 Create pipeline schedule
  9. 完成

將網站導向個人 Gandi 網域

最後一步是將自己的 Gandi 網域名導向 Gitlab page。完成這步前，首先你需要先購買 Gandi 的網域方能實現。

假設你已經有一個 Gandi 的個人網域了，首先第一步要做的事情是設定 Gitlab 並獲取相關憑證。

設定 Gitlab page

  1. 前往 Settings 頁面，展開 Visibility, project features, permissions
    • 1.1 將 Project visibility 設定為 Private
    • 1.2 將 Pages 的權限從 Only Project Members 設定為 Everyone
  2. 前往 Deploy > Pages 頁面
    • 2.1 勾選 Use unique domain 並儲存設定
      • use-unique-key
    • 2.2 點擊 New Domain 加入 Gandi 的 domain
    • 2.3 確認頁面資訊
      • 尚未進行認證前 Verified 提示應該為 Not verified
      • pages-domain
    • 2.4 記住 DNS 及 Verification status 中資訊，我們將在下一個步驟中使用

設定 Gandi DNS

  1. 進入 gandi.net 頁面中，域名 > DNS 紀錄 頁面
  2. 點擊新增紀錄，建立一個 A 類型的文件
  3. 名稱中加入上一步設定的 domain name
    • e.g. blog.gannipiece.tw
  4. 設定 IPv4 位置為 35.185.44.232，此 IP 為目前 (2023) 所有 Gitlab page 之 IP
  5. 回到上一層，再次點擊新增紀錄，建立一個 TXT 類型的文件
  6. 設定相同域名名稱
    • e.g. blog.gannipiece.tw
  7. 設定文字參數 為上一步中得到 Verification status 中 TXT 後的文字內容
  8. 建立完成
  9. 等待約莫 30 分鐘後，即可完成認證與設定

小結

這篇文章中，紀錄了如何將 Github Page 轉移到 Gitlab Page 上，並且將 Gandi 的網域指向自動部署的 Gitlab 頁面上。除此之外，也紀錄了如何在 Gitlab 上透過 CI/CD 排程自動部署 Hugo 靜態網頁。

其中可能有幾點比較需要注意的是，在導向 Gandi 網域時，DNS 的設定並非如在 Github Page 上的做法。

在 Github Page 中，我們設定的是 CNAME 的類型，而在 Gitlab 頁面中，則是 A 類型的文件。並且，在該文件中，我們需要設定 IPv4 的位置，該位置為固定的 35.185.44.232。 另一方面試 TXT 的認證文件中，需要將 Verfication status 中 TXT 字段後的所有文字貼上，而非僅止 code 的部分。都是與過去設定 Github page 有稍微出入之處。

設定過程中需要注意。

references

  1. scheduler https://docs.gitlab.com/ee/ci/pipelines/schedules.html ↩︎

  2. Corn https://docs.gitlab.com/ee/topics/cron/ ↩︎