Jekyll を使用して GitHub Pages サイトをローカルでテストする

リポジトリへの書き込み権限があるユーザは、GitHub Pages サイトをローカルでテストできます。

前提条件

Jekyll を使用してサイトをテストする前に、以下の操作が必要です。

• Jekyll をインストールする。
• Jekyll サイトを作成する。 詳しくは、「Jekyll を使用して GitHub Pages サイトを作成する」を参照してください。

Bundler を使用して Jekyll をインストールして実行することをお勧めします。 Bundler は、Ruby gem の依存関係を管理し、Jekyll ビルドのエラーを減少させ、環境に関係するバグを防止します。 以下はBundlerのインストール手順です。

1. Ruby をインストールします。 詳細については、Ruby ドキュメントの「Installing Ruby」 (Ruby のインストール) を参照してください。
2. Bundlerをインストールしてください。 詳細については、「Bundler」を参照してください。

サイトをローカルでビルドする

1. [ターミナル][ターミナル][Git Bash] を開きます。

2. サイトの公開ソースにアクセスしてください。 詳しくは、「GitHub Pages サイトの公開元を設定する」を参照してください。

3. bundle install を実行します。

4. ローカルで Jekyll サイトを実行します。

   $ bundle exec jekyll serve
   > Configuration file: /Users/octocat/my-site/_config.yml
   >            Source: /Users/octocat/my-site
   >       Destination: /Users/octocat/my-site/_site
   > Incremental build: disabled. Enable with --incremental
   >      Generating...
   >                    done in 0.309 seconds.
   > Auto-regeneration: enabled for '/Users/octocat/my-site'
   > Configuration file: /Users/octocat/my-site/_config.yml
   >    Server address: http://127.0.0.1:4000/
   >  Server running... press ctrl-c to stop.
   

   Note

   • Ruby 3.0 以降をインストールした場合 (Homebrew を使用して既定のバージョンをインストールした場合に発生することがあります)、この手順でエラーが発生するおそれがあります。 これは、これらのバージョンの Ruby には、webrick がインストールされなくなったためです。

     エラーを修正するには、bundle add webrick を実行してから bundle exec jekyll serve をもう一度実行します。

   • _config.yml ファイルの baseurl フィールドに GitHub リポジトリのリンクが含まれている場合は、ローカルでビルドする際に次のコマンドを使用してその値を無視し、localhost:4000/ でサイトを提供できます。

     bundle exec jekyll serve --baseurl=""
     

5. サイトをプレビューするには、Web ブラウザーで http://localhost:4000 に移動します。

GitHub Pages gem の更新

Jekyll は、頻繁に更新されているアクティブなオープンソースプロジェクトです。 お使いのコンピューター上の github-pages gem が GitHub Pages サーバー上の github-pages gem と比較して古くなっている場合は、ローカルでビルドしたときと GitHub に公開したときで、サイトの見え方が異なることがあります。 これを回避するには、お使いのコンピューターで github-pages gem を定期的に更新します。

1. [ターミナル][ターミナル][Git Bash] を開きます。
2. github-pages gem を更新します。
   • Bundler をインストールしている場合、bundle update github-pages を実行します。
   • Bundler をインストールしていない場合、gem update github-pages を実行します。

参考資料

• Jekyll ドキュメントの GitHub Pages