【デプロイ手順】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をサポートしていないのも理解できます
したがって、自分で手動で調整するしかありませんでした
以下は何度も失敗した後の

ついにビルドに成功したメモです
皆さんと共有します

まず、デプロイするリポジトリに入ります
そして設定ページに入ります

次に、Code and automationの下のPagesを順にクリックします SourceでGitHub Actionsを選択します

その後、自分の環境を設定し始めます…

Jekyllプロジェクトをビルドする際にはrubyが必要です
rubyをインストールすると、システムにデフォルトバージョンが設定されます

Jekyllをビルドする際に
rubyバージョンを指定しない場合
Jekyllはデフォルトのシステムバージョンを使用します

このコマンドを使用してバージョンを確認します

GitHubにデプロイしてJekyll 4.xバージョンを使用するためには
ruby 3.2.3バージョンが必要です
3.2.3がない場合は、いくつかのツールを使用してインストールできます

ここでは、私のコンピュータにrbenvがインストールされているので
rbenvを例にします

もちろん、他の一般的なコマンドツールも使用できます
例：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でパッチをプッシュすれば
GitHub Actionsがウェブサイトをビルドしてくれます
そしてデプロイ設定を追加すれば、自動的にGitHub Pagesにデプロイされます
ただし、デプロイ設定は公式のサンプルに既に含まれています
変更が必要なのはrubyの環境とターゲットブランチだけです~

成功しました