React – GitHub Pagesで公開

今回は、Reactで作成したポートフォリオをGitHub Pagesを利用して公開してみたいと思います。

自分はすでにReactでの作業を行って公開しますが、ここではCRA(Create React App)で作成してそのまま公開します。

僕はyarnを使っているので以下はyarnを使った方法となります。

React App作成

$ yarn create react-app my-portfolio

• React Appを作成します。「my-portfolio」はプロジェクト名となります。

$ cd my-portfolio

$ git commit -m "first commit"
$ git remote add origin git@github.com:twan65/my-portfolio.git
$ git push -u origin master

• GitHubのリポジトリを作成して、初めてのコミットを行います。

gh-pagesインストール

$ yarn add -D gh-pages

• 上記のコマンドで「gh-pages」をインストールします。
• 無料でホスティングするためのGitHub Pagesライブラリーです。

package.json修正

。。。
"homepage": "https://twan65.github.io/my-portfolio",
。。。

• “homepage”を上記のように変更します。

"scripts": {
　。。。
    "deploy": "yarn build && gh-pages -d build"
  },

• “scripts”配下に「”deploy”: “yarn build && gh-pages -d build”」のようにdeployコマンドを追加します。

デプロイ

$ yarn deploy

• 上記のコマンドでReactプロジェクトをデプロイします。
• でgh-pagesブランチが作成されて、GitHub Pagesのブランチ設定も行われます。

GitHub Pages設定確認

• 作成したリポジトリの「Setting」→「Pages」に入ります。
• 緑色にURLと公開されましたというメッセージが表示されたらOKとなります。
• SSLまで適用されていますね！

サイト確認

おお！！見えてますね！

終わり

自分が調べた感じだと静的ページだけになるらしいです。

４０４エラーが発生する場合にはURL最後に「/index.html」を付ければできるらしいです。

参考

https://qiita.com/pure-adachi/items/173f5dda05a391d2b956

https://velog.io/@byjihye/react-github-pages