How to use Travis CI environment variables + .sh script for auto deployment to Github Pages? How to use Travis CI environment variables + .sh script for auto deployment to Github Pages? shell shell

How to use Travis CI environment variables + .sh script for auto deployment to Github Pages?


I'm trying to simplify my Github + Travis CI workflow w/ 2 environment variables GH_TOKEN + GH_REF stored in .travis.yml ... used by

git clone "https://${GH_TOKEN}@${GH_REF}" --single-branch

Your script can use the TRAVIS_REPO_SLUG environment variable referenced in the documentation


I managed to do EVERYTHING I wanted to.


My Goals

  • Automating GH_REF value in gpages_build.sh script w/ the TRAVIS_REPO_SLUG (thanks for the tip @osowskit !)
  • Writing git update-index --chmod=+x gpages_build.sh once and storing it into it's own repo...when needing it, just bower install it!

✔ The Process

Here's my exact approach I took for creating and testing <custom-elements> w/ Travis CI and auto deploying to Github Pages after a successful build.


gpages_build.sh (script):

  1. In order to move away from having to make my script executable inside every project w/ the git update-index --chmod=+x gpages_build.sh command, I needed to centralize this process inside one handy Github repo (oneezy/build-tools). The benefits of this are:
    • Only having to make the script executable once
    • Being able to update the script as needed in one place (not every repo)
    • Ensuring that when others clone the project, they'll always have the executable file
  2. In order to make the GH_REF variable automatic and not have to write it out each time, Travis CI gives us the TRAVIS_REPO_SLUG variable, which is basically username/repo for whatever Github Repository you're working in. You write it out like this: GH_REF="github.com/${TRAVIS_REPO_SLUG}"

```

# 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 nameGH_REF="github.com/${TRAVIS_REPO_SLUG}"org=`echo ${TRAVIS_REPO_SLUG} | cut -f 1 -d /`repo=`echo ${TRAVIS_REPO_SLUG} | cut -f 2 -d /`name="Travis CI"email="builds@oneezy.com"branch=${3:-"master"} # default to master when branch isn't specifiedmkdir temp && cd temp# make folder (same as input, no checking!)mkdir $repogit clone "https://${GH_TOKEN}@${GH_REF}" --single-branch# switch to gh-pages branchpushd $repo >/dev/nullgit checkout --orphan gh-pages# remove all contentgit rm -rf -q .# use bower to install runtime deploymentbower cache clean $repo # ensure we're getting the latest from the desired branch.git show ${branch}:bower.json > bower.jsonecho "{  \"directory\": \"components\"}" > .bowerrcbower installbower install $org/$repo#$branchgit checkout ${branch} -- demorm -rf components/$repo/demomv demo components/$repo/# redirect by default to the component folderecho "<META http-equiv="refresh" content=\"0;URL=components/$repo/\">" >index.htmlgit config user.name $namegit config user.email $email# send it all to githubgit add -A .git commit -am 'Deploy to GitHub Pages'git push --force --quiet -u "https://${GH_TOKEN}@${GH_REF}" gh-pages > /dev/null 2>&1popd >/dev/null

```

Travis.yml Configuration:

  1. One GOTCHA that was throwing me off here was the GH_TOKEN variable, which is the Personal Access Token you need from Github for read/write ability to your repositories. Due to the power this token has, I needed to encrypt it w/ the Travis CLI (Travis Command Line Tool). travis encrypt GH_TOKEN=********* --add, which will automatically add the encrypted variable to your .travis.yml file. I was under the impression that I could use the same encrypted GH_TOKEN for every repo, but I found out the hard way that's not the case. When you encrypt anything w/ Travis, it appears that you're essentially tieing that encryption to the repository you're in, E.G.: you must travis encrypt GH_TOKEN=********* --add inside every repository. One possible workaround would be to configure an alias/ command inside a config file w/ this information stored inside, but I haven't yet explored the theory.

  2. The next thing to do is bower install -s gpages_build.sh script and run it from .travis.yml w/ ./bower_components/build-tools/gpages_build.sh. This will automatically pull the script from our build-tools repo and run it.

```

language: node_jsnode_js: stablesudo: requireddist: trustyaddons:  firefox: latest  apt:    sources:    - google-chrome    packages:    - google-chrome-stablecache:  directories:  - node_modules  - "$HOME/.cache/bower"install:- npm install -g bower polymer-cli- npm install- bower installscript:- xvfb-run polymer testafter_success:- if [ ${TRAVIS_PULL_REQUEST} = "false" ] && [ "$TRAVIS_BRANCH" = "master" ]; then  bower install -s oneezy/build-tools && ./bower_components/build-tools/gpages_build.sh;  fi# DO EVERY TIME: # travis encrypt GH_TOKEN=**************** --add  # env:#   global:#     secure: ZwNuFN1cryC5dff4c3a1qePkoRZoug+HDiN55dFATTt7Opk20C8SgO+RGEWqYWelFkUN2jhAyoJ91GFMxOyYqbqZP+mQfBaFWgBZoKIcGcDur5in4z6ZaWfw65X03K0HIaaKaunpO4C1d/d++zMhqvudhaJ4JgXJXts5cUdmXGxCIEhKE+mH5d76VK4fbpyrtpewllqHeaiIE88oFZ0L8xQP8K7SUXukvVmE1Re0Kl0UjXjsdSUftcj+gnOcBxqGjVlSjQ9Bk0zmP+2nHYo8Gx=

```

And voila!