經過之前三篇的教學
我想大家應該對於Gitlab Pages有不少心得
今天教大家幾個優化技巧
讓你的Gitlab Pages運行的更有效率喔

一般的網頁優化不外乎幾個方面

• 靜態資源的優化
• 檔案傳輸的優化
• 暫存機制的使用

以下分別就上述三點分別做優化

靜態資源的優化

STEP 1
靜態資源優化就是對網站的 js css img 等檔案做優化
也就是將這些檔案進行壓縮
這時可以使用一個gulp的工具hugulp
它可以快速幫你把這些事情做好喔～
首先安裝 hugulp (需要先安裝npm)

$ npm install -g hugulp

STEP 2
接下來就是使用它來優化靜態資源

$ hugulp init # 產生.hugulprc 
$ rm -rf public # 先清掉之前build過的檔案
$ hugo # 重新build檔案
$ hugulp build # 優化新build的檔案  

如此就將所有靜態檔案優化好摟

STEP 3
接下來可以結合gitlab-ci使用

pages:
    script:
    - hugo
    - rm -rf /tmp/*
    - hugulp build  

之後只要每次push都會去做優化了
這邊多提一下.hugulprc這個檔案
這檔案是設置優化參數的
可以參考他的github
裡面有詳細的說明
在此提醒一點
就是如果你的靜態檔案非常多
尤其是圖片非常之多之大
建議將gitlab-ci中圖片優化拿掉
圖片的優化手動在local端做好再push喔！

檔案傳輸優化

STEP 1
事實上這步驟相當簡單
就是將所要傳輸的檔案進行壓縮
常見的壓縮方法是gzip和Deflate
然而Gitlab Pages是用golang開發的靜態服務器
目前支援gzip壓縮喔
所以只需要執行以下動作

gzip --recursive --keep public/

把所有編譯好的檔案進行壓縮就OK摟～
(當然你應該將它設置在.gitlab-ci.yml中)

暫存機制的使用

講到暫存機制
就是只在header加上一些參數
主要就是Exprie max-age etag這三個
可惜的是在Gitlab Pages
把max-age設為固定的10分鐘
且etag還沒有實作出來
關注issue發現
雖有被排在new-feature等待佇列中
但是遲遲等了好幾個月都沒動作
若是之後發現有upgrade
會再更新這篇文章
所以此階段的優化步驟是…
NO STEP