Jekyll を使用して GitHub Pages サイトにテーマを追加する

テーマを追加およびカスタマイズすることにより、Jekyll サイトをパーソナライズできます。

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

GitHub Pagesは、パブリック・リポジトリのGitHub Freeと組織用のGitHub Free、パブリック・リポジトリとプライベート・リポジトリのGitHub Pro、GitHub Team、GitHub Enterprise Cloud、GitHub Enterprise Serverで利用できます。

この記事の内容

リポジトリへの書き込み権限があるユーザは、Jekyll を使用して GitHub Pages サイトにテーマを追加できます。

ブランチから公開している場合、サイトへの変更は、サイトの公開ソースにマージされるときに自動的に公開されます。 カスタムの GitHub Actions ワークフローから公開している場合、(通常は既定のブランチへのプッシュによって) ワークフローがトリガーされるたびに変更が公開されます。 まず変更をプレビューする場合は、GitHub ではなくローカルで変更を行うことができます。 そしてサイトをローカルでテストしてください。 詳しくは、「Jekyll を使用して GitHub Pages サイトをローカルでテストする」をご覧ください。

テーマを追加する

  1. GitHub で、サイトのリポジトリにアクセスしてください。
  2. サイトの公開ソースにアクセスしてください。 詳しくは、「GitHub Pages サイトの公開元を設定する」をご覧ください。
  3. _config.yml に移動します。
  4. ファイル ビューの右上隅にある をクリックしてファイル エディターを開きます。

ファイルのスクリーンショット。 ヘッダーにある鉛筆アイコンのラベルが付いたボタンが濃いオレンジ色の枠線で囲まれています。

  1. テーマ名のために、ファイルに新しい行を追加します。

    • サポートされているテーマを使うには、「theme: THEME-NAME」と入力します。その際に、THEME-NAME はテーマのリポジトリの _config.yml に示されているテーマ名前に置き換えます (ほとんどのテーマは、jekyll-theme-NAME の名前付け規則に従います)。 サポートされているテーマの一覧については、GitHub Pages サイトの「サポートされているテーマ」を参照してください。 たとえば、最小テーマを選ぶには、「theme: jekyll-theme-minimal」と入力します。
    • GitHub でホストされているその他の任意の Jekyll テーマを使うには、「remote_theme: THEME-NAME」と入力します。THEME-NAME の部分は、テーマのリポジトリの README に表示されている名前に置き換えます。

  2. [コミット メッセージ] フィールドに、ファイルに対する変更内容を説明する、短くわかりやすいコミット メッセージを入力します。 コミットメッセージでは、複数の作者にコミットを関連づけることができます。 詳しくは、「複数の作者を持つコミットを作成する」をご覧ください。

  3. コミットメッセージフィールドの下で、コミットの追加先を現在のブランチか新しいブランチから選択してください。 現在のブランチがデフォルトブランチなら、コミット用に新しいブランチを作成してからPull Requestを作成すべきです。 詳しくは、「pull request の作成」をご覧ください。

    GitHub pull request のスクリーンショット。メイン ブランチに直接コミットする、または新しいブランチを作成するためのラジオ ボタンが表示されています。 新しいブランチが選ばれています。

  4. [変更のコミット] または [変更の提案] をクリックします。

テーマの CSS をカスタマイズする

テーマのソースリポジトリには、テーマのカスタマイズに関するヘルプがあるかもしれません。 たとえば、Minimal's README を参照してください。

  1. GitHub で、サイトのリポジトリにアクセスしてください。

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

  3. /assets/css/style.scss という名前の新しいファイルを作成します。

  4. ファイルの先頭に、以下の内容を追加します。

    ---
---

@import "{{ site.theme }}";

  5. カスタム CSS または Sass (インポート ファイルも含む) があれば、@import 行の直後に追加します。

テーマの HTML レイアウトをカスタマイズする

テーマのソースリポジトリには、テーマのカスタマイズに関するヘルプがあるかもしれません。 たとえば、Minimal's README を参照してください。

  1. GitHub 上で、テーマのソースリポジトリにアクセスします。 たとえば、最小のソース リポジトリは https://github.com/pages-themes/minimal です。
  2. _layouts フォルダーで、テーマの _default.html ファイルに移動します。
  3. ファイルの内容をコピーします。
  4. GitHub で、サイトのリポジトリにアクセスしてください。
  5. サイトの公開ソースにアクセスしてください。 詳しくは、「GitHub Pages サイトの公開元を設定する」をご覧ください。
  6. _layouts/default.htmlという名前でファイルを作成します。
  7. 先ほどコピーしたデフォルトのレイアウトコンテンツを貼り付けます。
  8. 必要に応じてレイアウトをカスタマイズします。

参考資料