Vue deploy the project to GitHub Pages and sync to Gitee Pages

Preface : I believe that many front-end developers have their own vue project, if you want to make your project site to share for everyone to see, the most common is the use of Gitee Pages service Github GitHub Pages service provided and Gitee provided. Which, Github is a foreign site, Gitee domestic sites (faster access). This article is to tell you how to deploy vue-cli 3.0+ project to github pages and synchronized to gitee Pages.

First, the service description and Notes

GitHub Pages item in your github project settings, it reads:

Pages and the GitHub IS the Designed to Host your Personal, Organization, or from A GitHub Pages and the Project Repository.
Translation: GitHub Pages designed to host your GitHub repository from an individual, organization or project page.

This sentence is to introduce GitHub Pages purpose, Github Pages and the official website there are some other, due to are in English, we looked hard, it is better to see direct instructions Gitee Pages service, the two are similar.

Note we do not look violation on the line, the focus here is to tell you that the contents of the red box turns out, Pages service only supports static project, if your project requires server support, it is not suitable for deployment to the above.

Second, the project configuration Notes

1, vue-router mode Do not turn history

Normal project we will because the site path with a "#" and will open history vue-router mode to remove the # sign. But history turned on the need to support server mode, and therefore does not support this mode in github pages in, so we can not turn history mode.

2, is provided in the correct publicPath in vue.config.js

To deploy the project to https: // <USERNAME> .github.io / <REPO> / on (ie warehouse address https://github.com/ <USERNAME> / <REPO> ), can be set to publicPath " / <REPO> / ".
For example, my warehouse named "vue-admin-web", then vue.config.js content should look like this:

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vue-admin-web/'
    : '/'
}

Third, the deployment github project

After doing the above configuration, it is possible to push the project on github, assuming you've built a warehouse, and pushed to the success of the project at this warehouse. Next, we have two ways to deploy your project on github pages. [Reference vue-cli official description]
Method One: Manually push updates
1, under the project directory, create the document reads as follows deploy.sh

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages

cd -

2, run the file
open in the project directory cmd command window (shortcut: In the project directory, hold down the Shift key, then right-click and select "Open command window here")

// Linux环境下
bash deploy.sh
// Windows环境下
deploy.sh

After the operation, git will execute the command file. That is, roughly, to build packaged item code, then the code is packaged upload gh-pages branch warehouse. (Note: the new warehouse default only the master branch, no branch gh-pages, but you do not need to manually create the branch, run the file, it will automatically help you generate gh-pages branch)
so that your project has been deployed to github pages up. Settings in your github project - GitHub Pages item under Options, you can see your project online website address.
Example: https://marco-hui.github.io/vue-admin-web/

two: Travis CI automatically update
the above method to manually update has been able to complete the project's deployment, but each version of the iteration, you need to manual to perform at deploy.sh this document, though not very troublesome, but we excellence, they want more simply, is that when you push the code to the master branch, you're ready to complete the building and automatically upload gh-pages branch that automate deployment. Travis CI can use to do this:

1, has generated a "repo" permission GitHub access token .
Github get a token method according to the official website to operate on the line, very simple, not much to do here introduced.

2, Travis privileges granted access to the repository
with your github account, log in Travis CI 's official website, after registration is completed, click the New button left of the page, enter your warehouse page.

In this page will display all the items on your github, open the project you want to deploy a switch, click on Settings.

In the settings page, we need to define several environment variables, as shown in FIG.

Once defined, go to Step 3.

3. Create a content item in the root directory of the following .travis.yml file.

language: node_js
node_js:
  - "8"

install:
  - npm install

script:
  - npm run build

after_success:
  - cd ./dist
  - git init
  - git config --global user.name "${U_NAME}"
  - git config --global user.email "${U_EMAIL}"
  - git add .
  - git commit -m "Automatically update from travis-ci"
  - git push --quiet --force  "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}

branches:
  only:
    - master

4, the .travis.yml push files to the warehouse to trigger the first automated build.
After .travis.yml uploaded to the master branch warehouse will automatically build a deployment, after all git push to master the operation will trigger an automatic update. In this way, your github pages site content will be updated with the latest real-time friends.

So far, we have completed the Vue project to GitHub Pages to automatically deploy it! But github, after all foreign Web sites, and sometimes visit them particularly slow, so we will consider the project to deploy domestic websites gitee above. With the foundation github project, deployed to Gitee Pages becomes particularly simple matter, just on gitee synchronization github project can be.

Fourth, synchronized to Gitee Pages

1、导入github项目
登录Gitee官网，在右上角 “+” 中选择“从GitHub导入仓库”，当然前提是你已经绑定了github账号作为你的gitee第三方账号，未绑定的在 设置 - 第三方账号绑定 即可。

进入到导入Github仓库页，选择你要导入的项目。

导入成功后，你会发现，除了master的代码被导过来，所有分支和标签也被同步过来了。

2、开启Gitee Pages服务
项目导入成功后，接下来我们需要开启该项目的Gitee Pages服务。点击项目上方的 服务-Gitee Pages，进入Gitee Pages 服务配置页。

部署分支选择 gh-pages，部署目录不填，勾选强制使用HTTPS，点击启动，随后会进行部署。

部署成功后，会在当前页面看到你的Gitee Pages网站地址，打开地址即可看到你的项目网站，和GitHub Pages的一模一样，而且Gitee Pages网站加载会快很多。
示例：https://marco-hui.gitee.io/vue-admin-web

3、项目更新
往后项目的更新，首先还是先将代码push到github上面，待GitHub Pages部署成功后，再在gitee的项目中，点击更新按钮，将github项目的代码强制同步到gitee中即可。

以上，我们就完成了将Vue 项目部署到GitHub Pages，且实现自动部署，并同步到Gitee Pages上。

Attachment:
Project github Address: Marco-Hui / VUE-ADMIN-Web
project GitHub Pages Web site address: https://marco-hui.github.io/vue-admin-web
project Gitee Pages Web site address: HTTPS: // marco- hui.gitee.io/vue-admin-web