單元 7 · GitLab Pages

內建靜態網站部署 — GitLab Pages

和 GitHub Pages 一樣:用 repo(專案)裡的靜態檔直接變成網站—— 但 GitLab Pages 的部署由 CI/CD 驅動,寫法稍有不同。

URL 格式 · URLs

部署後的網址 · URLS
GitLab.com:  https://USER.gitlab.io/PROJECT/
自架:        https://pages.example.com/PROJECT/
個人/群組頁: https://USER.gitlab.io/  (專案名 = USER.gitlab.io)

啟用 Pages · 用 CI 部署

GitLab Pages 需要一個特殊 job:`pages`,stage 固定 deploy,並把網站內容放進 public/

.gitlab-ci.yml · 靜態站
pages:
  stage: deploy
  script:
    - mkdir -p public
    - cp -r index.html assets public/
  artifacts:
    paths:
      - public
  only:
    - main
三步驟:(1)job 名叫 pages;(2)把網站檔複製進 public/; (3)用 artifacts 傳出 public。合併/push 後 GitLab 自動發布。

需要建置的專案(框架)

用 Node 建置工具時,在 job 裡先 build 再搬進 public:

.gitlab-ci.yml · Vite/Astro 範例
pages:
  stage: deploy
  image: node:20
  script:
    - npm ci
    - npm run build
    - cp -r dist public
  artifacts:
    paths: [public]

Pages 設定 · 自訂網域

在「Deploy → Pages」頁可設定:

與 GitHub 的差異:GitHub Pages 的「Deploy from branch」一鍵搞定; GitLab Pages 一定透過 CI job(pages)——多一個步驟,但也更靈活(可內嵌建置流程)。

限制 · Limits

項目限制
內容靜態檔案(無後端)
大小每個 Pages 站有一定上限(視方案)
流量免費方案有流量與建置分鐘上限
權限可設只有專案成員能看(GitHub 沒有)
看完這頁你應該能說出:
  • GitLab Pages 的網址格式。
  • pages job + public/ 部署的流程。
  • 框架專案如何 build 後再部署。
  • 與 GitHub Pages 的主要差異。

延伸閱讀