Free CICD, and Integration With Web Hosting, Github.page, Travis-ci

Outside of work, I enjoy working on side projects that allow me to experiment with new technology and create something enjoyable. The quality of side projects is more relaxed; there is no need for a security check before merging to master, and no need for two reviewers to grant approval. Can be integrated as long as it looks OKF

Wait a minute, we don't want the new code to ruin the project when we show it off to others. So there are two stages in the development cycle that I am concerned with:

1. When making a pull request, run a unit test and give a remark.
2. When a new commit is made on Master, deploy the most recent version.

I've experimented with different providers such as Heroku, CircleCI, Firebase, and AWS.

They all offer free products, but because they are basic, the brainless me ends up on Travis.ci and Github.page.

This example is limited to static web pages, with just static html, js, and css files, and is not capable of server-side rendering web applications.

1.github.com setup

1.1 Set up a Github repository.

This is an example Repository (web) under the Organization vue-graphic, with the destination url https://vue-graphic.github.io/web.
Github.page's URL format is as follows: https://[organization].github.io/[repo].

1.2 Create a publish branch

GitHub Branch may be configured to publish your site's source files from master, gh-pages. In this case, the generated static file will be pushed to the gh-pages branch.
The development branch is the master branch.

2. Configure the build script

The build script will create static HTML, CSS, and JS files in the./dist directory.

3. Configuration of Travis-CI

3.1 Create the travis.yml file.

Travis-CI has excellent documentation, particularly for deployment to Github.page, then do your best, copy and paste.
— local-dir: The directory to which you want to submit your changes to GitHub Pages.
— target-branch: Branch to which local-dir contents should be pushed; defaults to gh-pages.

3.2 Setup Github personal access token

Travis CI may publish static files to GitHub Pages, but you must give a personal access token and configure the deployment provider settings in.travis.yml.

3.3 Make the Github Access token a variable in the Build Environment.

Copy and paste the Github personal access token into the Travis-ci environment variables area. It is used for Github deployment in 3.3.

Remark

Push-dir is a tool for local deployment.

The contents of a directory are being pushed to a remote branch.

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

Then run:

$ npm run local:deploy

Configure assetsPublicPath for webpack configuration.

We must specify assetsPublicPath to /repo in the Vue-cli created project.

Configure the basename in React-Router.

Setup basename in your router's basename/>, it helps with Link /> and history.

To browse to the correct url, use push().

Configure the homepage in create-react-app.

Create a homepage in package.json to aid in the setting of npm run build.