ドキュメントには頻繁に更新が加えられ、その都度公開されています。本ページの翻訳はまだ未完成な部分があることをご了承ください。最新の情報については、英語のドキュメンテーションをご参照ください。本ページの翻訳に問題がある場合はこちらまでご連絡ください。
記事のバージョン: GitHub.com

GitHub Pages サイトへの Jekyll テーマの追加

GitHub Pages は、GitHub Free のパブリックリポジトリ、GitHub Pro のパブリックおよびプライベートリポジトリ、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Server で利用いただけます。詳細は「GitHub の製品」を参照してください。

GitHub Pages サイトの _config.yml ファイルを編集して、Jekyll テーマを追加できます。

GitHub Pages は、GitHub でホストされているオープンソースの Jekyll テーマとともに、公式にサポートされている Jekyll テーマをサポートしています。 Jekyll テーマ選択画面を使って、サポートされている Jekyll テーマを GitHub Pagesサイトに追加することもできます。詳しい情報についてはGitHub 上の Jekyll テーマについてを参照してください。

Jekyll テーマのデフォルトは、サイトの以下のフォルダー内のコンテンツで上書きできます:

オーバーライドできる Jekyll テーマのファイルに関する詳しい情報については、使用するテーマの README または使用するテーマのソースリポジトリのその他のドキュメンテーションを参照してください。

サイトの _config.yml ファイル内への Jekyll テーマの追加

  1. GitHub で、リポジトリのメインページへ移動します。

  2. リポジトリ中の _config.yml にアクセスしてください。

  3. ファイルビューの右上の隅で、 をクリックしてファイルエディターを開きます。

    エディットアイコンでファイルエディタをオープン

  4. _config.yml にテーマ名で新しい行を追加して、テーマをアクティベートしてください。

    • 公式にサポートされているテーマのいずれかをアクティベートするには、theme: に続けてそのテーマ名を入力してください (テーマのソースリポジトリの README にあるように)。
      設定ファイルへのテーマの追加
    • GitHub でホストされているオープンソースの Jekyll テーマのいずれかをアクティベートするには、remote_theme: に続けてそのテーマの名前を入力します (そのテーマのソースリポジトリの README その他のドキュメンテーションに記されています)。
      設定ファイルにリモートテーマを追加
  5. ページの下部で、ファイルに行った変更について述べた短く意味のあるコミットメッセージを入力してください。コミットメッセージ内でコミットを複数の作者に関連付けることができます。詳細は「複数の共同作者を持つコミットを作成する」を参照してください。

    変更のコミットメッセージ

  6. コミットメッセージフィールドの下で、コミットを現在のブランチに追加するか、新しいブランチを作成するかを判断してください。現在のブランチが master なら、コミットに新しいブランチを作成することにして、プルリクエストを作成してください。

    Commit branch options

  7. [Propose file change] をクリックします。

    ファイルの変更を提案 ボタン

  8. プルリクエストを作成した場合は、GitHub Pagesの公開ブランチにプルリクエストをマージしてください。このブランチは、通常は master ですが、gh-pages のこともあります。

これで、追加した新しいテーマを使ってサイトが公開されます。

ローカルで Jekyll テーマをプレビュー

Jekyll テーマを GitHubのサイトの _config.yml ファイルに追加した場合、以下のセクションで詳しく説明されている手順に従って、そのテーマをローカルでプレビューできます。

Jekyll テーマをローカルでプレビューしようとする前に、以下を確認してください:

Gemfile にテーマを Gem として追加する

