前言
本文主要记录一下在利用github部署vitepress博客网站时候可能遇到的问题和解决方法，关于如何使用vitepress，在这里就不展开叙述了，如果想进一步了解vitepress，可以访问vitepress的官网。
自动部署流程
-
第一步建好仓库，然后把项目代码提交到仓库中
-
package.json文件中添加以下脚本：
{
"scripts": {
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
}
}
- 在项目的根目录下创建一个
.github/workflows的文件夹，添加一个名为 deploy.yml 的文件，文件内容如下：
name: Deploy
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- uses: actions/setup-node@v3
with:
node-version: 16
cache: yarn
- run: yarn install --frozen-lockfile
- name: Build
run: yarn docs:build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/.vitepress/dist
# cname: example.com # if wanna deploy to custom domain
tip: 添加了以上代码，在你每次提交了新的代码到master分支后，github pages会自动打包部署，如果你的主分支是main，那就要把上述代码中的master改成main
- 接下来来到github的Developer setting（个人的下滑菜单-->Setting）页面，勾选上workflow，滑倒页脚update token。复制好提示出来的token
-
来到仓库的
Setting --> Secrets and variable --> Action，这时候New repository secret，起一个名字，把刚刚复制的token值粘贴到value中 -
提交代码到master分支，等待actions完成，这个过程可以在Actions中看到。
tip: 如果这个过程中action失败，是会有邮箱通知的，检查上3、4步骤有没有出现问题
💥如果出现如下报错,上面步骤3可以解决
- action成功之后，来到Setting的Pages页面，选择gh-pages然后Save，最后Visit site就可以看到自己搭建的网站啦！
tip: gh-pages分支是在提交代码到master后自动生成的。不用自己新建，提交的代码也是直接提交到master中，github pages会自动帮你打包部署
总结
以上就是利用github pages自动部署vitepress的流程了，也包括了我在搭建过程中所遇到的问题，关于vitepress+GitHub pages的问题在网上零零散散，所以汇总记录一下相关的问题和解决的办法，希望可以帮到你们~~~
