NodeJS with Github Pages and Travis CI

When trying to find instructions on how to publish into Github Pages, I found that is was not very clear when trying to publish a static site.  I thought it would be good to write a guide on how to publish a static site into Github Pages and hopefully eliminate any confusion in trying to do so.

Any feedback or comments would be appreciated.


  • Check your project into Github > master branch
  • Create a Github Token
    • Click on your profile > Settings > Personal Access Tokens


  • Create a .travis.yml file to build your project
  • Log into Travis CI and add the GITHUB_TOKEN environment variable.
    • Select the project repository > More Options > Settings


  • Ensure your project repository is enabled


  • Trigger a build if it does not automatically happen when you enable the project repository
    • You will now have a gh-pages branch created and pushed to Github
    • You will now have the static site publish to Github Pages


Let me break it down…

In short all the hard work is done in Travis CI, meaning…

language: node_js
- npm install
- npm install codecov -g
- npm run test
- npm run styleguide:build
- codecov
provider: pages
skip-cleanup: true
github-token: $GITHUB_TOKEN # Set in dashboard, marked secure
keep-history: true
local-dir: styleguide

language: Tells Travis CI that the project is a node project and will make available node and npm

install: will run a list of any install commands required before script execution, in our case installing npm dependencies

script: will run a list of commands to build our project, in this particular example I am running npm run styleguide:build which will build a static site.

after_success: will run a list of commands after your build has succeeded

deploy: this step is what actually pushes the static site into Github Pages after every build

  • specifying the provider as pages lets Travis CI know your deploying to Github Pages
  • skip-cleanup ensures that after the build the folder you are trying to deploy is not deleted before you can deploy it
  • github-token ensure you deployer task as enough privilege to push to Github Pages
  • keep-history ensure that a force push is not performed
  • local-dir is the directory you are pushing to Github Pages, in our case it is the static site that got created from our script command npm run styleguide:build earlier


  • Easy, quick and simple to setup with none to minimal maintence
  • Code and documentation in one repository
  • Automated deployment of your static site every time you push your code to Github
  • Free hosting of your static site

Reference materials

Travis CI to Github Pages deployment documentation
Github Pages documentation


One thought on “NodeJS with Github Pages and Travis CI

  1. Pingback: React Component Library | Its a blog's world

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s