$0, Free CICD and Web hosting integration. Travis-ci + Github.pageโ€‚by@peterchang_82818

$0, Free CICD and Web hosting integration. Travis-ci + Github.page

No budget doesnโ€™t mean no CI/CD, setup CI-CD just within few click and costย $0.

Outside of work, I like doing side projects to try out new tech and build something fun. The quality of side projects is more relax, not even require a secure check up before it merge to master, no need 2 reviewers to give ๐Ÿ‘ to approve. As long as it look cool, can be merged.

Hold on, we all donโ€™t want the new code to break the project when we showing off to people. So there are 2 points in development flow I care about:

  1. Run unit test when creating pull request, and leave comment
  2. Deploy a newest version when new commit is created on Master

I have tried out other services, like Heroku, circleCI, firebase, and AWS. They all have free product, but the brainless me end up on Travis.ci and Github.page, because they are simple.

This example is restricted to static web page, only contained static html, js and css file, not capable for server side render web application.

1.Github preparation

1.1 Create a Github repository

This is a sample Repository (web)under Organization vue-graphic, and the destinate url is https://vue-graphic.github.io/web.

The URL rule of Github.page is:


1.2 Setup publishย branch

You can configure GitHub Branch to publish your siteโ€™s source files from master, gh-pages. In this example, the built static file will be pushed to branch gh-pages.

Master branch is the development branch.

Read more

2. Setup buildย script

The build script, is going to generate static HTML, css and js intoย ./dist directory.

3. Travis-CI configuration

3.1 Setup travis.yml

Travis-CI provides very good documentation specially for deployment to Github.page, then do your best skill, copy and paste.

โ€” local-dir: Directory to push to GitHub Pages

โ€” target-branch: Branch to push local-dir contents to, defaults to gh-pages

3.2 Setup Github personal accessย token

Travis CI can deploy your static files to GitHub Pagesย , and you will need to provide a personal access token and set the deployment provider details inย .travis.yml.

Read more

3.3 Set Github Access token as Build Environment variable

Paste the Github personal access token into Travis-ci, section of environment variables. It is used in 3.3 for Github deployment.


Local deploy

push-dir is a tool Pushing the contents of a directory to a remote branch.

Read More on NPM

// package.json
"script:" {
"local:deploy": "npm run build ; npx push-dir --dir=dist --branch=gh-pages --cleanup"

Then run:

$ npm run local:deploy

Setup assetsPublicPath for webpackย config

For Vue-cli generated project, we need to setup assetsPublicPath as /repo.

Setup basename in React-Router

Setup basename into your <Router basename/>, it helps <Link /> and history.push() to navigate to right url.

Read more

Setup homepage in create-react-app

Setup Homepage in package.json, it helps to setup the configuration in npm run build.


โ€” https://www.npmjs.com/package/push-dir

โ€” https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/

โ€” https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/

โ€” https://docs.travis-ci.com/user/deployment/pages/