Deploy to GH-Pages with Travis-CI

11 February 2017 Contribute to this post

This setup will deploy content from a dist/ folder to GH-Pages via Travis-CI.

Repository

Create or use one of your existing repositories on GitHub. Clone it, and create a master branch if you don’t already have one. Use this branch for the rest of the setup.

Initialize your project

In the root of your project, initialize with npm init -f to create a default package.json file if you don’t already have one. Edit it, add the build script seen below to generate dummy output into a dist folder:

Deploy script

Create a file called deploy-to-gh-pages.sh containing this (replace user.name and user.email values):

Travis setup script

Create a file called .travis.yml containing this:

GitHub access token

Generate a new access token from GitHub. Give it a description, and the following permissions found here. Don’t close the window after you’ve created your token, you’ll need the token later in this setup.

Install Travis command line client

Install Travis Command Line Client with gem install travis.

Encrypt token

With the terminal, go into your project and execute the following (replace the text marked with bold):

travis encrypt -r YOUR-GITHUB-USERNAME/YOUR-GITHUB-REPOSITORY-NAME GITHUB_TOKEN=YOUR-GITHUB-TOKEN-HERE --add

This will add the encrypted token to your .travis.yml file.

Travis-CI

Add your GitHub repository in your Travis CI repository overview.

GitHub repository settings

Go to your GitHub repository, under settings go to Integration & Services. Click the Add service dropdown and find Travis CI.

  1. Under User, type your GitHub username.
  2. Under Token, add your GitHub token.
  3. Under Domain, type notify.travis-ci.org

Add dist/ folder

Create a folder in the root of your project called dist. Inside it, add a file called index.html containing some basic HTML. This is only for testing purpose, later you can add Gulp, Webpack or similar to generate your distribution content for this folder. Right now it’s the build script from package.js that generates content in the dist folder.

Create branch

In your GitHub repository, create a branch called gh-pages.

Push your changes to GitHub

Now commit and push your changes to the master branch to GitHub. Travis-CI will detect this, and start deploying the content of the dist folder to GH-Pages. After deployment your page is available at:

http://YOUR-GITHUB-USERNAME.github.io/YOUR-GITHUB-REPOSITORY-NAME