【GitHub Pages】サイト構築最速手順

これは何

https://<ユーザー名>.github.io/<リポジトリ名>/ を最短で公開するためのメモです。

GitHub Pages は、GitHub のリポジトリから HTML / CSS / JavaScript などの静的ファイルを公開できるホスティング機能です。今回は GitHub の画面だけで、プロジェクトサイトを公開します。

GitHub Pages は手軽で便利です。個人サイトも簡単に作れますが、意外と使われていない印象があるので、どれくらいサクッと公開できるのかを最速手順でまとめます。

今回作るもの

https://<ユーザー名>.github.io/<リポジトリ名>/ というサイトを公開します。

開始

1. リポジトリを作る

GitHub で新しいリポジトリを作ります。

• Repository name: 任意のリポジトリ名
• Public / Private: どちらでもよいが、GitHub Free で Pages を使うなら Public にする
• Add a README file: オンにする

GitHub Pages は、公開元のトップにある index.html、index.md、または README.md をエントリファイルとして見つけます。

今回は Add a README file をオンにしているので、最初から README.md があります。最速手順ではこれをそのまま入口にします。

2. GitHub Pages を有効化する

リポジトリ画面で以下の順に進みます。

1. Settings
2. 左メニューの Pages
3. Build and deployment の Source を Deploy from a branch にする
4. Branch を main、フォルダを /root にする
5. Save

これで GitHub Actions による Pages のビルドとデプロイが走ります。

3. 確認する

しばらく待つと、次の URL で見られます。

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

たとえば、ユーザー名が ysdzm、リポジトリ名が hoge-pae なら https://ysdzm.github.io/hoge-pae/ です。

完走

やることは結局これだけです。

1. リポジトリを作る
2. Settings > Pages で main / /root を公開元にする
3. https://<ユーザー名>.github.io/<リポジトリ名>/ を確認する

お疲れさまでした。これで公開完了です。

参考

• ysdzm/hoge-page - GitHub
• GitHub Pages サイトの作成 - GitHub Docs
• GitHub Pages の制限 - GitHub Docs
• GitHub Pages とは - GitHub Docs