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

メモ

github-pages gem は一部のワークフローで引き続きサポートされますが、GitHub Pages サイトのデプロイと自動化のための推奨される方法は GitHub Actions になりました。

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

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

サポートされているテーマ

既定では、次のテーマがサポートされています。

        [Architect](https://github.com/pages-themes/architect)

        [Cayman](https://github.com/pages-themes/cayman)

        [Dinky](https://github.com/pages-themes/dinky)

        [Hacker](https://github.com/pages-themes/hacker)

        [閏日](https://github.com/pages-themes/leap-day)

        [Merlot](https://github.com/pages-themes/merlot)

        [Midnight](https://github.com/pages-themes/midnight)

        [Minima](https://github.com/jekyll/minima)

        [最小限](https://github.com/pages-themes/minimal)

        [Modernist](https://github.com/pages-themes/modernist)

        [スレート](https://github.com/pages-themes/slate)

        [タクタイル](https://github.com/pages-themes/tactile)

        [タイム マシン](https://github.com/pages-themes/time-machine)

        [
        `jekyll-remote-theme`
        ](https://github.com/benbalter/jekyll-remote-theme) Jekyll プラグインも使用できます。他のテーマを読み込んでみましょう。

テーマを追加する

GitHub で、サイトのリポジトリにアクセスしてください。1. サイトの公開ソースにアクセスしてください。詳しくは、「GitHub Pages サイトの発行ソースの構成」をご覧ください。

       `_config.yml` に移動します。

ファイルビューの右上隅にあるをクリックしてファイルエディターを開きます。
テーマ名のために、ファイルに新しい行を追加します。
- サポートされているテーマを使うには、「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 に表示されている名前に置き換えます。
[変更のコミット...] をクリックします。
[コミットメッセージ] フィールドに、ファイルに対する変更内容を説明する、短くわかりやすいコミットメッセージを入力します。コミットメッセージでは、複数の作者にコミットを関連づけることができます。詳しくは、「複数の作者を持つコミットを作成する」をご覧ください。
コミットメッセージフィールドの下で、コミットの追加先を現在のブランチか新しいブランチから選択してください。現在のブランチがデフォルトブランチなら、コミット用に新しいブランチを作成してからPull Requestを作成すべきです。詳しくは、「pull request の作成」をご覧ください。
[変更のコミット] または [変更の提案] をクリックします。

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

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

GitHub で、サイトのリポジトリにアクセスしてください。1. サイトの公開ソースにアクセスしてください。詳しくは、「GitHub Pages サイトの発行ソースの構成」をご覧ください。

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

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

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

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