業務でAngularを書いていたがそのプロジェクトから話されたのでAngularをかくことがなくなった
ただAngularは個人的には好きなので書き続けようと思ってはいる
そこで作ろうと思ったがGithub User Pages
User, Organization, and Project Pages - User Documentation
Angularのプロジェクトを準備する
Angularは公式で提供されているcliを使用する
これを使用することでgeneratorやwebpackの設定などをcli側で提供してくれるのでAngularをかくことだけに集中できる
$ npm install -g @angular/cli $ ng new --style scss --skip-install hatappi.github.io # yarnを使いたいのでinstallはskip $ cd hatappi.github.io && yarn install
ここまでくると後は
$ ng serve
$ open localhost:4200
すると下記のような画面が開く
ものの数分でAngularのプロジェクトが立ち上がるのは良いですね
リポジトリ準備
次にリポジトリを用意
今回はユーザーページなので[githubのuser_id].github.ioでリポジトリを作成する
デプロイ準備
Github Pageのデプロイ自体も昔はangular-cliで提供されていたが 1.0.0-beta.31 でremoveされたので下記を使った
$ yarn add --dev angular-cli-ghpages $ ng build --prod --base-href "https://hatappi.github.io" $ ./node_modules/angular-cli-ghpages/bin/angular-cli-ghpages --branch=master Successfully published!
これでhttps://hatappi.github.io/にアクセスできるようになる (まだ中身はない..)
今回注意しないといけないのがgithubのProjectPageに関してはmasterの他にgh-pagesなどがホスティングされるがUserPageに関してはmasterにしか適用されないみたい
参考
おまけ
毎回デプロイする時にbuildしてデプロイ用のコマンド叩いては面倒なのでyarn runで実行できるようにした
package.json
"scripts": { "deploy": "ng build --prod --base-href 'https://hatappi.github.io' && angular-cli-ghpages --branch=master" },
これで後はデプロイしたい時に yarn run deploy で済むようになった
