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

setting.PNG

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

masterbranch.png

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.

adasdsad.png

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
  • Get your github_token here
  • After you have the token, set it as a variable at TravisCI by going to your repository > setting

a2v32v32.png

v2vv2v.png

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

12313b13.PNG

Thanks for reading, see you in the next article.

Pepega Clap

Comments (1)

Add a comment
Sandeep Panda's photo

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