GitLab Pages:3 + 2 個步驟讓 GitLab 專案產生靜態頁

/

GitLab生成靜態頁,私人專案也行

GitHub、GitLab,這兩家都有生成靜態頁的功能。

GitHub 勝在它一鍵就可以生成,沒有過多的設定,本站很多 Demo 頁都是直接用 GitHub Pages 生成的。但它有一個缺點,就是如果專案是 Private 的(私人專案),免費會員就無法生成靜態頁,一定要成為付費會員才行。

GitLab 在生成靜態頁的步驟沒有一鍵生成這麼簡單,但勝在即使是免費會員,也可以在私人專案上生成靜態頁。

本篇筆記用最簡單的方式,將 GitHub 的私人專案生成一個靜態頁。


GitLag Pages,生成靜態頁 3 + 2 步驟

GitLab 要生成靜態頁,主要三步驟如下:

  1. 專案上建立一個「public」資料夾,把要生成靜態頁的檔案,都放在這個資料夾內。
  2. 專案的根目錄,新增一個 .gitlab-ci.yaml 的檔案。
  3. 專案 push 到 GitLab 上。

另外的二個步驟,其實就是等待 GitLab 的處理:

  • 等 gitlab pipelines 顯示狀態為「passed」
  • 輸入 GitLab Pages 產生靜態頁後的網址,看到頁面

將 3 + 2 步驟整理成圖:

3+2步驟流程圖(點擊看原圖)
3 + 2 步驟流程圖(點擊看原圖)

1 要生成靜態頁的檔案都放進「public」資料夾內

這邊 August 直接從 https://templated.co/ 上抓一個 Demo 下來操作。

一般來說,我們專案內的資料夾,大概會是這樣子:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

一般資料夾的結構
一般資料夾的結構

根目錄下放 HTML 的檔案,然後把要引用的其它資源像 .css、.js 檔收在一個資料夾中,如 templated 上都收在 assets 裡。

但如果今天想要把 GitLab 的專案生成靜態檔,就必須要把所有要生成靜態檔的檔案,都放在一個名稱是「public」的資料夾內。

不在「public」資料夾中的檔案,就不會生成靜態頁。

這種概念蠻好的,像是我們就可以把開發跟發行二種的檔案分開來,開發用的檔案像 .sass 之類的就放在 src 資料夾,.sass 編譯出的 .css 就放在 public 資料夾。

這一點雖然麻煩了點,但因為支援私人專案,所以是一個優點。像 GitHub 一鍵生成的是快速方便,但同時我們開發用的檔案也一併就公開了,這就是所謂的愈快速就愈不安全、愈麻煩就愈安全。

原本的資料夾結構,放在 public 中後就像這樣:

放在public後的樣子
放在 public 後的樣子

把需要公開成頁面的檔案放進 public 中,其它不用被公開的檔案就放 public 之外。


2 建立 .gitlab-ci.yaml 的檔案

第二步說難不難,說簡單也不簡單。

當然,這邊我們用最簡單的方法,就是直接下載一份別人寫好的檔案,複製貼上到我們的專案內就好。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

GitLab 有提供一些 .gitlab-ci.yaml 的範本:GitLab Pages examples

我們要建立的是 HTML 檔案,就找 plan-html 這個專案,點進裡面的 .gitlab-ci.yaml 這個檔案,然後,我們很直接的按下 download,最後把我們 download 下來的檔案放進我們的資料夾就好了 XD~

.gitlab-ci.yaml 的檔案只有幾行,也可以自行新增然後複製貼上:

image: alpine:latest

pages:
  stage: deploy
  script:
  - echo 'Nothing to do...'
  artifacts:
    paths:
    - public
  only:
  - master

.gitlab-ci.yaml 還有很多東西可以寫,有興趣的朋友可以自行閱讀說明文件:

Creating and Tweaking GitLab CI/CD for GitLab Pages

GitLab CI/CD Pipeline Configuration Reference

