勉強奮闘記 GitHub Pages 公開

## はじめに

### まず自己紹介
React を中心に勉強中で、能力はほとんど初心者です。
プログラミングスクールを卒業し、自分で復習がてら、アプリケーションを作成しているところです。

### この記事をきっかけ
ローカルでは動くアプリケーションを作ったので、それを公開したい！
しかしどうも、インフラ周りに苦手意識があり、構築に時間がかかってしまいました。また、少々、公開するまでの行程にややこしさを感じました。このため、自分の備忘のためにも記事を書こうと思いました。
当然ながら、先達様方の記事に助けて頂きました。

### 前提
1. 作成したアプリケーションはReactで作成(create-react-app)したものです。
1. プロジェクトは、GitHubにプッシュ済です。
    - GitHub へのデプロイと公開設定
    - README.md ではなくて index.html を表示させる
1. ※注意ポイントに、`網掛け`を施しています。


# 私が行った手順(NG)
私の試行錯誤となります(お恥ずかしい)。最終結果は 「まとめ」 まで。

## アプリケーションについて
React で作成した簡易なものです。
`README.md` に、自分の行った改修などを都度更新して、プッシュしていました。

## GitHub Pages 公開！
GitHub : 公開したいリポジトリ > (上メニュー)Settings > (左メニュー)Pages

スクールでGitHubの公開をしたことを覚えていました。
Source で、初期値 "None" から、公開したい Branch を選びました。
`また、隣のディレクトリは "(root)" を選びました。`

## package.json 追記！
↓設定を追記しました。
```
{
  ...(略)...
  "homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
  ...(略)...
  "scripts": {
    ...(略)...
    "rm": "rm -rf docs",
    "mv": "mv build docs",
    "git": "git add . && git commit && git push origin main",
    "deploy": "yarn run rm && yarn run build && yarn run mv && yarn run git"
  }
}
```
`git commit`が注意ポイントです。
> package.json への設定はものの見事に忘れていました。下記を参照いたしました。

https://qiita.com/tat_mae084/items/745761eee6cd1d42949d

https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site

これで、コマンドで yarn deploy を実行して、デプロイを行います。

### ！エラー！ Command failed with exit code 1
↓実行結果のエラー記載部分
```
$ mv build docs
$ git add . && git commit'' && git push origin main
Aborting commit due to empty commit message.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
> Aborting commit due to empty commit message.
> = 空のコミットメッセージのためにコミットを中止します。

ならばメッセージをつけようと、package.json を修正。
```
 - "git": "git add . && git commit && git push origin main",
 + "git": "git add . && git commit -m 'deploy' && git push origin main",
```
これでエラーはなくなり、プッシュまで正常に動きました。

## GitHub Pages で発行されたURLにアクセス！
アクセスするURLは、↓になります。
- package.json で追記した "homepage"
```
  "homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
```
- GitHub の Pages 設定画面の上部 "Your site is published at" のリンク

### ところが・・・
`README.md` の内容が表示されるばかりです。

幾つかの記事で調べ回った結果、表示される優先度があるようです。
index.html と README.md がルートにあった場合、README.md が優先されるようです。
勉強になります。。

https://snownotes.org/how-to-use-github-pages/

・・・まあ、私はそれ以前の問題で表示ができていませんでしたがね・・・
というのも、
プロジェクトをはじめに作成する際、create-react-app のボイラープレートを利用しました。
この時、publicフォルダが作成され、index.html はここに配置されます。

そして、`GitHub Pages の設定の時に、参照するフォルダ先を "(root)" にしていました。`
・・・はい。ルートではありません！

### 対応

1. GitHub Pages の設定画面で、"/docs" を選択。
![スクリーンショット 2022-07-03 20.39.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602316/19573f56-c60a-51f7-d52e-11717ab2f4c5.png)

1. ドキュメントディレクトリに /docs があること、/docs に index.html があることを確認
1. 再び、GitHub　Pages の URL にアクセス
1. 表示したいアプリケーションが出ました！

# まとめ
- プロジェクトが作成されている
- GitHub にプッシュ済

のプロジェクトを GitHub Pages から公開するとき

### 🌟 package.json に追記する
```
{
  ...(略)...
  "homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
  ...(略)...
  "scripts": {
    ...(略)...
    "rm": "rm -rf docs",
    "mv": "mv build docs",
    "git": "git add . && git commit -m 'deploy' && git push origin main",
    "deploy": "yarn run rm && yarn run build && yarn run mv && yarn run git"
  }
}
```

### 🌟 GitHub の Pages の設定を行う
GitHub : 公開したいリポジトリ > (上メニュー)Settings > (左メニュー)Pages

1. Branch を公開したい先に変更
1. Branch の隣のディレクトリを "/docs" に変更
![スクリーンショット 2022-07-03 20.39.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602316/19573f56-c60a-51f7-d52e-11717ab2f4c5.png)

＊ローカルで、ドキュメントディレクトリに /docs と、/docs/index.html があることを確認

これで公開が行えました。

# さいごに
公開はできましたが、ベストプラクティスではないと思います。（⇦
特に、index.html 周りはもやもやしてます。/public と /docs で二重管理みたいになってる。。。
私自身がもっと勉強が必要だと反省するところです。