お気持ちの表明

思考を雑に外出していきます

GitHub PageをReactで作ってみるまでのメモ

React

転職活動している時に、自己紹介代わりにGistにかいといた職務経歴書を投げつけていた。 転職活動中に会う人だからいいけど、初対面で投げつけるにしてはちょっと重すぎない？？？？？となっていた。 で、ゆるふわなプロフィールページほしくない？？？となり、GitHub Pageの存在を思い出し、ReactNative書いてたし、Reactでイケるやろ！！！とやったときのメモ

Hello, World的なところまで

公式の以下のページを参考にしつつ、進めていく

[username].github.ioでリポジトリを作る。 私の場合mrtry.github.ioで作った。

f:id:symmt9302:20180507163035p:plain

作ったリポジトリをcloneする 私の場合はこんなかんじ

$ git clone https://github.com/mrtry/mrtry.github.io

テキトーなhtmlを作ってpushしてみる

$ cd mrtry.github.io
$ echo "Hello World" > index.html
$ git add -A
$ git commit -m 'init'
$ git push origin master

https://mrtry.github.ioにアクセスしてみると、見れる。爆速。

f:id:symmt9302:20180507163117p:plain

create-react-appでそれっぽいのをつくる

趣味の問題でTypeScriptでやっていきます。

$ create-react-app my-pages --scripts-version=react-scripts-ts

こうなります

$ ls
README.md          node_modules       public             tsconfig.json      tslint.json
images.d.ts        package.json       src                tsconfig.test.json yarn.lock

startしてみます

$ yarn start

ババーンとできます

f:id:symmt9302:20180507163328p:plain

git initとかしていきます

$ git init

.gitignoreは、/buildをコメントアウトしときます

$ cat -n .gitignore
     1  # See https://help.github.com/ignore-files/ for more about ignoring files.
     2
     3  # dependencies
     4  /node_modules
     5
     6  # testing
     7  /coverage
     8
     9  # production
    10  #/build
    11
    12  # misc
    13  .DS_Store
    14  .env.local
    15  .env.development.local
    16  .env.test.local
    17  .env.production.local
    18
    19  npm-debug.log*
    20  yarn-debug.log*
    21  yarn-error.log*

buildします

$ yarn build

ここまでやったやつをpushしても、GitHub Pageのドキュメントルートは/buildになっていないので、Webページは見れないです。

User Pagesのドキュメントルートを無理くりいじる

/buildをドキュメントルートとしたいので、以下を参考にいじっていきます

sourceというブランチを生やしておく

$ git checkout -b source
$ git push origin source

Default Branchをsourceにする

f:id:symmt9302:20180507163416p:plain

masterを消して、subtreeをbuild/にしたmasterを作ってpushする

$ git push -f --delete origin master
$ git subtree push --prefix build/ origin master

masterはこんな感じになる

f:id:symmt9302:20180507163444p:plain

めでたく、Reactの画面が出てくる

f:id:symmt9302:20180507163515p:plain

基本的にsourceで作業して、作業が終わったらこれらの処理をガッとやればデプロイってかんじになりそう というわけで、雑にこんなスクリプトを書いた

cd $(git rev-parse --show-toplevel)
yarn build
git add -A
git commit -m 'deploy'
git push -f --delete origin master
git subtree push --prefix build/ origin master

シュッとやったリポジトリはこちらになります

できたページはこんなかんじです

参考