GitHub PagesでHP公開のやり方

※自分用の備忘録です

GitHub Pagesとは

GitHub PagesはGitHubが提供しているウェブスペースのようなもので、HTMLで作成した自分のホームページなどを公開することができます。

無料版と有料版がありますが、無料でホームページを公開する場合はソースコードを公開する必要があります。
ソースコードはChromeの検証機能などでも見ることができるものですが、公開するのが気になる方はGitLab Pagesというのを使ってみるのも良いかもしれません。

GitLab PagesはGitLabが運営し、GitHubと同じようにGit管理などができるサービスを提供しています。
こちらではソースコードを非公開で自作のHTMLホームページを公開することができます。

GitHub Pagesでの公開方法

GitHub Pagesにファイルをアップロードする方法はいくつかあります。
ここではその中の一つを説明します。

公開するファイルを用意する

アップロードするファイルを用意しましょう。
HTMLだけでなくCSSやJSなど、静的なファイルは使用することができます。
PHPやWordPressは使用することはできません。

GitHubの設定

ユーザー名をアドレスにする場合

新規リポジトリのリポジトリ名を「自分のGitHubのユーザー名.github.io」にしてPublicにして作成をします。

ユーザー名の直下にディレクトリ名を付けて設定する場合

任意の名前の新規リポジトリを作成します。

アップロード方法

uploading an existing fileを選択し作成したフォルダをアップロードします。
ドラックアンドドロップでもアップロードか可能です。

GitHub Pagesの設定

SettingsのGitHub PagesのCheck it out here!をクリックします。

Sourceからmain（master branch）を選びSaveをするとURLが現れ公開されます。

注意点

アップロード後ホームページに反映されるまで若干時間がかかります。
ほとんどの場合は1分ほどで反映されるので、焦らずに待ちましょう。