# 部署流程

一般情况:

  1. 写一篇 Markdown
  2. 本地运行查看效果
  3. deploy.sh 生成 dist 文件夹并推送到 GitHub
  4. 删除本地 dist 缓存文件

使用 GitHub Actions:

  1. 写一篇 Markdown
  2. 本地运行查看效果
  3. 提交 Markdown 文件至 GitHub 仓库自动部署

# GitHub Actions

GitHub Actions 是 GitHub 的持续集成服务,于 2018 年 10 月推出。

相当于可以将本地的执行脚本操作在 GitHub 提供的 ubuntu 上运行。

官方文档:docs.github.com/cn/actions (opens new window)

更多 Actions:

# 配置 Action

GitHubAction:vuepress-deploy (opens new window)

中文文档:README.zh-CN.md (opens new window)

主要有两种部署情况:

  • 在 xxx.github.io 仓库中使用两个分支,分别存储源码文件 ( gh-pages 分支) 和部署文件 ( master 分支)
  • 使用两个仓库,分别存储源码文件和部署文件(不用切换分支,默认 master)

我之前一直用的模式二,感觉有点复杂,就换成模式一了,所以下面主要讲一下模式一具体步骤:

# 使用 Git 创建新分支:gh-pages (opens new window)

# 查看本地分支 前面带有*号的是当前分支
git branch
# 新建gh-pages分支
git branch gh-pages
# 切换到分支
git checkout gh-pages
1
2
3
4
5
6
7
8

# 在 blog 目录下创建 yml 文件:.github/workflows/vuepress-deploy.yml

blog
└── .github
    └── workflows
        └── vuepress-deploy.yml
1
2
3
4

# 配置文件:这是一个 Demo (opens new window)

name: github action
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master
    - name: Build and Deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        TARGET_REPO: xoxovo/xoxovo.github.io
        TARGET_BRANCH: master
        BUILD_SCRIPT: npm install && npm run docs:build
        BUILD_DIR: docs/.vuepress/dist/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • ACCESS_TOKEN:具体步骤看这里 (opens new window)
  • TARGET_REPO:输出仓库。默认当前仓库
  • TARGET_BRANCH:目标仓库的分支。默认 gh-pages
  • BUILD_SCRIPT:构建脚本 例: yarn && yarn docs:build 或者 npm install && npm run docs:build
  • BUILD_DIR:构建产物的目录 例: docs/.vuepress/dist/

# 把源码文件推送到 gh-pages 分支

# 添加源码文件
git add docs package.json .github
# 检查git状态
git status
# 添加推送信息
git commit -m 'deploy'
# 推送 注意git地址和分支
git push -f git@github.com:xoxovo/xoxovo.github.io.git gh-pages
1
2
3
4
5
6
7
8
9
10
11

Push 成功后看看 Action 是否执行成功,一般跟着步骤来应该没有问题,有问题的话看看报错信息再仔细排查排查!