GitHub Pages とは
ここでは、GitHub Pages Web サイトの作成と保守のプロセスについて説明します。
GitHub Pages は GitHub リポジトリから直接ホストされる静的なサイトですが、単なる静的ファイルのコレクションではありません。 開発者は、Jekyll や Liquid などのサイト生成テクノロジを利用して、完全な静的 Web サイトに処理される動的テンプレートを定義します。 サイトに関連付けられているソース ブランチに変更をコミットするたびに、サイトは最新の更新内容を使用して再生成され、ターゲット URL に自動的に発行されます。
詳細については、GitHub Pages サイトのソースの発行に関するページを参照してください。
GitHub ページを有効にする
GitHub Pages を使用するための最初の手順は、リポジトリの [Settings](設定) タブから有効にすることです。main ブランチを使用するか、その中の docs フォルダーを指定することができます。 GitHub Pages を無効にする場合は、ここで無効にできます。
Jekyll を使用したテーマの選択
Jekyll は、リポジトリのコンテンツから Web サイトを構築するために GitHub で使用される静的なサイト ジェネレーターです。 コンテンツの利便性が優れているだけでなく、標準の設計規則にも準拠しています。 このスタイルの標準化により、GitHub Pages 構成から選択できる、入れ替え可能なテーマを使用できるようになります。
GitHub には、さまざまなテーマが用意されています。 また、Jekyll コミュニティから入手できる、一連の商用およびオープンソースのテーマもあります。
詳細については、Jekyll テーマに関するページを参照してください。
YAML front matter の使用
front matter という用語は、ファイルの内容の先頭に追加される YAML メタデータを指します。 Jekyll の場合、このメタデータには Markdown ページのレイアウト スタイル (post、page など) を示すジェネレーターの命令が含まれています。 ドキュメントのタイトルなどのページ メタデータや、ブログ投稿の作成者などのページ コンテンツ変数も含まれる場合があります。
次の例では、post レイアウトを使用しています。 この例は、コンテナー HTML を定義する _layouts/post.html ファイルがあることを前提としています。 その他のレイアウト オプションは、それぞれの HTML ファイルを _layouts フォルダーに追加して指定できます。
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
詳細については、Front Matter に関するページを参照してください。
サイトのカスタマイズ
サイトが稼働したら、_config.yml を使用してサイトの詳細をカスタマイズできます。 このファイルには、サイトのメタデータ、ナビゲーション メニュー、テーマの色、コンパイラのオプションなど、サイト全体のほぼすべての構成オプションが含まれています。
詳細については、_config.yml の構成に関するページを参照してください。
コンテンツの作成と編集
サイトでのページの作成と編集は、標準の GitHub エクスペリエンスに従っています。 GitHub Pages Web サイトに使用するファイルには、GitHub リポジトリ内の他のファイルと同じ利点があります。 任意のツールで編集したり、ブランチを作成およびマージしたり、issue や pull request とリンクしたりできます。
Markdown と HTML に加えて、Jekyll は Liquid テンプレート言語構文をサポートしています。 Liquid を使うと、コンテンツ ファイルに変数と基本的なロジック フロー構造を動的に挿入することができます。 コンパイルすると、最終的な製品は標準 HTML になります。
次の例は、for ループと変数挿入の組み合わせを示しています。
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
詳細については、Liquid テンプレート言語に関するページを参照してください。
ブログ投稿の操作
連携するデータベースがないにもかかわらず、Jekyll は、特定の規則 (_posts/2020-06-25-blog-post-name.md) を使用するブログの概念をサポートしています。 推測できるように、すべてのブログ投稿は _posts フォルダーに格納され、次のように日付と名前の規則が使用されます。 コンパイル中、Jekyll によってこのフォルダー内のファイルが処理され、HTML ブログ投稿の一覧が生成されます。
次の例は、簡単なブログ投稿の構造を示しています。 これには、subtitle、tags、comments のメタデータが含まれています。 選択したテーマでこのメタデータがサポートされていない場合もあります。
---
layout: post
title: Blog post title rendered by theme
subtitle: Blog post subtitle rendered by theme
tags: welcoming
comments: true
---
This is the first line of rendered content in the post.
詳細については、「Jekyll を使用して GitHub Pages サイトにコンテンツを追加する」を参照してください。