GitHub Pages

リポジトリへコミットし Web 公開できる GitHub Pages（ギットハブページ）についてまとめています。

GitHub リポジトリにファイルを入れ、そのまま Web サイトとして公開できます。
HTML などの静的ファイルをコミット git push して公開する方法は知られていますが、
もっと容易に Web サイトを制作・公開できる仕組みがあります。

公式サイト

GitHub Pages - 公式サイト
GitHub Pages について | GitHub ヘルプ

使用方法

GitHub リポジトリへの git push で使うのが通例ですが、
GitHub の Web 上でリポジトリを生成し、ファイルの作成・編集する事ができますので、
必ずしも Git の扱いに慣れている必要があるわけではありません。

リポジトリページの Setting を参照し、下へスクロールすると
「GitHub Pages」の項目があります。

Source
Theme Chooser
Custom domain
Enforce HTTPS

以下に各項目を紹介しています。

Source 公開・非公開とブランチの選択

公開するブランチを選択します。公開・非公開のスイッチでもあります。

master branch - デフォルトの master ブランチ内をそのまま Web 公開します。
master branch /doc folder - doc/ フォルダ内を Web 公開します。
master ブランチでソースを公開している上で、
doc/ 内をドキュメント等の目的で Web 公開する事できます。
None - GitHub Pages を無効化します。デフォルトはこの選択肢になっています。

他のブランチが存在している場合、これらのブランチも一覧に表示されます。
gh-pages ブランチを使用する方法は古い記載で、必須ではなくなっています。

Theme Chooser テーマの適用・選択

シンプルに HTML・Markdown を制作した際、テーマを適用できます。
適用すると _config.yml が生成されます。
ただし GitHub Pages で用意されているテーマは
現在となっては横幅が狭いテーマが多くなっています。

Theme Chooser 以外でも Jekyll テーマで remote_theme に対応している場合、
_config.yml を生成し、remote_theme を入れるだけでテーマを適用できます。
Jekyll テーマ一覧へのリンクは Jekyll 公式サイトの次から参照できます。

Resources | Jekyll

指定する値は GitHub リポジトリで remote_theme: ユーザー/リポジトリ です。

例えば Just the Docs は次の GitHub リポジトリで公開されています。

pmarsceill/just-the-docs | GitHub

従って、 _config.yml に次を追加します。

remote_theme: pmarsceill/just-the-docs

これだけでテーマが適用されます。更にテーマに応じた設定の追加が可能です。
GitHub Pages ではわざわざリポジトリをクーロン・修正する必要はありません。
最小限でファイル管理を行えます。

HTML で適用する場合、.html ファイル内は <body>～</body> 内の内容を入れ、
<head>～</head> の装飾は削除して下さい。
代わりに Front matter で latout: default を加えます。

---
layout: default
---

.md ファイルでテーマで使用できる項目があれば、
それを .html ファイルでも使用できます。

Custom domain 独自ドメインの適用・設定

独自ドメインを適用します。適用しない場合は次のアドレスになります。

https://ユーザー名.github.io/プロジェクト名 - 個人の場合
https://組織.github.io/プロジェクト名 - 組織の場合

※ ～.github.com/プロジェクト名 は古い記載で、現在は使用できません。

ファイル CNAME にドメイン名が入った状態で生成されます。
これは Settings で設定せずに CNAME ファイルを作って git push も可能です。

🎈 ネームサーバは次で設定します。

サブドメイン	種類	値
公開ドメイン名	CNAME	個人・組織.github.io

www などのサブドメインを付けない場合、
CNAME の代わりに ANAME・ALIAS レコードで設定できる場合があります。
これがネームサーバで対応していない場合、A レコードで設定が必要です。

Windows 以外では dig で検索できます。

dig fu-sen.github.io

Web でも検索可能です。Google が提供している dig があります。

Dig | G Suite Toolbox

「名前」に 個人・組織.github.io を入れて下さい。
レコードは A がデフォルトになっています。

ここでは fu-sen.github.io で実際に検索した結果です。

;QUESTION
fu-sen.github.io. IN A
;ANSWER
fu-sen.github.io. 3599 IN A 185.199.109.153
fu-sen.github.io. 3599 IN A 185.199.108.153
fu-sen.github.io. 3599 IN A 185.199.110.153
fu-sen.github.io. 3599 IN A 185.199.111.153

Windows では代わりに nslookup が使えます。Windows 10 でも使用可能です。

nslookup fu-sen.github.io

