Jekyll透過Github部署時傳入環境變數


在 Github Pages 上使用 Jekyll 寫部落格已經好幾年了。
過去在查閱 GA 的報表時,偶爾會看到一些奇怪的流量,一路追查下去才發現原來是我的整個專案被人家搬去改造成他自己的部落格網站了。

雖然有點無奈,不過畢竟專案是連原始碼完整公開在網路上發布的,我就算想要阻止也阻止不了。

但我想至少嘗試把一些 ID 識別資訊從專案原始碼裡面移除,改成建置時才動態導入,這樣就算專案被人家全部搬走卻沒有清理乾淨,也不影響我的網站。

為了達成這樣的目的,我要完成的事情大致上分成兩塊:

  1. 讓 Jekyll 可以讀取環境變數並渲染到頁面上
  2. 從 Github Actions 傳入參數做為建置區的環境變數

讓 Jekyll 讀取環境變數

此功能仰賴套件jekyll-dotenv做到

  1. Gemfile 加入套件
    gem 'jekyll-dotenv'
    
  2. _config.yml宣告使用
     plugins:
         - jekyll-dotenv
    
  3. 將環境變數寫到.env檔內
    MY_ID=123
    

完成後就可以在頁面上使用{{ site.env.MY_ID }}的方式讀取到環境變數了

jekyll-dotenv 官方說明文件

使用 Github Actions 傳入變數

Github Actions 是 Github 自家的 CI/CD 服務。雖然 Jekyll 的專案可以很簡單的直接從專案後台啟動 Pages 的部署,但現在既然要額外做點修改,那勢必得乖乖自己寫設定檔了。

寫法參考自

.github/workflows新增檔案github-pages.yml,填入以下內容

傳入變數的功能是從19Export variables 開始,他會從 repo 的設定裡拿出變數並寫入到建置環境的.env檔內

其他的段落需要說明就參照上面的文件吧,幾乎都照抄的

在 Github 的專案設定填入變數

最後別忘了去專案的設定區設定你的 Actions secrets,設定方法一樣參照官方文件啦

Encrypted secrets - Creating encrypted secrets for a repository

全部完成後你只要執行git push後,應該可以在gh-pages分支看到建置成果,若沒有任何問題,就去後台把 Pages 的 Source 指向gh-pages

後記

回到最原始的目的,其實我覺得簡單又有效的解法應該是直接把專案設成私人的,但如果要讓私人專案可以發布公開的 Pages,那要付錢升級 Github 的帳號才有辦法了。

Hi 喜歡這篇文章的話 可以按個讚或請我喝杯咖啡
Buy me a coffeeBuy me a coffee