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>.github.io/<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

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 travis-ci.com 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
node_js:
  - "stable"
cache:
  directories:
    - node_modules
script:
  - yarn build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $github_key
  local_dir: build
  on:
    branch: master