メモ: 編集に Web のみのインターフェースを使用している場合は、サイトの Gemfile があっても、そこにテーマを追加する必要はありません。

  1. GitHub で、リポジトリのメインページへ移動します。

  2. リポジトリ中で Gemfile にアクセスしてください。

  3. ファイルビューの右上隅で をクリックしてファイルエディターを開いてください。

  4. Gemfileで、テーマ名を引用符で囲って、新しい行として追加します:

    GitHub 上の GemFile へのテーマ Gem の追加

    参考: Gemfile には複数の Jekyll テーマを追加できますが、それらをアクティベートするために _config.yml に追加できるテーマは 1 つだけです。

  5. ページの下部で、ファイルに行った変更について述べた短く意味のあるコミットメッセージを入力してください。コミットメッセージ内でコミットを複数の作者に関連付けることができます。詳細は「複数の共同作者を持つコミットを作成する」を参照してください。

    変更のコミットメッセージ

  6. コミットメッセージフィールドの下で、コミットを現在のブランチに追加するか、新しいブランチを作成するかを判断してください。現在のブランチが master なら、コミットに新しいブランチを作成することにして、プルリクエストを作成してください。

    Commit branch options

  7. [Propose file change] をクリックします。

    ファイルの変更を提案 ボタン

  8. プルリクエストを作成した場合は、GitHub Pagesの公開ブランチにプルリクエストをマージしてください。このブランチは、通常は master ですが、gh-pages のこともあります。 サイトを公開するためのブランチの選択に関する詳しい情報についてはユーザ、Organization、プロジェクトPagesを参照してください。

Bundler を使ったテーマのインストール

  1. ターミナルターミナルGit Bashターミナル を開いてください。

  2. ローカルの GitHub Pages サイトリポジトリにアクセスしてください。

    $ cd my-pages-site-repository
  3. GitHub 上のリモートのサイトリポジトリから変更をローカルのサイトリポジトリにロードしてください。

    $ git pull

    参考: git pull の利用に関する詳細は「リモートリポジトリから変更を取得する」を参照してください。

  4. Bundler を使って Jekyll テーマの Gem をインストールしてください。

    $ bundle install
    > Fetching gem metadata from https://rubygems.org/............
    Fetching version metadata from https://rubygems.org/...
    Fetching dependency metadata from https://rubygems.org/..
    Resolving dependencies...
    . . .
    Installing minima 1.0.1
    Using bundler 1.10.6
    Bundle complete! 2 Gemfile dependencies, 54 gems now installed.
    Use `bundle show [gemname]` to see where a bundled gem is installed.
  5. GitHub 上のリモートの GitHub Pages サイトリポジトリに変更をプッシュしてください。サイトの公開に gh-pages ブランチを使っている場合、以下のサンプル中の mastergh-pages に置き換えてください。

    $ git push origin master

コマンドライン上で Jekyll テーマを追加する

  1. ターミナルターミナルGit Bashターミナル を開いてください。

  2. ローカルのサイトリポジトリに移動します:

    $ cd my-pages-site-repository
  3. サイトの Gemfile にテーマを追加するには、Atom など、使い慣れたテキストエディタを開き、Gemfile に選択したテーマの名前を引用符で囲って以下の行を追加してください:

    gem "minima"
    # Minima は Jekyll サイトのデフォルトのテーマです。

    参考: Gemfile には複数の Jekyll テーマを追加できますが、それらの中でテーマとしてアクティベートするために _config.yml に追加できるのは 1 つだけです。

  4. Bundler を使って Jekyll テーマの Gem をインストールしてください。

    $ bundle install
    > Fetching gem metadata from https://rubygems.org/............
    Fetching version metadata from https://rubygems.org/...
    Fetching dependency metadata from https://rubygems.org/..
    Resolving dependencies...
    . . .
    Installing minima 1.0.1
    Using bundler 1.10.6
    Bundle complete! 2 Gemfile dependencies, 54 gems now installed.
    Use `bundle show [gemname]` to see where a bundled gem is installed.
  5. テーマをアクティベートするには、好きなテキストエディタを使ってサイトの _config.yml ファイルにテーマの名前を新しい行として追加してください:

    theme: minima
  6. Git を使って変更を追加し、コミットします:

    $ git commit -a
    # Adds your changes
    $ git commit -m "added theme to Gemfile & _config.yml"
    # Commits your changes with a commit message
  7. リモートの GitHub Pages サイトリポジトリに変更をプッシュしてください。サイトの公開に gh-pages ブランチを使っている場合、以下のサンプル中の mastergh-pages に置き換えてください:

    $ git push origin master

これで、追加した新しいテーマを使ってサイトが公開されます。

参考リンク

担当者にお尋ねください

探しているものが見つからなかったでしょうか?

弊社にお問い合わせください