読者です 読者をやめる 読者になる 読者になる

AngularでGithubUserPagesをつくりはじめる

業務でAngularを書いていたがそのプロジェクトから話されたのでAngularをかくことがなくなった
ただAngularは個人的には好きなので書き続けようと思ってはいる
そこで作ろうと思ったがGithub User Pages

User, Organization, and Project Pages - User Documentation

Angularのプロジェクトを準備する

Angularは公式で提供されているcliを使用する

github.com

これを使用することで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のプロジェクトが立ち上がるのは良いですね

f:id:hatappi1225:20170505173055p:plain

リポジトリ準備

次にリポジトリを用意
今回はユーザーページなので[githubのuser_id].github.ioリポジトリを作成する

f:id:hatappi1225:20170505173315p:plain

デプロイ準備

Github Pageのデプロイ自体も昔はangular-cliで提供されていたが 1.0.0-beta.31 でremoveされたので下記を使った

github.com

$ 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 で済むようになった