GitHub Pgaeについて

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

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

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

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

GitHub Pagesを利用した理由

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

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

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

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

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

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

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

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

それでは本題の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のセットアップは完了です。

ちょー簡単ですね。

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

yarn deploy

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

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

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

解決策

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

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

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

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