GitHub Pagesを使ったWebページの公開方法

<h1>はじめに</h1>

GitHub Pagesを使うことで簡単に自分の作成したWebページを公開することができます。

本記事では、GitHub Pagesを使ったWebページの公開方法をまとめております。

<h1>全体の流れ</h1>

GitHub PagesでWebページを公開するまでの流れは以下の通りです。

1. 公開するWebページを作成する
2. リモートリポジトリを作成する
3. リモートリポジトリとローカル環境を連携させる
4. ローカル環境のディレクトリにファイルを格納する
5. リモートリポジトリへファイルを送信する
6. GitHub Pagesの公開設定をする

<h1>1. 公開するWebページを作成する</h1>

ローカル環境にて公開するWebページを作成する。

<h1>2. リモートリポジトリを作成する</h1>

GitHubにサインインし、画面右上にある`+`から`New repository`を選択する。

:::note info
GitHubのアカウント登録がまだの方は[こちら](https://github.co.jp/)からアカウント登録をしてください。

:::

![スクリーンショット 2023-06-16 21.49.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/9640d8df-ee58-ea47-553c-febce39fe23b.png)

`Create a new repository`のページ内の`Repository name`にリポジトリ名を記入する。

![スクリーンショット 2023-06-16 22.16.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/3e6667f8-6908-2157-88f6-b5c15e094c40.png)

リポジトリの公開範囲を`Public(全員に公開)`か`Private(指定したアカウントのみに公開)`のどちらかを選択し、`Create repository`をクリックする。

:::note warn
2023年6月の時点では、`Private`のリポジトリでWebページを公開するにはGitHubの有料プランに加入する必要があります。
無料プランをご利用の方は`Public`のリポジトリを選択してください。

:::

![スクリーンショット 2023-06-16 22.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/40cf493d-bc4e-3f5d-111a-c8e94d97eb08.png)

下の画面が表示されましたら、リモートリポジトリの作成完了です。

![スクリーンショット 2023-06-16 21.52.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/11588a9e-8161-18f4-b693-2c6c2f76b1f8.png)

<h1>3.リモートリポジトリとローカル環境を連携させる</h1>

ローカル環境にてターミナルを開き、作業用ディレクトリに移動する。
※今回は`test`という新規作業用ディレクトリを作成しています。

```
$ mkdir test
$ cd test
```

リモートリポジトリ作成後の画面に記入されている`..or create a new repository on the command line`のコマンドをコピーして、ターミナルで実行する。

```
$ echo "# test" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/GitHubアカウント名/test.git
$ git push -u origin master
```

エラーが出ていなければ、リモートリポジトリとローカル環境の連携が完了します。

<h1>4.ローカル環境のディレクトリにファイルを格納する</h1>

作業用ディレクトリに作成したWebページに必要なファイルを格納する。

<h1>5.リモートリポジトリへファイルを送信する</h1>

作業用ディレクトリに格納したファイルをリモートリポジトリへ送信します。

```
$ git add .
$ git commit -m "Webページ作成ファイルの格納"
$ git push origin master
```

<h1>6.GitHub Pagesの公開設定をする</h1>

GitHubのリモートリポジトリのページ内にある`Settings`を選択する。

![スクリーンショット 2023-06-16 22.58.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/e27bf324-760e-05ec-37a8-4f6f7d876eae.png)

`Code and automation`内の`Pages`を選択する。

![スクリーンショット 2023-06-16 23.02.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/908af0f5-977d-9c6a-a0f9-f57a8c52f594.png)

`Branch`の`None`をデフォルトブランチ(`master`か`main`)に変更する。

![スクリーンショット 2023-06-16 23.10.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/30bb86d9-096f-0a4b-51c6-2c13137f29ef.png)

デフォルトブランチの変更後、`Save`をクリックする。

![スクリーンショット 2023-06-16 23.13.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/809353bd-b852-fb24-48a0-d189fbb7dada.png)

これで公開したいWebページのURLが画面上部に表示されます。


:::note warn
URLが表示されるのに数分かかるため、ページを更新してURLが表示されるかを確認してください。

:::

![スクリーンショット 2023-06-16 23.19.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3332710/377ee789-7577-9e81-9abb-e81235b3f8c9.png)

<h1>参考文献</h1>

[自分で作ったWebページをインターネット上に公開しよう！ | プログラミングの入門なら基礎から学べるProgate[プロゲート]](https://prog-8.com/docs/github-pages)