GitHubPagesを使ってサイト公開をしよう

## はじめに
GitHub Pagesで静的サイトを公開してみました！
今回はその方法をまとめた記事を備忘録として書いています。

## GitHub Pages とは？

> GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。 

GitHub Pagesを利用して簡単にサイトを公開できます。
（静的なサイトであることが前提です）


## 前提条件
- GitHubのアカウントを持っている
アカウント作成方法は[こちら](https://docs.github.com/ja/get-started/quickstart/creating-an-account-on-github)

## 公開までにやったこと

公開のためにやったことは以下です。
- GitHub Pagesでのサイト公開準備
    - 公開用ページの作成
    - 公開用新規リポジトリの作成
    - 作成ページをリポジトリにコミット、プッシュ
- GitHub Pagesのサイト公開設定

本記事の主な内容は　GitHub Pagesのサイト公開設定 なので、
公開用新規リポジトリの作成〜作成ページをリモートリポジトリに反映
については簡単に説明します。

### GitHub Pagesでのサイト公開準備

#### １. 公開ページの作成
公開ページ用のファイルなどを作成します。

#### ２. 公開用新規リポジトリの作成
GitHub Pagesでのサイト公開のためには、
GitHubのPublicリポジトリが必要になります。
そのため、公開用に新規でPublicリポジトリを作成します。


![スクリーンショット 2023-12-30 20.32.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/8b4189ca-5716-0beb-3ac5-71362478e8c4.png)

リポジトリ名を設定します。testリポジトリを作りたい場合は画面のようにRepository nameに「test」と入力します。

![スクリーンショット 2023-12-31 11.03.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/15094b2f-0292-1484-a733-ceecaaad8a8a.png)

 -  Description
     → 説明欄なので空欄でもOKです。
 -  Add a README file
     → 必要に応じてチェックしてください
 -  Add .gitignore
     → gitの管理対象から除外するものがあれば選択してください
 -  Choose a license
     → リポジトリのソースコードやファイルなどにライセンス表記などが必要であれば必要に応じて選択

    Create repositoryを押してリポジトリの作成は完了です！



#### 3. 作成ページをリモートリポジトリに反映
１で作成したファイルなどをコミット、プッシュし、１で作成したリモートリポジトリに反映します。

- コミット方法
1.  インデックスへの追加
以下のコマンドでインデックスにファイルを追加します。
インデックスに追加することで、Gitのバージョン管理ファイルとして認識されます。
    ```
    $ git add ファイル名　
    ```

    以下のコマンドで差分確認ができます。
    ```
    $ git diff ファイル名
    ```
    <br>

2.  ローカルリポジトリへのコミット
以下のコマンドでローカルリポジトリにファイルをコミットします。

    ```
    $ git commit -m "コミットメッセージ"
    ```

    以下コマンドでコミットの履歴を確認できます。
    ```
    $ git log
    ```
    <br>

3.  リモートリポジトリへのプッシュ
以下のコマンドでリモートリポジトリにプッシュし、ローカルとリモートのリポジトリを同じ状態にします。
    ```
    $ git push origin ブランチ名
    ```

    ::: note info
    「origin」はリモートリポジトリへのプッシュなどで利用する際に、アドレス入力を省略できるコマンドです。
    つまり「origin」 = 「○○のリモートリポジトリ」であることを認識させるためのものです。
    `$ git remote add origin アドレス`とコマンドを打つことで毎回のアドレス指定が不要になり、「origin」で済むようになります。
    :::

    `$ git remote add origin`については[こちら](https://qiita.com/YUI_888/items/9819ccfba3354fba86d2)が参考になります。

    ここまでで、サイト公開の準備が整いました！

### GitHub Pagesのサイト公開設定

作成ページをGitHubPagesで公開します。
公開手順は以下の通りです。

1. 公開用のリポジトリ画面からSettingsを開く
![スクリーンショット 2023-12-30 20.32.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/c0b033b3-7ca1-a225-d338-e3dd54805da7.png)
    <br>
    
2. Pagesを選択する
![スクリーンショット 2023-12-30 20.33.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/222207af-c14a-81c7-60ba-3315d707eaca.png)
    <br>

3. サイトに反映したいブランチを選択する
![スクリーンショット 2023-12-30 20.33.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/f0ae46bc-2912-2928-0454-e5db438809cb.png)
初期状態はNoneなのでここから反映したいブランチを選び、Saveを押します。
![スクリーンショット 2023-12-31 11.15.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/6734400f-eaf3-371b-42b6-1cd562923ca4.png)
![スクリーンショット 2023-12-30 17.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/47a68159-c1f7-6c94-274f-7fd49a5fcdf1.png)
「GitHub Pages source saved.」と表示されたら設定の保存ができています。

    <br>

4. 画面を更新するとYour Site si live at ...でURLが表示されているためアクセスして確認する。
![スクリーンショット 2023-12-30 20.42.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570022/c54842dd-7946-fdfb-4dd5-2793e8fcc958.png)
想定通りページが表示されたら正しく公開できています！

## 最後に
簡単に公開できるのでみなさんも試してみてください！

## 参考文献

https://docs.github.com/ja/get-started/quickstart/creating-an-account-on-github
https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages
https://qiita.com/YUI_888/items/9819ccfba3354fba86d2