這邊我們就直接無腦的下載 .gitlab-ci.yaml 檔案並放進我們專案資料夾,記得檔案放進資料夾後,檔名要手動把第一個的「.」加回去,這步驟才算完成:

把.gitlab-ci.yaml放進專案資料夾
把 .gitlab-ci.yaml 放進專案資料夾

* 補充說明,開頭是「.」的檔名,用資料夾看時一般是看不見的隱藏檔,這邊為了說明要放在根目錄,所以先把開頭的點拿掉作截圖。


3 專案 push 到 GitLab 上

這步驟就不說明了,基本上會看到這篇的朋友,應該是已經有專案在 GitLab上,只是煩惱要怎麼生成靜態頁而已。

專案 push 上去後,接下來就是等 GitLab 收到 .gitlab-ci.yaml 檔後,執行 CI / CD,最後發佈成靜態頁,我們繼續看下去。


+1 等 gitlab pipelines 顯示狀態為「passed」

我們 push 完檔案上 GitLab 後,會看見我們的專案首頁多了一個暫停符號的 icon:

專案首頁多了暫停icon
專案首頁多了暫停 icon

接著我們點選左側選單的「CI / CD」,可以看見目前整合佈署的狀況顯示「pending」:

狀態顯示為pending
狀態顯示為 pending

然後我們就只能等了,等 Status 從 pending 變成 passed,passed 的畫面會是這樣:

狀態顯示為passed
狀態顯示為 passed

顯示為 passed,代表我們的靜態頁生成成功。

如果失敗,會顯示「failed」,如下:

錯誤的狀況
錯誤的狀況

同時我們也會收到一封告知錯誤的通知信,會附上是哪一次的 Commit 有誤:

流水線錯誤的通知信
流水線錯誤的通知信

要看是哪裡有錯的話,就把滑鼠移到 Stages 的那個「X」,再滑到也顯示「X」的部份,就會出現一個 Tooltip 顯示錯誤訊息:

看見哪裡有錯
看見哪裡有錯

這 + 1 的步驟,只要看到 Status 顯示為「passed」就成功了。


+2 輸入 GitLab Pages 產生靜態頁後的網址

佈署成功後,最後就是輸入 GitLab Pages 預設的網址就行了。

本篇用的是走 GitLab Pages 預設的網域,不是自訂網域,自訂網域有其它的部份要設定,本篇沒這麼勤勞,就直接用 GitLab Pages 的網域。

GitLab Pages 的網域結構如下:

https://username.gitlab.io/projectname/

翻成中文就是:

https://帳號.gitlab.io/專案名稱/

所以像本篇的專案名稱叫「letswrite-gitlab-pages」,最後產生的網址就是:

https://letswrite.gitlab.io/letswrite-gitlab-pages/


以上就是把 GitLab 的專案生成靜態頁的步驟。

本篇主要的參考資源就是官方的說明文件:GitLab Pages

Summary
GitLab Pages,3 + 2 個步驟讓 GitLab 專案產生靜態頁
Article Name
GitLab Pages,3 + 2 個步驟讓 GitLab 專案產生靜態頁
Description
本篇大綱:GitLab生成靜態頁,私人專案也行。1 要生成靜態頁的檔案都放進「public」資料夾內。2 建立.gitlab-ci.yaml的檔案3 專案push到GitLab上。+1 等gitlab pipelines顯示狀態為「passed」。+2 輸入GitLab Pages產生靜態頁後的網址。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

Promise、Async、Await 基本使用筆記

Vue

用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

Firebase Google

用 Firebase Authentication 做一套簡易會員系統 – 電子郵件 密碼

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

Bot Slack

Slack 通知功能 純靜態

Analytics Google

Google Analytics 事件追蹤設定

Front-End

像 Medium 的漸近式圖片加載

Front-End

IntersectionObserver:上篇 – 基本介紹及使用

WordPress

如何用 MAMP 在本機安裝 WordPress

Forms Google

Google 表單 用網址改變題目預設值

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。