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:
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.
The URL rule of Github.page is:
You can configure GitHub Branch to publish your site’s source files from
gh-pages. In this example, the built static file will be pushed to branch
Master branch is the development branch.
The build script, is going to generate static HTML, css and js into
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
Paste the Github personal access token into Travis-ci, section of environment variables. It is used in 3.3 for Github deployment.
push-dir is a tool Pushing the contents of a directory to a remote branch.
"local:deploy": "npm run build ; npx push-dir --dir=dist --branch=gh-pages --cleanup"
$ npm run local:deploy
For Vue-cli generated project, we need to setup assetsPublicPath as
Setup basename into your
<Router basename/>, it helps
<Link /> and
history.push() to navigate to right url.
Setup Homepage in
package.json, it helps to setup the configuration in
npm run build.