🐡
gh-pagesライブラリーを使ってデプロイしよう
gh-pagesはGithubのブレンチ名であり、npmライブラリーでもあります
今回紹介したいのはnpmライブラリーの方です
このライブラーは、Github Pageデプロイの手順を自動化することができます
ちなみにデプロイの手順はこうです
-
npm build
でReactをビルド - buildというビルドフォルダが生成される
- gh-pagesというブレンチを作り、buildフォルダの内容を
gh-pages
にアップロード - ローカルプロジェクトに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にビルドできたことを確認しました
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",
}
これでアップロード先の目的地を指定できます
Discussion