background

As a qualified front-end programmer who has worked hard to write a static page, the manager or someone wants to see the effect of your page (or a demo), we usually start the project directly on our own computer, and then share it as a LOCAL area network address. The downsides to this approach are obvious – it doesn’t work if you’re not on a LOCAL network, and most importantly, there’s no chance for you to fake it (I can deploy urls that allow you to access my page from anywhere), haha

Of course, this is just one of the scenarios where we want to start our own small website (which probably doesn’t require a server or a bit of background support) or blog, and then we can deploy our front-end projects on GitHub for free… This is what github Pages offers…

Basic Project Configuration

Vue 2.6+ and Vue Cli3.0 + do a front-end project, vue.config.js configuration is as follows:

Const prodDir = 'data-view'; const prodSetting = process.env.NODE_ENV === 'production' ? { publicPath: `/${prodDir}`, outputDir: `${prodDir}`, } : {}; module.exports = { // transpileDependencies: ['vue-echarts', 'resize-detector'], css: { loaderOptions: { less: { modifyVars: { 'font-size-sm': '13px', 'font-size-md': '15px', 'font-size-lg': '17px', 'goods-action-button-danger-color': '#7232dd', 'goods-action-button-warning-color': '#3eaf7c', 'background-color': '#0D1B49', red: '#00BFFF', 'text-color': '#949FD5', 'dropdown-menu-height': '38px', 'dropdown-menu-background-color': 'transparent', 'dropdown-menu-box-shadow': 'none', 'dropdown-menu-title-active-text-color': '#00BFFF', 'dropdown-menu-option-active-color': '#00BFFF', 'cell-background-color': '#0D1B49', 'cell-vertical-padding': '8px', 'dropdown-menu-title-font-size': '14px', 'grid-item-content-background-color': '#1C2A5A', }, }, }, }, productionSourceMap: false, ... prodSetting, };Copy the code

Upload projects to Github

Create a new repository on Github, such as data-view:

Uploading a project to the repository is a regular Git operation that needs no further explanation. The default is the master branch.

Configure automated deployment scripts

Create the deploy.sh file in the root directory of the project. The configuration file contains the following content:

# deploy. Sh # stop if an error occurs set -e # 1, package yarn build # 2, go to the target folder, which is the same as the output folder of the project. Git add -a git commit -m 'deploy' # 4. Push all the packaged files to the GH-Pages branch of The Github remote repository data-View. It doesn't matter if the remote repository doesn't have this branch. Git push -f [email protected]:phonet/data-view.git master:gh-pages CD -Copy the code

Execute the script

Bash depoly.sh: bash depoly.sh: bash depoly.sh: bash depoly.sh: bash depoly.sh: bash depoly.shCopy the code

Successful screenshot:

To view the deployment URL:

In the Github project view, go to Setting:Then find GitGub Pages as shown below:Access:phonet.github.io/data-view/See that the deployment is successful.

conclusion

These are called Github Pages, and you can deploy pages with interfaces in addition to static pages, but I won’t go into that here. Specific applicable to what scene, you can slowly go to experience. Anyway, I think the main thing is I want to deploy some pages for fun…

The above project is the deployment of the VUE project, the same as the React project. Next, if you feel that the speed of accessing Github is too slow, you can synchronize the things on Github to the domestic Gitee. For details, see blog.csdn.net/Marco_hui/a…