Gitlab 與 Github 都有提供靜態空間頁面給我們放上靜態的 html, css, js 檔案，可以變成一個靜態頁面供網友存取，但 Github pages 的空間如果要變成私密的方式，不想要讓其他人可以直接下載你整包的網站 html 的話，只能 付費 才能夠有這個功能，Gitlab pages 則是免費就可以使用私密的方式架設你的網站，不需要額外付費

建立 Gitlab Pages 目錄

在你的專案中建立 public 目錄，並將你要部署到 GitLab Pages 的檔案全部放在這個 public 目錄中，這個目錄的 index.html 是網站的進入點

設定 Gitlab Pages 部署方式

建立 .gitlab-ci.yml 檔案，在 artifacts 設定 Gitlab pages 的目錄，並設定只有在 main 的分支才會部署

# .gitlab-ci.yml
image: alpine:latest

pages:
  stage: deploy
  script:
    - echo 'Do nothing'
  # gitlab page 目錄
  artifacts:
    paths:
      - public
  # 只有在 main 分支的 public 目錄才會被部署
  only:
    - main

部署 Gitlab Pages

將建立的網站 public 目錄及 .gitlab-ci.yml 檔案 push 到 Gitlab，然後到 Repo 的 CI/CD > Piplines 可以看到會立即執行部署的指令，看到狀態變更為 passed 就表示執行成功了

檢視部署的 Gitlab Pages

在 Repo 的 Settings > Pages 那邊可以看到你的 Gitlab Pages 的網址，預設是 https://<帳號>.gitlab.io/<專案位置>，從這裡就可以看到你部署上去的頁面了

設定 Gitlab Pages 存取權限

Gitlab Pages 可以做存取的限制

1. Repo 的成員才可以看到此頁面
2. 每個人都可以看到此頁面

GitLab Pages 預設是「Repo 的成員才可以看到此頁面」，若你想要設定 Gitlab 存取權限的話，可以到 Setting > General 頁面，然後在頁面下方的 Visibility, project features, permissions 區塊點選 Expand 展開權限設定

在 Visibility, project features, permissions 下方找到 Pages 區塊，選擇存取的權限按下儲存即可

• Only Project Members
• Everyone

這樣就可以公開您的 Gitlab Pages 在網路上給大家存取了

自訂網址 & SSL 憑證

如果你要自訂你網站的網址，可以點選右上方的 New Domain 按鈕，建立頁面網址，在頁面中輸入你要的網址，並請 Gitlab 幫您申請免費的 Let’s Encrypt SSL 憑證

建立完成後將 DNS 設定至您的設定內，並做驗證即可，驗證完成後就可以看到您的頁面可以透過自己的網址去連線了

Cloudflare DNS SSL 憑證

若你使用 Cloudflare 做你的 DNS 管理，必須要在 SSL 設定設定為 full 才能夠正確的取得 Gitlab Pages 的免費自訂網址 SSL 網址憑證

參考資料

• GitLab Pages | GitLab
• Tutorial: Create a GitLab Pages website from scratch | GitLab
• Exploring GitLab Pages | GitLab

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話，可以透過下面支付方式贊助作者喝咖啡，如果有什麼建議或想說的話可以贊助並留言給我

If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!