全部 / 前端 / 工具 / 技术 · 2021年9月7日 0

VuePress和GitHub Action 使用方法

VuePress

Vuepress: A static page generator based on Vue.js – HelpDev

VuePress 是一个 Vue 生态的 SSG ,为 Vue 及其子项目文档而生,主要以内容为主。虽 Nuxt 可以完成 VuePress 的功能,但是它的目的是为应用而生。更多请看官方文档:https://vuepress.vuejs.org/guide

GitHub Action

GitHub Actions for beginners, CI/CD - How - Why - What | Better Programming

Automate, customize, and execute your software development workflows right in your repository with GitHub Actions. You can discover, create, and share actions to perform any job you’d like, including CI/CD, and combine actions in a completely customized workflow.

https://docs.github.com/en/actions

官方翻译:

在 GitHub Actions 的仓库中自动化、自定义和执行软件开发工作流程。 您可以发现、创建和共享操作以执行您喜欢的任何作业(包括 CI/CD),并将操作合并到完全自定义的工作流程中。

个人理解就是自动化一些任务,快速尝试一下:https://docs.github.com/en/actions/quickstart

GitHub Action 是要依赖一个 .yml workflow 的配置文件来运行的,看下我的配置文件:

# name 可以自定义
name: Deploy GitHub Pages

# 触发条件:在 push 到 main/master 分支后,新的 Github 项目 应该都是 main,而之前的项目一般都是 master
on:
  push:
    branches:
      - main

# 任务
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
        uses: JamesIves/github-pages-deploy-action@4.1.5
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 也就是我们刚才生成的 secret
          BRANCH: gh-pages # 部署到 gh-pages 分支,因为 main 分支存放的一般是源码,而 gh-pages 分支则用来存放生成的静态文件
          FOLDER: docs/.vuepress/dist # vuepress 生成的静态文件存放的地方

可以看出一个 workflow 由 name、on 、jobs 等组成

name 就是给 workflow 取一个名字,on 就是监听某个事件然后做后面的 jobs,jobs 里面是分 steps 的就是一步步的做任务。

GitHub Action 的市场也有一个 VuePress 的 Action 可以参考下:https://github.com/marketplace/actions/deploy-to-github-pages

注意点:

  1. 设置 access token

GitHub 取消了用户名/密码授权,改用 token 的方式,生成的地方在:

记住生成的 token ,刷新页面后就看不到了,所以记得保存。

Action 配置 token 的地方在项目里:

value 就是 刚才生成的 token

这样就配置好了,然后本地就可以 push 代码,在 GitHub 上查看 Action:

下篇再讲一下,部署遇到的一些小问题。