Vuepress自动化部署
Vuepress自动化部署
前言
现状是每次撰写完文章之后, 本地构建, 然后把 docs/.vuepress/dist所有文件 复制到另外一个仓库里, 再push到github page上面, 一天一两次倒没有什么问题, 但每天都重复这样的操作就比较繁琐, 所以开始捣腾自动化部署.
项目的情况是这样的。
Github源码仓库主要存放vuepress博客的源码。Github Page仓库主要存放vuepress构建出来的静态文件（html/js/css/img之类的）, 这个仓库与域名绑定在一起的。
每次git push 代码 Github源码仓库 自动 触发 Github Action 构建完成之后 推送到 Github Page仓库.
大概流程如下:
;
创建yml文件
在项目的 .github/workflows/ 路径下新建一个 vuepress-deploy.yml, 如果已存在其他名称的yml，就不需要新建了.
具体的代码如下:
name: Build and Deploy
on:
push:
branches:
- main # 确保这是你正在使用的分支名称
jobs:
build-and-deploy:
runs-on: ubuntu-latest
permissions:
contents: write # 写的权限
steps:
- name: Checkout
uses: actions/checkout@main
- name: 设置 Node.js
uses: actions/setup-node@v3
with:
node-version: 18 # node.js的版本号
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Github Page仓库的访问token
TARGET_REPO: 用户/仓库名
TARGET_BRANCH: 分支名
BUILD_SCRIPT: npm install && npm run docs:build # 这里安装依赖和构建
BUILD_DIR: docs/.vuepress/dist # 这个是构建的出来的具体路径
COMMIT_MESSAGE: Auto deploy by the Vuepress-deploy # 这个commit的说明, 这个看自己个人的喜好。
创建ACCESS_TOKEN
上面的内容所提到的ACCESS_TOKEN，因为要通过github action的命令去更改 Github Page仓库的内容, 需要用到token。
创建token
这个是你的帐号所有仓库的访问token, 具体操作步频是 点击 你的头像 -> Settings -> Developer settings -> Personal access tokens -> Generate new token (Classic), 具体看下面步骤.
步骤1 点击头像
;
步骤2 点击人个信息的Settings
步骤3 点左边最下面的 Developer settings
步骤4 点击 token(classic)
步骤5 点击 Generate new token, 然后点击Generate new token(classic)
步骤6 钩选 workflow 和 write:packages, 最后点击 Generate token
生成token后, 复制保存好, 一会用到。
创建仓库secrets
在需要设置的仓库下，点击 Settings -> Secrets and variables -> Actions -> New repository secret, 具体看下面步骤
步骤1 点击仓库的Settings
步骤2 点击Secrets and variables的Actions
步骤3 点击New repository secret
步骤4 name输入框填写与vuepress-deploy.yml的变量名保持一致,也就是ACCESS_TOKEN。 Secret入输框填写刚才生成的token， 最后点击Add secret。
最终效果
Github action 列表
下面这个是失败的例子, 具体是什么异常的信息, 需要点进去查看.
部署异常
收集一些Github actions部署出现的异常信息和解决方案, 持续更新...
Token没填写或者没传递
Github action出现以下这种异常, 有两种可能性 1.是token字段没填对. 2.token为空.
remote: Permission to username/xxx.git denied to username.
fatal: unable to access '***github.com/username/xxx.git/': The requested URL returned error: 403
Token错误
Github action出现以下这种异常, 可能是token填错了, 一般是ghp_开头的.
remote: Invalid username or password.
fatal: Authentication failed for '***github.com/username/xxx.git/'
发布成功后网站404
好不容易把Github action调成功之后, 发现网站变成404了, 找不到网址, 什么情况? 查看Github Page仓库是有文件的, 也是最新的。但细心一看少了一个CNAME文件, 这个文件里边内容是网站的网址, 比如: book.itomtan.com。
解决方案一
就是在vuepress-deploy.yml最后一行加上 CNAME: 你的域名, 重新提交即可。
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
.....
.....
CNAME: 你的域名
解决方案二
在这个 docs/.vuepress/public 路径下, 新建一个 CNAME 文件, 内容是你的网站域名，我的是 book.itomtan.com, 建完之后, 重新提交即可。