/ci-demo

GitHub continuous integration (Travis) and automated deployment (Pages) demo

Primary LanguageCSS

Travis-CI to GitHub Pages Demo

This demo was created to demonstrate a sample workflow for continuous integration and automated deployment from Travis-CI to GitHub Pages.

Demo Flow

Create a broken branch
  1. Open the GitHub Pages url
  2. Create a new branch
  3. Remove the text from one of the entries in content.json
  4. Commit changes with a descriptive message
  5. Create a pull request with a descriptive message
  6. Wait for Travis-CI to complete (there should be an error)
Fix the branch and merge
  1. Go back to the content.json file and add text to the blank entry
  2. Commit changes with a descriptive message
  3. Go back to the open pull request and wait for Travis to complete (it should be green)
  4. Optional - Refresh/goto the GitHub Pages url to confirm no changes were made
  5. Merge the pull request
  6. Refresh/goto the GitHub Pages and confirm the changes are reflected

Demo Page

After a successful deployment, you can view the results on GitHub Pages for this repository.

Tests

The tests are written in mocha and check for blank entries in the content.json.

Automation Steps

All steps happen on the Travis-CI container and can be monitored by going to the Travis dashboard.

  1. Sets global variables
  2. Updates git config
  3. Builds packages with npm install
  4. Clones GitHub Pages branch gh-pages into dist folder
  5. Cleans and rebuilds dist folder by running npm run build
  6. Runs tests by calling npm test
  7. Commits changes
  8. If request is not a pull request and is the master branch, Travis will push the dist folder to gh-pages in GitHub.

Travis Settings

All Travis-CI settings are stored in the .travis.yml file. There are four environment variables that you may want to adjust if you decide to fork this repo.

Variable Description
GIT_NAME The display name to use when Travis commits to Git
GIT_EMAIL The email address to use when Travis commits to Git
GIT_DOMAIN The domain address of the GitHub or GitHub Enterprise server
GH_TOKEN The encrypted GitHub personal access token used to deploy

Running Locally

The local server runs on Webpack Dev Server.

Setup

$ npm install

Tests

$ npm test

Build

$ npm run build

WebServer

$ npm start

URLs