vuepress自动化部署github

最近打算把一些项目中常用的函数方法统一封装一下，同时发布到npm，以便于项目中使用。vuepress使用上相对简单，就不做过多的演示了，这里主要讲解一下如何自动化部署到github,生成预览地址。

生成TOKEN

• 登录github，点击右侧头像,点击Settings
• 左侧菜单下找到 Developer settings，点击进入
• 在 Personal access tokens 分类下找到 Tokens (classic)，点击进入
• 点击 Generate new token 按钮，点击 Generate new token (classic)
• 设置 token名称为 ACCESS_TOKEN，把生成的token复制一下

设置TOKEN

• 进该项目的仓库中，点击settings
• 点击左侧 Secrets
• 点击右侧按钮 new repository secret
• 创建的名字和 .yml 中的 secret.xxx 要对应，值就写刚刚生成的 Github 密钥

创建配置文件

• 在根目录下创建配置文件

.github/workflows/jekyll-gh-pages.yml

• 添加配置

# action 的名称
name: Deploy GitHub Pages

# 触发条件：在 push 到 master 分支后
on:
  push:
    branches:
      - master

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 生成静态文件
      - name: Build
        run: npm install && npm run docs:build

      # 部署到 GitHub Pages
      - name: Deploy
        # 使用别人写好的一个 action
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          # 这里的 ACCESS_TOKEN 名字需要和下文中的相对应
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 打包后的文件部署到哪个分支上
          BRANCH: gh-pages
          # 打包后的文件在哪里
          FOLDER: docs/.vuepress/dist

设置GitHub Pages

• 进该项目的仓库中，点击settings
• 点击项目左侧的Pages
• 找到Build and deployment这一项，Source选择Deploy from a branch
• Branch选择gh-pages /(root)然后保存即可

结尾

到这里就已经配置结束了，只要master分支有变化，就会自动化执行一次，生成新的文档。