Haroen | Gulp on Github Pages

In a previous post (gems on Github Pages) I explained my strategy for how to add gems Github doesn’t allow by default, but this isn’t always enough.

I’ve noticed that’s it’s pretty annoying to get jekyll to play nice with gulp. At some point I decided that it’d be an option to just create static files with gulp, and use some other method to replace what jekyll was doing for me. I’m using this strategy for the (at this point not very impressive) punchtime web client.

It consists of the following things:

This makes sure that you’re able to write your gulp as if it’s simply going to /dist and not care that it’s actually being deployed on github pages.

The .travis.yml to achieve this looks like this:

# You must sign into travis-ci.org and set the commit hook on your project for travis to
# run on your project. The secure: variable must be generated by running `travis encrypt`
# on a github oauth key that you can generate using curl.

language:
  node_js
node_js:
  - 5.7.0
notifications:
branches:
  only:
    - master
env:
  global:
    # GH_OAUTH_TOKEN is the oauth token generated as described at
    # https://help.github.com/articles/creating-an-oauth-token-for-command-line-use
    #
    # curl -u 'username' -d '{"scopes":["repo"],"note":"push to gh-pages from travis"}' https://api.github.com/authorizations
    #
    # It must be encrypted using the travis gem
    # http://about.travis-ci.org/docs/user/build-configuration/#Secure-environment-variables
    #
    # travis encrypt GH_OAUTH_TOKEN=XXXXXXXXXXXXXXX
    #
    # User specific env variables
    - secure: ...
    - GH_OWNER=...
    - GH_PROJECT_NAME=...
    - GH_EMAIL=...
    - GH_USER=...
    - GH_MESSAGE=...
script:
  - gulp
after_success:
  # Any command that using GH_OAUTH_TOKEN must pipe the output to /dev/null to not expose your oauth token
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then git submodule add -b gh-pages https://${GH_OAUTH_TOKEN}@github.com/${GH_OWNER}/${GH_PROJECT_NAME} site > /dev/null 2>&1
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then cd site
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then if git checkout gh-pages; then git checkout -b gh-pages; fi
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then git rm -r .
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then cp -R ../dist/* .
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then cp ../dist/.* .
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then git add -f .
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then git config user.email "${GH_EMAIL}"
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then git config user.name "${GH_USER}"
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then git commit -am "${GH_MESSAGE}"
  # Any command that using GH_OAUTH_TOKEN must pipe the output to /dev/null to not expose your oauth token
  - if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then git push https://${GH_OAUTH_TOKEN}@github.com/${GH_OWNER}/${GH_PROJECT_NAME} HEAD:gh-pages > /dev/null 2>&1

Which is pretty similar to the .travis.yml of my previous post.

You can see this in action on github.com/punchtime/web and live on punchtime.io. You can also check out the gulpfile in that repository.

Another option is to put the commands in an external file (like I did on Holmes). This would make your .travis.yml look like this:

# ... the rest
after_success:
    - ./deploy.sh

and the deploy.sh like this:

#!/bin/bash
if [[ $TRAVIS_PULL_REQUEST == 'false' ]]; then
  # whatever commands you need
  npm run build
  git submodule add -b gh-pages https://${GH_OAUTH_TOKEN}@github.com/${GH_OWNER}/${GH_PROJECT_NAME} site > /dev/null 2>&1
  cd site
  if git checkout gh-pages; then git checkout -b gh-pages; fi
  git rm -r .
  # what file you output to
  cp -R ../dist/* .
  cp ../dist/.* .
  git add -f .
  git config user.email "${GH_EMAIL}"
  git config user.name "${GH_USER}"
  git commit -am "${GH_MESSAGE}"
  # Any command that using GH_OAUTH_TOKEN must pipe the output to /dev/null to not expose your oauth token
  then git push https://${GH_OAUTH_TOKEN}@github.com/${GH_OWNER}/${GH_PROJECT_NAME} HEAD:gh-pages > /dev/null 2>&1
fi

This syntax might be better because it allows you to have the commands in a separate file.