GitHub Pagesを使用したWebページの公開

1.はじめに

フロントエンドのみで構成されたアプリケーションを公開する際にGitHub Pagesを使用したので一連の流れを記録します。

2.事前準備

GitHub登録済み

3.手順

1.リポジトリを作成する

GitHubのRepositoriesの右上のあるNewをクリックします

Repository nameの部分に作成するアプリ名を入力します

今回はwebページを公開するため、Publicを選択し右下のCreateRepositoryをクリックしてください
これでリポジトリが作成できました

作成後の画面のURLは後ほど使用するので保存しておきましょう

2.公開したいファイルをリポジトリ内にアップロードする

まず、アップロードしたいファイルのディレクトリへ移動して、以下コマンドでローカルリポジトリを作成します

$ git init

その後ステージング

$ git add -A

コミットして

$ git commit -m "コミット名"

mainブランチを作成します

$ git branch -M main

そして先程表示されていたURLを使用してローカルとリモートを紐付けます

$ git remote add origin 先程表示されていたURL

最後に以下コマンドでリモートリポジトリにpushします

$ git push -u origin main

ここまでできたら、GitHubでファイルが追加できていることを確認してみてください

3.GitHub Pagesの公開

リポジトリの画面の右上settingをクリックしてPagesをクリックします

Branch部分を先程作成したmainブランチに変更後saveをクリックします

Visit siteと表示される(時間がかかります)ので、クリックするとwebページを確認できます

Webページを開いた際に画像が出ないことがありますがしばらくすれば表示されます。

これで、GitHub Pagesを使用したwebページを公開できました