Yeoman + Travis + Github Pages

Herein I will describe how to get everything setup for a new front-end project using Yeoman, Travis, and Github Pages. When Travis successfully builds the project, the built files will be pushed into a gh-pages branch (creating the branch if necessary). This will require use of Yeoman and the Travis CI generator for it.

Starting in an empty directory:

mkdir my-new-everything && cd my-new-everything
npm install generator-webapp
npm install generator-travis-ci
yo webapp

You could install the generators globally with the -g flag if you like. Then do whatever you do to get it into Github. Probably, create the repository there, and then:

git init
git add .
git commit -am 'Initial commit.'
git remote add origin https://github.com/mysterycommand/my-new-everything.git
git push -u origin master

Visit your repository's settings/hooks page in Github. Something like https://github.com/username/repository/settings/hooks in this/my case this. Scroll down to the Travis hook and follow the instructions under Install Notes (ymmv, I did this a while ago and don't remember if it was difficult or not). When you've got that going (Test Hook should send you an email). Then, back in your local repo/command line:

yo travis-ci:gh-pages

… answer some prompts, and if all went well:

grunt test

Verify that the default tests pass, and then:

git add .
git commit -am 'Travis CI setup.'

Et voila … assuming your tests passed (mine did) you should have a new build in a gh-pages branch (I do) and visible to the world at something like http://username.github.io/repository (The initial publishing of your gh-pages branch can take up to 10 minutes). In this/my case: http://mysterycommand.github.io/my-new-everything works like a charm.

Next time, I'll describe my current solution for running Mocha/Chai tests within a RequireJS/AMD based project, and how to get them working both in the browser, and via the command line.