ReactをGithub PagesにSourceTreeを使って公開する方法

自分用メモ

create-react-appで作成したReactアプリをGithub Pagesで公開する方法をまとめる

初回の場合

1.Reactアプリを作成する

$ cd directoriName  //任意のディレクトリ名 
$ create-react-app appName //任意のアプリ名

$ yarn start //localhostが立ち上がるか確認

2.package.jsonを書き換える

"homepage": "https://github.com/username/appName", //Github Pagesで公開されるリンク
"scripts": {
	"build": "react-scripts build && mv build docs",
}

3.ビルドする

Reactアプリをビルドする

$ npm run build

docフォルダが新規作成され、子要素にもbuildフォルダが作成される

4.Githubにアップロード

4-1.Githubで新規リポジトリを作成

4-2.ローカルにクローン

Sourcetreeで「URLからクローン」する

4-3.commit & pull

1.で作成したReactアプリをcommit&pullする

5.Github Pages

リポジトリのSettings内にあるGitHub PagesのSourceを、「None」→「master branch/docs folder」に変更

数分後、生成されたリンクにビルドされた内容が反映される

DONE!!

作業したものを反映する場合

1. masterをpull
2. ブランチをきる
3. $ yarn start
4. コードの修正を行う
5. docを削除（ここで消さないと、buildフォルダが新たに作成されてしまう）
6. npm run buildでdocを作成
7. commit
8. push
9. githubでMarge