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 I care about: development flow Run unit test when creating pull request, and leave comment 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 and , because they are simple. Travis.ci Github.page 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 ( )under Organization , and the destinate url is web vue-graphic https://vue-graphic.github.io/web . The URL rule of Github.page is: https://[organization].github.io/[repo] 1.2 Setup publish branch You can configure GitHub Branch to publish your site’s source files from , . In this example, the built static file will be pushed to branch . master gh-pages gh-pages branch is the development branch. Master Read more 2. Setup build script The build script, is going to generate static HTML, css and js into directory. ./dist 3. Travis-CI configuration 3.1 Setup travis.yml Travis-CI provides very good specially for deployment to Github.page, then do your best skill, copy and paste. documentation — : Directory to push to GitHub Pages local-dir — : Branch to push contents to, defaults to target-branch local-dir gh-pages 3.2 Setup Github personal access token Travis CI can deploy your static files to , and you will need to provide a and set the deployment provider details in . GitHub Pages personal access token .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. Remark Local deploy is a tool Pushing the contents of a directory to a remote branch. push-dir Read More on NPM // package.json "script:" {" ": "npm run build ; npx push-dir --dir=dist --branch=gh-pages --cleanup" local:deploy } Then run: $ npm run local:deploy Setup assetsPublicPath for webpack config For Vue-cli generated project, we need to setup as assetsPublicPath /repo. Setup in basename React-Router Setup basename into your it helps and to navigate to right . **_<Router basename/>_** , <Link /> history.push() url Read more Setup homepage in create-react-app Setup Homepage in , it helps to setup the configuration in . package.json npm run build Reference — 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/

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

Too Long; Didn't Read

Companies Mentioned

@peterchang_82818

RELATED STORIES