【部署教學】Github pages 遷移至Jekyll 4.x以上版本-2024.5月適用

我最近對網站的版面配置進行了一些修改
並且想在 CSS 中使用 rgb() 函數
但我發現在 Jekyll 3.9.x 版本中無法使用這個功能
這讓我不得不將 Jekyll 版本升級到 4.x 以上

升級後我感到相當興奮
在本地運行 bundle exec jekyll serve 進行測試
一切似乎都運行得很好

然而當我將更改推送到 GitHub 儲存庫後
我遇到了一些麻煩
在部署到 GitHub Pages 時出現了錯誤訊息
GitHub Pages: github-pages v231 GitHub Pages: jekyll v3.9.5
原來問題出在 GitHub Pages 的配置上
這導致我無法通過預設配置直接成功部署更新

考慮到 GitHub Pages 是一個免費且有使用限制的服務
它預設不支援較新版本的 Jekyll 也在情理之中
因此我只好自己手動進行調整
下面是我嘗試多次失敗後

終於build success的筆記
分享給大家

首先進入你部署的repo
並進入setting頁

接著依序點擊Code and automation下的Pages 在Source下選擇GitHub Actions

之後就要開始配置自己的環境了…

在build jekyll專案時會需要用到ruby
安裝ruby後系統內就會有一個預設版本

在你build jekyll
沒指定ruby版本時
jekyll就會使用你預設系統的版本

所以用此指令來檢查你的版本

我們要放到github部署並且使用jekyll 4.x版本
所以需要ruby 3.2.3版
如果沒有的3.2.3話可以用一些工具去安裝

不過這邊因為我電腦剛好是裝了rbenv
所以我就以此rbenv為例

當然你也可以用其他常用cmd tool
如：RVM、chruby 或 asdf
依照各位自己的習慣去調整、安裝ruby就行~

最後你需要在你的jekyll專案的根目錄底下
建立一個檔案 .ruby-version

可以用類似下面指令直接做

或是你想直接手動創建也是可以




檔案內容就是版本號碼

ruby安裝完後開始來配置jekyll專案
首先要在你的Gemfile裡面進行下面設置
要導入ruby 3.2.3版
ruby "3.2.3"
然後設置要使用的jekyll版本
gem "jekyll", "~> 4.3.3"
需求指令如下：

完整的配置如下
供大家參考
包含我使用的一些jekyll插件
如果有用到再加就好

再來在你的jekyll跟目錄底下執行
目的是要幫你產生Gemfile.lock檔案
並讓你的專案可以順利執行

產生後可以用
bundle exec jekyll serve 進行測試看看是否運行成功
成功顯示下面訊息

最後，
我們需要設置 GitHub 的自動部署配置文件。

通常使用 .yml 進行配置。
這裡是官方推薦的 Jekyll 初始配置：官方推薦

我們所需做的只是修改官方推薦的 .yml 文件中的幾行：

• 調整目標分支：
  branches: ["master"]
  
• 指定當前使用的 Ruby：
  uses: ruby/setup-ruby@v1
  
• Ruby 版本：
  ruby-version: '3.2.3'
  
  

以下是我最終的完整 .yml 配置
您可以直接使用並進行修改

其實步驟很簡單
就是需要把從ruby環境、jekyll、github 環境都設定好

最終再用git push remote branch把你的patch push上去
就可以觸發github action幫你build網站了
然後加上deploy的設定就會自動幫你部署到github pages上了
不過deploy的設定在官方提供的範例已經有了
你需要改動的地方只有ruby的環境跟目標branch而已~

成功了