Yeomanで作ったAngularのプロジェクトをgithub-pagesで公開する

TL;DR

• ブランチはdevelopとmasterを用意して、masterをgh-pagesのようにして運用する
• リポジトリ futabooo/futabooo.github.io
• github pages https://futabooo.github.io/

Angularプロジェクト作成

諸事情によりGruntではなくてGulpを使いたかったので、下記のリポジトリを参考にAngularのプロジェクトを作成
Swiip/generator-gulp-angular

こんな感じのディレクトリ構成でプロジェクトが作られる

futabooo.github.io
├── bower.json
├── bower_components
├── dist
├── e2e
├── gulp
├── gulpfile.js
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── src
├── tsconfig.json
├── tslint.json
└── typings.json

gulp-gh-pagesをinstallして設定する

https://www.npmjs.com/package/gulp-gh-pages
deployを簡単にしてくれる

$ npm install --save-dev gulp-gh-pages

gulpディレクトリ配下に下記のようにファイルを作成

deoploy.js

'use strict';

var gulp = require('gulp');
var ghPages = require('gulp-gh-pages');

// デフォルトはgh-pagesにdeployする設定になっているので、masterに変更してあげる
var options = {branch: "master"};

gulp.task('deploy', function () {
  return gulp.src('./dist/**/*')
    .pipe(ghPages(options));// optionsを渡す
});

githubにpush＆deploy

github上にリポジトリを作成してmasterとしてひとまずpush

$ git init
$ git add .
$ git commit
$ git remote add origin https://github.com/futabooo/futabooo.github.io.git
$ git push -u origin master

developもpush

$ git branch -m master develop
$ git push -u origin develop

githubの設定でdevelopをbaseブランチに変更する

最初はmasterになっているので、developに変更してUpdate

deployする

$ gulp clean && gulp build
$ gulp deploy

これでmasterブランチにはdistディレクトリのみがpushされるようになり、https://futabooo.github.io/ で表示できるようになる

参考

gh-pagesはプロジェクト用で、userやorganizationはmasterブランチじゃないとだめになってるらしい
https://help.github.com/articles/user-organization-and-project-pages/

ユーザ名の部分は適宜自分のgithubアカウントに変更していただければ。