gh-pagesライブラリーを使ってデプロイしよう

gh-pagesはGithubのブレンチ名であり、npmライブラリーでもあります

今回紹介したいのはnpmライブラリーの方です
https://www.npmjs.com/package/gh-pages

このライブラーは、Github Pageデプロイの手順を自動化することができます
ちなみにデプロイの手順はこうです

1. npm buildでReactをビルド
2. buildというビルドフォルダが生成される
3. gh-pagesというブレンチを作り、buildフォルダの内容をgh-pagesにアップロード
4. ローカルプロジェクトにbuildフォルダを削除

では、早速使いましょう

まずはインストールします

npm install gh-pages --save-dev

package.jsonにhomepageの定義を追加します
（事前にGithubレポジトリーを用意するのがいいです）

packges.json

{
	"name": "react-complete-guide",
+	"homepage": "https://ianchen0419.github.io/react-complete-guide",
}

homepageはGithub PagesのURL（予定）です
構成はこうです

https://ユーザー名.github.io/プロジェクト名

またpackage.jsonのscriptsに新しいコマンドを追加します

package.json

{
	...
	"scripts": {
+		"deploy": "npm run build && gh-pages -d build -m \"Updates --skip-ci\"",
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
}

-m \"Updates --skip-ci\"はコミットメッセージにskip-ciというキーワードを仕込んでおり
もしGithub CIのpipelineを使ってる場合は、CIの工作を無視します

実行

コマンドをRunしてみます

npm run deploy

そしてGithub Pagesにビルドできたことを確認しました
https://ianchen0419.github.io/react-complete-guide/index.html

gh-pagesのサブフォルダにアップロード

デフォルトはgh-pagesのルートフォルダにアップロードします
しかし、一つのGithub Repoには、複数の展示用Websiteがあってほしい場合があります

例えばこういうルートフォルダの目的地ではなく

https://ianchen0419.github.io/react-complete-guide/index.html

下のように、サブフォルダにアップロードしたいです

https://ianchen0419.github.io/react-complete-guide/couse-goal/index.html

解決法は以下です

gh-pagesの-eを使って、目的地を提示します

package.json

{
	...
	"scripts": {
-		"deploy": "npm run build && gh-pages -d build -m \"Updates --skip-ci\"",
+		"deploy": "npm run build && gh-pages -d build -m \"Updates --skip-ci\" -e \"couse-goal\"",
	}
}

そして、homepageにもサブフォルダを加えます

package.json

{
-	"homepage": "https://ianchen0419.github.io/react-complete-guide",
+	"homepage": "https://ianchen0419.github.io/react-complete-guide/couse-goal",
}

これでアップロード先の目的地を指定できます