Skip to main content

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

GitHub Pages サイトをローカルでビルドすると、サイトに対する変更のプレビューとテストを行うことができます。

この機能を使用できるユーザーについて

{data variables.product.prodname_pages %}は、パブリック・リポジトリのGitHub Freeと組織用のGitHub Free、パブリック・リポジトリとプライベート・リポジトリの、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Serverで利用できます。 詳しくは、「GitHub のプラン」をご覧ください。

Platform navigation

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

前提条件

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

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

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

ヒント: Bundler を使用して Jekyll をインストールしようとしたときに Ruby エラーが表示された場合は、RVMHomebrew などのパッケージ マネージャーを使用して Ruby のインストールを管理することが必要になる場合があります。 詳細については、Jekyll ドキュメントのトラブルシューティングを参照してください。

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

  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.
    

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

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

  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 を実行します。

参考資料