Deploy your project to GitHub page with TravisCI

You have an open source project on GitHub and want to deploy? then this is the article for you

In this article we will discuss:

  • How to deploy your project to GitHub page.
  • Using TravisCI to auto deploy every time you commit your code.

Deploy your project to GitHub page

go to your project on GitHub then click on Setting


At the bottom of the setting page, you will see this


Select master branch

In your project, install package called gh-pages

npm install gh-pages --save-dev

This package will help us create a branch on GitHub called "gh-pages", and deploy our build version of the project there.

Go to your package.json and add this

  "name": "<your project name",
  "version": "0.1.0",
  "homepage": "https://<your username><your repository name>/", <---- HERE
  "private": false,
"scripts": {
    "predeploy": "yarn run build", <--- and here (change yarn to npm if you use npm)
    "deploy": "gh-pages -d build" <--- and here

The predeploy script helps us build the project every time you run deploy Now, run

yarn deploy (or npm deploy)

And done, your app is deployed on GitHub page!!

Use TravisCI to automate deployment for your project

What is CI/CD ?

Continuous Integration(CI) & Continuous Delivery(CD)

In software engineering, continuous integration is the practice of merging all developers' working copies to a shared mainline several times a day - wikipedia

Which means that this practice enabled you to merge your code more frequently and usually being checked and deployed by automated system, this leads to less conflicts and problems will be detected earlier.


And CD is the extended version of CI, after being tested and verified, new code will be automatically deployed on to production server where client can see the updates.


TravisCI is a hosted CI service that allows you to build and test projects on GitHub. Open source projects are free of charges.

  • Go to and sign in with GitHub
  • Activate "Github Apps Integration" and select your project(s).
  • Add a file called .travis.yml into the root folder of your project (same place as package.json)
// .travis.yml
language: node_js
  - "stable"
    - node_modules
  - yarn build
  provider: pages
  skip_cleanup: true
  github_token: $github_key
  local_dir: build
    branch: master
  • Get your github_token here
  • After you have the token, set it as a variable at TravisCI by going to your repository > setting



All done, now commit your code, you should see something like this


Thanks for reading, see you in the next article.

Pepega Clap

Comments (1)

Sandeep Panda's photo

Hi there! Please tag it with "React" for visibility. :-)