Qiita 投稿4回目です。今回はGitHub Pagesに関する記事です。

当記事は作成したアプリ(React TypeScript)をGitHub Pages で公開する内容です。

GitHub Pgaeについて

GitHub PageとはGitHubにより自身のレポジトリのプロジェクトを静的ホスティングを行えるサービスです。

GitHub Pagesでホスティングを行えるのは HTML CSS JavaScriptのみです。サーバーサイドのホスティングを行うことはできません。

また、GitHub Pagesを利用する場合はGitHubアカウントの取得とホスティングを行いたいWebアプリかWebサイトのリポジトリが必要になります。

GitHub　Pagesには利用規約があります。使用制限や禁止要項などが存在します。ホスティングをしたいプロジェクトが利用規約に反していないかを確認してGitHub Pagesを利用しましょう。

利用規約はこちらから（https://docs.github.com/ja/free-pro-team@latest/github/working-with-github-pages/about-github-pages）

GitHub Pagesを利用した理由

私がなぜ GitHub Pagesを利用したかというとGitHub Pagesが容易に利用できそうだったからです。

私は今まで、Netlifyやfirebaseでフロントのホスティングを行なっていましたが、GitHub Pagesに関する記事を見たときに簡単そうだったので、GitHub Pagesを利用しました。

プロジェクトをGitHubからホスティングできるというのはとても魅力的だと思います。皆様ぜひホスティングにお悩みの際はGitHub Pagesを利用してみてはいかがですか？

他のホスティングサービスについて

フロントのホスティングサービスはGitHub Pages意外にも多々あります。

有名なサービスとしてNetlifyやfirebaseなどが存在します。

ホスティングサービスによるプロジェクトの速度のちがいについては正直よくわかりません。

どのサービスも黄本無料で利用することができます。ただし場合によっては有料プランになることもあるそうです。（今まで無料だったので、どうしたら有料になるかは不明。誰か分かる方教えてください）

基本無料ってとてもいいですよね。私のような学習でデプロイを行うにはとてもありがたいです。

GitHub Pagesのセットアップ

それでは本題のGitHub Pagesの利用方法について解説します。

今回はReactで作成したアプリをGitHub Pagesに公開する方法なので、VueやAngularといった他の人気javaScriptフレームワークの場合異なるかもしれないのでその場合はご了承ください。

デプロイしたいプロジェクトはないがGitHub Pagesを利用してみたい人は [create react app] で作成された初期のアプリなどで試してみてください。

リポジトリを作成していない人はリポジトリの作成を行い、リポジトリにソースコードを push してください。

まず

yarn add gh-pages @types/gh-pages

でGitHub Pagesに関するライブラリをインストールしましょう。

これでめちゃくちゃ簡単にGitHub Pagesにデプロイを行うことができます。

次にインストールをしたgh-pagesを用いて簡単でデプロイができるように設定を行います。

//...
"homepage": "https://[自身のGitHubのアカウント名].github.io/[デプロイしたいリポジトリの名前]/"

"scripts": {
  //...
  "deploy": "yarn build && gh-pages -d build"
}

package.jsonに上記の内容を追加します。

これでGitHub Pagesのセットアップは完了です。

ちょー簡単ですね。

作成したReact製アプリをGitHub Pagesにデプロイする

ではGitHub Pagesに作成したプロジェクトをデプロイしましょう。
先ほど追加したpackage.jsonのscriptsを実行します。

yarn deploy

ではGitHubのリポジトリのsettingを確認しましょう。

これで公開されています！

しかし ...

URLにアクセスしても何も表示されない！

解決策

<base href="<GitHub Pagesの公開URL>">

上記をpublic/index.htmlのheadに追加することで表示することができました！

以上がReactアプリをGitHub Pagesにデプロイする方法です。

参考サイト

GitHub Pagesについて

ReactアプリをGitHub Pages(Project Pages)で公開する

GitHub PagesにReactアプリをデプロイする方法