If you follow the polymer documentation for Creating a reusable element there is a section for generating a docs and demo page and pushing it to github pages.This is a great practice for letting the world know how your knew shiny element looks and behaves!
In this post we are going to automate the whole process to get triggered after every push to our repo with the help of Travis CI.

The original idea came from the article Continuous deployment of client side apps with GitHub Pages & Travis CI and i built upon it to make it work for our web components, so you could check it out for a more detailed explanation of the setup steps involved.

Note: The following assumes we have a directory structure like the seed element example with complete index and demo pages.

####Travis setup Ok, first enable Travis for your repository, then we will need two enviroment variables, go to travis repo settings and add the following:

  • GH_REF => Is the repo url without the protocol prefix, like github.com/user_name/repo_name

  • GH_TOKEN => A secret token you can generate from github settings -> Personal access token

####Local changes We will need two files in the root directory of our element, .travis.yml and gpages_build.sh

First our .travis.yml file :

language: node_js
node_js: stable
  - bash ./gpages_build.sh <github-username> <repo-name> <git-name> <git-e_mail>
- npm install bower
- export PATH=$PWD/node_modules/.bin:$PATH

Here we tell Travis to use node.js, then in the before_script hook we install bower and add it to the path.
Then we should supply some arguments in the script call, like our github username and repo name plus the name and e-mail to be used by git for the commit.
There is a last branch parameter that defaults to master, so add this as well if needed.

Then for the actual page build script :

# Modified to work with Travis CI automated builds
# Original license follows
# @license
# Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
# This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
# The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
# The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
# Code distributed by Google as part of the polymer project is also
# subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt

# This script pushes a demo-friendly version of your element and its
# dependencies to gh-pages.

# usage gp Polymer core-item [branch]
# Run in a clean directory passing in a GitHub org and repo name
branch=${5:-"master"} # default to master when branch isn't specified

mkdir temp && cd temp

# make folder (same as input, no checking!)
mkdir $repo
git clone "https://${GH_TOKEN}@${GH_REF}" --single-branch

# switch to gh-pages branch
pushd $repo >/dev/null
git checkout --orphan gh-pages

# remove all content
git rm -rf -q .

# use bower to install runtime deployment
bower cache clean $repo # ensure we're getting the latest from the desired branch.
git show ${branch}:bower.json > bower.json
echo "{
  \"directory\": \"components\"
" > .bowerrc
bower install
bower install $org/$repo#$branch
git checkout ${branch} -- demo
rm -rf components/$repo/demo
mv demo components/$repo/

# redirect by default to the component folder
echo "<META http-equiv="refresh" content=\"0;URL=components/$repo/\">" >index.html

git config user.name $name
git config user.email $email

# send it all to github
git add -A .
git commit -am 'Deploy to GitHub Pages'
git push --force --quiet -u "https://${GH_TOKEN}@${GH_REF}" gh-pages > /dev/null 2>&1

popd >/dev/null

The gpages_build.sh script is a fork of gp.sh, found in Polymer tools, modified to work with Travis instead of a local environment.
Make sure it is executable.

That’s it!
Now a rebuild of the documentation pages will get triggered on every push.