権限のない回答:
名前:    fu-sen.github.io
Addresses:  185.199.110.153
          185.199.108.153
          185.199.111.153
          185.199.109.153

この場合、ネームサーバは次の設定になります。

サブドメイン	種類	値
なし・@・ドメイン名	A	185.199.108.153
なし・@・ドメイン名	A	185.199.109.153
なし・@・ドメイン名	A	185.199.110.153
なし・@・ドメイン名	A	185.199.111.153

個人・組織によって IP アドレスが異なります。
必ず dig ・ nslookup で調べた上で設定して下さい。

Enforce HTTPS 常時 SSL の有効化

2016年6月15日以降に生成されたプロジェクトでは
個人・組織.github.io/プロジェクト名 が常時 https 固定になります。

独自ドメインを使用した場合は現在も選択できます。
従って独自ドメインであれば http での公開が現在でも可能です。

SSL 証明書には 🎈 Let’s Encrypt を発行し、有効な間は自動更新されます。
これに最低でも数分要するため、を入れて参照できるようになるまで数分要します。
発行にはネームサーバが反映されている必要があります。
ネームサーバにはキャッシュ（TTL）がある事にご注意下さい。

個人・組織.github.io で公開する

プロジェクトを後ろに付けない
個人.github.io または 組織.github.io でもページ公開できます。
個人・組織の自己紹介や Blog などの目的で使用できます。

運営者は GitHub ユーザー fu-sen で使用しているので、 fu-sen.github.io です。
🎈 balloon.im への転送にしてあります。

fu-sen/fu-sen.github.io | GitHub

ここに入れた robots.txt は独自ドメインを使用しない
個人・組織.github.io/プロジェクト の Web ページにも影響があります。
また favicon などの画像もプロジェクトで指定がない場合は反映されます。

Markdown による作成

GitHub Pages は Markdown での生成も可能です。
ただし。GitHub のソース表示とは異なる解釈をするものがあります。
また、テーマを適用する場合は、テーマによる CSS のレイアウトに影響を受けます。
.md ファイル内で HTML の記載も可能です。.html ファイルの混在も可能です。

ファイル.md は ファイル.html または ファイル で参照できます。
ファイル/ は参照できません。

トップページは index.html に展開される index.md となりますが、
index.md がない場合、 README.md がトップページで表示されます。

Not Found のカスタムページに 404.md を使用できます。

運営者が主に Markdown で作っているサンプル・テストページを公開しています。

simple.pages.net.eu.org - テーマなし
fu-sen/simple.pages.net.eu.org | GitHub - GitHub プロジェクト（ソース）
🎈 simple.pages.net.eu.org - 実際の表示
test.pages.net.eu.org - テーマ Just the Docs 使用
fu-sen/test.pages.net.eu.org | GitHub - GitHub プロジェクト（ソース）
🎈 test.pages.net.eu.org - 実際の表示

Q&A

どんな Web サイトも公開できますか？

商用としては許可されていません。
ただし、これは会社が GitHub の使用を禁ずるものではありません。
制作物のソースを他の人が使用できるように無償公開するのであれば、問題ありません。
逆に個人でも何かの購入を行わせるページなどを
GitHub Pages で公開するのは禁じられています。
どこかの Web サイトを作ったとして、それを GitHub Pages で共有するのは
禁止事項にひっかかる可能性があります。

禁止される用途 - GitHub Pages について | GitHub ヘルプ

Not Found を独自の表示にできますか？

404.html または 404.md を生成すると、Not Found のカスタムページとして表示できます。

コミットする度にメール通知が届きます。

ネームサーバが設定したての場合や GitHub が推奨するレコード設定をしていない場合に
GitHub からメール通知が届きます。

🎈 EU.org を更なるサブドメインなしの状態で設定した場合、
CNAME・ALIAS・ANAME で設定しても実際には A レコードで設定されるため、
メール通知が届きます。
これを回避するのは他のサービスで Web 公開するようにします。
例えば 🎈 Vercel・Now を使用できます。

JS.ORG でもこの問題が発生します。

プログラミング言語は動作しますか？

GitHub Pages では非対応です。（PHP・JavaScript・Ruby・Python・Go など）

🎈 Vercel・Now などを検討して下さい。

他の静的サイトジェネータは使用できますか？

GitHub Actions を用いる事で
他の静的サイトジェネータのデプロイができる場合があります。

GitHub Actions

GitHub Pages の代わりに 🎈 Vercel・Now を使用する方法もあります。
🎈 Hugo など、多くの静的サイトジェネータに対応しています。