【デプロイ手順】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
<img src="/images/jekyll_deploy/001.png" alt="jekyll deploy 4.x" / class="prose-img">
問題はGitHub Pagesの設定にありました
これにより、デフォルトの設定では更新を正常にデプロイできませんでした
GitHub Pagesは無料で使用制限があるサービスであることを考えると
それがデフォルト
で最新バージョンのJekyllをサポートしていないのも理解できます
したがって、自分で手動で調整するしかありませんでした
以下は何度も失敗した後の
<img src="/images/jekyll_deploy/007.png" alt="jekyll deploy 4.x" / class="prose-img">
ついにビルドに成功したメモです
皆さんと共有します
部署步驟
まず、デプロイするリポジトリに入ります
そして設定ページに入ります
<img src="/images/jekyll_deploy/002.png" alt="jekyll deploy 4.x" / class="prose-img">
次に、Code and automationの下のPagesを順にクリックします
Source
でGitHub Actionsを選択します
<img src="/images/jekyll_deploy/003.png" alt="jekyll deploy 4.x" / class="prose-img">
その後、自分の環境を設定し始めます...
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
ファイルを作成する必要があります
類似の指令を使って直接行うことができます
または手動で作成することもできます
<img src="/images/jekyll_deploy/004.png" alt="jekyll deploy 4.x" / class="prose-img">
ファイルの内容はバージョン番号です
<img src="/images/jekyll_deploy/005.png" alt="jekyll deploy 4.x" / class="prose-img">
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
でテストし、正常に動作するか確認します
成功すると以下のメッセージが表示されます
<img src="/images/jekyll_deploy/006.png" alt="jekyll deploy 4.x" / class="prose-img">
最後に、
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の環境とターゲットブランチだけです~
成功しました <img src="/images/jekyll_deploy/008.png" alt="jekyll deploy 4.x" / class="prose-img">