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

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」資料夾內

這邊Augustus直接從 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
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言