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

ここには以下の内容があります:

• テーマを追加する
• テーマの CSS をカスタマイズする
• テーマの HTML レイアウトをカスタマイズする
• 参考リンク

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

変更がサイトの公開ソースにマージされると、サイトへの変更は自動的に公開されます。 まず変更をプレビューしたいなら、GitHub Enterpriseではなくローカルで変更を行えます。 そしてサイトをローカルでテストしてください。 詳しい情報については、「Jekyll を使用して GitHub Pages サイトをローカルでテストする」を参照してください。

テーマを追加する

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

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

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

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

   

5. テーマ名のために、ファイルに新しい行を追加します。 theme: THEME-NAME と入力します。THEME-NAME の部分は、テーマのリポジトリの README に表示されている名前に置き換えます。 サポートされているテーマのリストについては、GitHub Pages サイトで「サポートされているテーマ」を参照してください。

   

6. ページの下部で、ファイルに対して行った変更を説明する短く分かりやすいコミットメッセージを入力してください。 コミットメッセージでは、複数の作者にコミットを関連づけることができます。 詳しい情報については「複数の共作者を持つコミットの作成」を参照してください。

   

1. コミットメッセージフィールドの下で、コミットの追加先を現在のブランチか新しいブランチから選択してください。 現在のブランチが master であれば、コミット先として新しいブランチを作成することを選択し、続いてプルリクエストを作成しなければなりません。 詳しい情報については「新しいプルリクエストの作成」を参照してください。

   

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

   

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

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

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

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

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

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

   ---
   ---
   
   @import "";
   

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

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

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

1. GitHub 上で、テーマのソースリポジトリにアクセスします。 たとえば、Minima のソースリポジトリは https://github.com/jekyll/minima です。

2. _layouts フォルダ内で、テーマの default.html ファイルに移動します。

3. ファイルのコンテンツをコピーします。

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

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

6. _layouts/default.html というファイルを作成します。

7. 先ほどコピーしたデフォルトのレイアウトコンテンツを貼り付けます。

8. 必要に応じてレイアウトをカスタマイズします。

参考リンク

• 新しいファイルの作成