Github实现自动化部署个人博客

• 基于vuepress1.x，设置Github Actions，实现自动化部署

• 确保github仓库中存在master、 gh-pages 两个分支

  • master用于存放博客项目源码
  • gh-pages用于存放编译后的代码

PS：Github自动化部署会将打包后的代码自动提交至gh-pages分支，因此初始时仅需创建一个空的gh-pages分支即可

创建ACCESS_TOKEN

• 点击头像 -> settings -> Developer Settings -> Personal access tokens -> Tokens (classic) -> Generate new token

• Token名称必须与项目中的一致 例如：ACCESS_TOKEN

  • 勾选repo、delete_repo

  • 截止日期（Expiration）选择 No expiration

• 下拉至底部，保存（Generate token），保存后复制生成的TOKEN

项目中设置Actions

• 进入项目 -> setting -> Secrets and variables -> Actions -> New repository

将复制的TOKEN填入，保存

设置项目中的pages

• setting -> Build and deployment

按照如下图所示，设置完成后，点击保存按钮

本地项目master分支根目录增加.github/workflows/xxx.yml

文件名称随意，以deploy.xml为例

配置deploy.yml文件

# 流水线名称
name: Build and 
# 触发条件 push到master分支时触发
on:
  push:
    branches: ["master"]
  workflow_dispatch:
# 设置权限
permissions: 
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false
# 工作流作业
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 服务器配置
    steps:
      - name: checkout # 拉取代码
        uses: actions/checkout@v3
      - name: Node.js with node_modules cache # 设置nodejs版本和node_modules缓存
        uses: magnetikonline/action-node-modules-cache@v1
        with:
          node-version: "16"
      - name: 下载依赖
        run: npm install # 执行npm install 下载依赖包
      - name: 构建
        run: npm run build # 执行npm run build  构建发布包

      - name: github pages 部署
        uses: crazy-max/ghaction-github-pages@v3.1.0
        env:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # github生成的TOKEN  ACCESS_TOKEN为生成的TOKEN名称
        with:
          domain: github.com # 可选，默认为github.com 
          target_branch: gh-pages # 需要部署的分支 可选，默认为gh-pages
          keep_history: false #创建增量提交 可选，默认为false
          allow_empty_commit: true # 允许创建空分支 可选，默认为true
          build_dir: docs/.vuepress/dist # 需要部署到gh-pages的文件 必填
          committer: # 提交人姓名和电子邮件地址 可选 name<address>
          author: 'xxx<xxx@gmail.com>' # 作者姓名和电子邮件地址 可选 name<address>
          commit_message: '构建github pages' # 提交信息 可选
          absolute_build_dir: false # 是否将build_dir视为绝对路径，可选 默认为false
          follow_symlinks: false # 如果启用，链接的内容将被复制 默认为false
          jekyll: true # 允许Jekyll建立网站 默认为true
          dry_run: false # 如果启用，则不会推送任何内容
          verbose: false # 启用详细输出

本地项目相关配置说明

• 创建分支gh-pages，切换至gh-pages分支，删除所有文件后上传

• 切回至master分支，将.github及项目文件上传

• 回到github项目中，点击Actions，即可看见正在进行自动化部署

参考

• GitHub Actions (opens new window)