vuepress部署

# 部署基础

核心指令是: vuepress build docs
输出的位置是 docs.vuepress\dist

# 部署到GitHub Pages

原理: 除了特定支持的项目类型[Hexo、Nuxt]，不管什么部署到pages都是静态的html格式。
所以用一个分支保存dist编译后的静态。master 保存源码。

# base根目录设置

如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），
则将在docs/.vuepress/config.js中的base设置为 /<REPO>/。

# deploy.sh

见官网的脚本 (opens new window) 不合适因为需要第三方的ci/cd工具集成。他是最基本的实现。

	#!/usr/bin/env sh
	
	# 确保脚本抛出遇到的错误
	set -e
	
	# 生成静态文件
	npm run docs:build
	
	# 进入生成的文件夹
	cd docs/.vuepress/dist
	
	# 如果是发布到自定义域名
	# echo 'www.example.com' > CNAME
	
	git init
	git add -A
	git commit -m 'deploy'
	
	# 如果发布到 https://<USERNAME>.github.io
	# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
	
	# 如果发布到 https://<USERNAME>.github.io/<REPO>
	# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
	
	cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Github Actions

name: CI

#on: [push]

# 在master分支发生push事件时触发。
on:
  push:
    branches:
      - master

env: # 设置环境变量
  TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用该时区时间）

jobs:
  build: # 自定义名称
    runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout # 步骤1
        uses: actions/checkout@v1 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用：安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本
      - name: Build-and-deploy # 步骤3
        run: |
          remote_addr=`git remote get-url --push origin`
          commit_info=`git describe --all --always --long`
          user_name=`git log -1 --pretty=format:'%an'`
          user_email=`git log -1 --pretty=format:'%ae'`
          deploy_branch=gh-pages
          yarn
          yarn build
          cd docs/.vuepress/dist
          git config --global init.defaultBranch $deploy_branch
          git init
          git config user.name ${user_name}
          git config user.email ${user_email}
          git add -A
          git commit -m "auto deploy, $commit_info"
          remote_addr=`echo $remote_addr | awk -F'://' '{print $2}'`
          remote_addr=https://${user_name}:${{secrets.GITHUB_TOKEN}}@${remote_addr}
          git remote add origin ${remote_addr}
          git push origin HEAD:$deploy_branch --force # 推送到github $deploy_branch分支
      # 只提交到github pages也可以使用github-pages-deploy-action，详见: https://github.com/JamesIves/github-pages-deploy-action

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

这个ci.yaml可以直接用。每次提交过几分钟编译成功后就会在另一个分支提交拉。

这个改版了vuepress官网的github action部署。
${{secrets.GITHUB_TOKEN}}  
// 这就是默认的github的token啦。 
// 不需要额外设置。这是最新版本github自带的token。 不需要设置了。 见下面的文档：
// https://docs.github.com/en/actions/security-guides/automatic-token-authentication

1
2
3
4
5
6