はじめに
Reactを勉強する上でGithub pageでReactアプリを公開できるのか気になったのがきっかけです。
GitHub Pagesについて
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
[GitHub 公式ヘルプ]https://help.github.com/ja/github/working-with-github-pages/about-github-pages
参考にしたサイト
- GitHub PagesにReactアプリをデプロイする方法
https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf - React公式(INSTALLATION>新しいReactアプリを作る)
https://ja.reactjs.org/docs/create-a-new-react-app.html
環境
以下は私が行った環境です.
| name | version |
|---|---|
| Node | v10.14.2 |
| npm | 6.4.1 |
2019/12/19現在ではReact公式サイトに
あなたのマシンに Node >= 8.10 及び npm >= 5.6 の環境が必要です
と記載されていました.
手順
1.Reactアプリの作成
以下のコマンドを実行しました.
今回はreact-pagesという名前のReactアプリを作成しています.
$ npx create-react-app react-pages
2.gh-pagesのインストール
以下のコマンドでgh-pagesをインストールします。
以下のコマンドではcd react-pagesで作成したreact-pagesフォルダまで移動しgh-pagesをインストールしています。
$ cd react-pages
$ npm install gh-pages --save-dev
npm
Node.jsで利用するパッケージ管理ツール
gh-pages
GitHubのgh-pagesブランチ（または他の任意の場所）にファイルを公開するためのパッケージ
3.Reactアプリのpackage.jsonを修正
作成したReactアプリのpackage.jsonに以下の設定を追記してください.
ここで"homepage"に書いてあるURLの[GitHub username],[created repository name]はそれぞれ自分が作成した名前をつけてください
//...
"homepage": "https://[GitHub username].github.io/[created repository name]/",
"scripts": {
"deploy": "npm run build && gh-pages -d build"
},
//...
4.GitHubでRepositoryを作成
このときのリポジトリの名前は作成したReactアプリと異なっていても大丈夫です
また、GitHubがPROアカウントではない場合はPublicでRepositoryを作成してください。
6.作成したアプリをデプロイ
以下のコードでデプロイします。また,実行する場所は作成したReactアプリ内で行ってください.以下の前半部分はリポジトリを作成したときに出てくる任意のフォルダーとリポジトリを接続しREADME.mdをリポジトリへ追加しているものです.
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin
$ git@github.com:[GitHub username]/[Repository name].git
$ git push -u origin master
$ npm run deploy
5.GitHubPageの設定
作成したGigHubのリポジトリよりsettingへ移動,
その後下へスクロールしGitHub Pages のSourceをgh-pages branchへ変更する.
結果
GitHubPages設定後表示もう一度GitHubPagesの設定場所へ移動し表示されているURLをクリック.
以下のようなページが開かれていれば成功です.
最後に
デプロイの意味とか全然しらない初学者(私)でもちょっと調べたらできるもんだなぁと感激しました。
積極的にいろんなことにトライしてみようと思いました。
次はReactをつかって自分のポートフォリを作りたいと思います。