GitHub Pagesは無料ですか？

無料です。公開（Public）リポジトリであれば、個人アカウントでも費用はかかりません。

公開したのにページが真っ白／404になるのはなぜ？

多くはindex.htmlがリポジトリの一番上の階層にないか、ファイル名の大文字小文字が違うためです。GitHub Pagesは大文字と小文字を厳密に区別します。

手元で直してgit pushするだけです。数十秒から数分で自動的に反映されます。

GitHubに置いたリポジトリは、設定を数クリックするだけでそのままWebサイトになります。これがGitHub Pagesです。サーバーを借りる必要も、ファイルを転送する必要もありません。

前の回でpushしたリポジトリを使います。

これだけです。少し待ってページを再読み込みすると、画面の上のほうに公開URLが表示されます。

https://ユーザー名.github.io/リポジトリ名/

このURLを開いて、自分のページが出れば公開完了です。世界中のどこからでも見られる状態になりました。

いちど公開してしまえば、あとは手元で直してpushするだけで自動的に反映されます。

git add .
git commit -m "自己紹介の文章を書きかえた"
git push

ファイルを転送する作業がない——これがGitとつなげて公開する最大の利点です。「直す→記録する→勝手に公開される」という流れになります。

うまく表示されないときは、上から順に確認してください。

GitHub Pagesは、リポジトリの一番上の階層にあるindex.htmlをトップページとして表示します。

my-site/
├── index.html   ← ここにある必要がある
├── style.css
└── images/

src/index.htmlのように下の階層に入れていると、トップページが見つからず404になります。

これがいちばん多い原因です。WindowsやMacの手元の環境では大文字小文字を区別しないため、Style.cssと書いても手元では表示されます。ところがGitHub Pagesのサーバーは厳密に区別するので、そこで初めて崩れます。

<!-- 手元では動くが、公開すると読みこめない -->
<link rel="stylesheet" href="Style.css">
<img src="images/Shima.PNG">

ファイル名は全部小文字にそろえておくのが安全です。

先頭が/で始まるパスは「サイトの一番上から」という意味になります。GitHub PagesのURLはリポジトリ名を挟むので、これがずれる原因になります。

<!-- ずれる -->
<link rel="stylesheet" href="/style.css">

<!-- 安全 -->
<link rel="stylesheet" href="style.css">

公開リポジトリは、中身がすべて誰にでも見えます。HTMLだけでなく、フォルダに置いたメモやテスト用の画像も同じです。公開の前に一度、リポジトリの中身をGitHubの画面で眺めてみてください。

Gitを覚えたなら、GitHub Pagesがいちばん手間が少ない選択肢です。