At present, there are lots of GitHub repositories maintains web app projects. A practice is saving the source files (Sass, ES2015) on master branch, and deploying the compiled files (CSS, ES5) on gh-pages branch. GitHub will treat gh-pages branch as a static web site and give it a public URL for visitors. It will make the repository visitor view the project conveniently.

In this article I will introduce how to make the deploying automatically: when the master branch is updated, the gh-pages branch will be updated from the compiled result of new master branch. I implemented this feature with Travis CI, a Continuous integration tool. Steps are as follows.

Generate a new personal access token for pushing the compiled code into your GitHub repository. Only the public-repo scope is required and need to checked, copy the generated token to clipboard.

Open your profile page in Travis CI. If you are new to Travis CI, an account connection to GitHub operation may needed. Turn on , and click the gear icon of the target repository, go into the repository setting page. Add an environment variable, name is GITHUB_TOKEN, value is the token generated in GitHub. Make sure the "Display value in build log" is unchecked. In addition, turn off the "Build pull requests" option.

Give your web project a build script, it usually be like npm run build. Set the npm script in the package.json of your project: add "build": "gulp dist" or something you will run for building to the "script" field of package.json. Using npm script but not the build command directly will make no dependencies to global npm packages but only the local ones.

Add a .travis.yml in the root of the repository, content as follows:

language: node_js
node_js: node # Use nvm to install the latest version of node. Travis CI will use node 0.10 of Ubuntu repository when no nvm installation is add
branches:
  only: master # Only build master branch
script: npm run build # Write your custom npm script here
after_script:
  - cd dist # Use your own distribution directory
  - git init
  - git config user.name "Travis CI Deploy" # Custom the name of your deploy robot here...
  - git config user.email "robot@example.com" # ...and the E-mail address.
  - git add .
  - git commit -m 'Build' # Is customize commit message needed?
  - git push --force --quiet "https://${GITHUB_TOKEN}@github.com/[USER]/[REPO].git" master:gh-pages # Forcely push (overwrite) the distribute code to the gh-pages branch. Replace [USER] to your username & [REPO] to target repository name. --quite prevents the remote address (include GitHub token) output to the build log.

Commit these modification, push to GitHub. In your repository page of Travis CI, you can see the build is processing. When the processing is finished successfully, you can see the gh-pages branch is updated, and the public URL is in the repository setting page.

A completed travis build file is at https://github.com/SyaOS/sya.org.cn/blob/master/.travis.yml