ローカルプロジェクトを GitHub Pages で公開する

### 前提

- Node.js がインストール済みであること
- git がインストール済みであること
- GitHub でリモートリポジトリを作成済みであること

#### リモートリポジトリが未設定の場合

以下の記事を参考にセットアップする
[Git の環境構築をしよう！(Progate)](https://prog-8.com/docs/git-env-win)

### 開発環境

```
$ npm -v
10.2.4

$ git -v
git version 2.45.2.windows.1
```

## ローカル環境の作業

#### 公開するプロジェクトの概要

- React + TypeScript で作成した Web アプリ
- ビルドツールは Vite を使用

#### リモートリポジトリ（GitHub）への追加

:::note
Windows 環境の場合、以下のコマンド操作は Git Bash や WSL2 で実行すること。
（コマンドプロンプトだとデプロイ時にエラーが発生するため）
:::

1, ローカルプロジェクトに移動しターミナルを開く
2, ローカルプロジェクトを Git リポジトリに変換する
3, プッシュ先のリモートリポジトリを指定する

```bash
# Git リポジトリに変換（初期化）する
git init

# プッシュ先のリモートリポジトリを指定
git remote add origin <URL>

# 確認
git remote -v
```

リモートリポジトリの URL は、GitHub のリポジトリのページ右上の「<> Code」ボタンを押し、「SSH」タブを開くと確認できる。
![image-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665246/178445e6-8619-68fd-3ce7-40ed4acf52dd.png)


4, プロジェクトの全ファイルをステージングする
5, ステージングしたファイルをコミットする

```bash
# 全ファイルをステージングする
git add .

# ステージング確認
git status

# ステージングしたファイルをコミットする
git commit -m "コミットメッセージ"
```

コミットメッセージは、GitHub リポジトリのページで、ファイル名の横に表示される。
![image-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665246/431e075b-0d93-1f38-f6a0-db2deae0ad7c.png)

6, リモートリポジトリの変更を取り込みプッシュする

```bash
# リモートリポジトリの変更を取得
git fetch origin

# 取得した変更をリベース
git rebase origin/main

# 変更をリモートリポジトリにプッシュ
git push origin main
```

#### GitHub Pages 公開設定

1, デプロイに使用するパッケージ（gh-pages）をインストールする

```
npm install --save gh-pages
```

2, package.json ファイルにデプロイ用のスクリプトを追加する

```json:package.json
// アプリケーションのベース URL を指定
"homepage": "https://your-username.github.io/your-repository"
...
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist", // distフォルダを gh-pages ブランチにデプロイする
"build": "tsc -b && vite build"
}
```

:::note warn
注意点
今回は Vite でプロジェクトを作成したため、デフォルトのビルド出力フォルダが「dist」となる。「create-react-app」でプロジェクトを作成した場合は、出力フォルダが「build」になるため、deploy スクリプトの d オプションの指定を置き換える。
:::

3, vite.config.js ファイルでベース URL を設定する

```js:vite.config.js
export default defineConfig({
plugins: [react()],
base: '/your-repository-name/', // GitHub Pagesのリポジトリ名に変更
});
```

4, 変更をリモートリポジトリにプッシュする

```bash
git add .
git commit -m "Add homepage and deploy scripts"
git push origin main
```

5, アプリケーションをビルドする

```
npm run build
```

6, デプロイする

```
npm run deploy
```

SSH のパスワードを要求されるので、SSH 設定時のパスワードを入力する。
なお、デプロイの反映には 1~2 分程度かかる。

## GitHub での操作

1, GitHub リポジトリのページで、「Settings」タブをクリック
![image-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665246/c69e9093-c9d1-7cce-94f8-22134a559b6a.png)


2, サイドバーの「Pages」セクションをクリック
![image-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665246/6280aafc-85fe-107b-c020-7cf27e6346b2.png)


3, ブランチのドロップダウンから「gh-pages」ブランチを選択
![image-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665246/df3bf1ef-444b-db35-40c1-7bbf46c4c73c.png)


4, 「Pages」セクションの最上部に表示されている「Visit site」をクリックし、デプロイしたアプリにアクセスする
![image-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3665246/a059e05b-38ae-054c-2c13-d9277da926bf.png)


## ソースコードの修正を反映する

ローカル環境でソースコードを修正し、以下のコマンドを実行する。

```bash
# 変更したファイルを追加
git add App.tsx

# コミット
git commit -m "text fix"

# プッシュ
git push origin main

# ビルド
npm run build

# デプロイ
npm run deploy
```

## トラブルシューティング

#### デプロイすると SSH キー認証エラーになる

エラー内容

```log
ProcessError: git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
```

確認点

- リモートリポジトリが登録されているか
- SSH キーが作成されているか
- GitHub に SSH 接続ができるか

```bash
# リモートリポジトリが登録されているか
ls ~/.ssh # 「id_ed0000」のようなファイルがあればOK

# SSH キーが作成されているか
ssh -T git@github.com # 「Hi <github name>!」と表示されたらOK

# GitHub に SSH 接続ができるか
git remote -v # 「origin  git@github.com:<github name>/<repository name>」と表示されたらOK
```