创建github仓库

1. 需要按照username.github.io的格式创建！

2. 仓库创建完成后，再为username.github.io仓库开启pages！ 我这边单独创建了gh-pages分支，可以直接用main分支，看个人喜好。

如下图:

创建deploy.sh

deploy.sh文件代码如下:

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
echo 'koa.joeymao.cn' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io, 此处替换刚刚创建的github仓库
git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

cd -

文件创建完成后，将以上代码复制并保存。接着需要找到package.json文件进行以下设置:

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
},

最后执行npm run deploy，出现以下效果就部署成功了。

   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │      New major version of npm available! 6.14.4 → 9.1.2       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v9.1.2   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