GitHub Pages で React App を Deploy やり方

dev.to

ググったら出てきたこれに沿ってやる

why

twitter.com

@zero_kpr コルボーさんのホームページに触発された
個人サイトの時代を取り戻せ〜みたいな記事を読んだ
求人媒体ごとに Profile 書くのが嫌になって自分のサイト欲しくなった

f:id:kei_s_lifehack:20200824000822p:plain

f:id:kei_s_lifehack:20200824000852p:plain

zerokpr.github.io

可愛く置かれている

shuchi.php.co.jp

この記事に真似するのを恐るな（意訳）って書いてあったから真似して作る

create project

まずは Projectのフォルダを作成

npm init react-app profile

react app を profile という名前で作成。

npm i gh-pages --save-dev

gh-pages という GitHub Pages で公開するための npm library を入れる

3.1.0 が入った

  "homepage": "http://kaede0902.github.io/profile",

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

package.json の一番上に homepage として GitHub の今回の repo profile を追記
scripts: predeploy, deploy, を npm default の build と gh-pages の build で追記

続いて GitHub のレポジトリを実際に作成

git init git add origin ... でリンク

もうこれだけで deploy ができる？

npm run build

The project was built assuming it is hosted at /profile/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  bit.ly/CRA-deploy


> profile@0.1.0 deploy /Users/kaede/code/profile
> gh-pages -d build

f:id:kei_s_lifehack:20200824170440p:plain