简述
在编写VuePress项目文档结束后，我们可以优化部署流程。一般情况下，我们会将文档上传至线上服务器，并通过nginx进行映射。但是对于个人项目的文档而言，完全可以直接在Github中进行部署。这样做可以方便管理，同时还能省去线上服务器操作的步骤。
在Github中部署项目时，入口文件必须命名为
index.html。而VuePress打包后的输出文件也符合这种格式。因此，只需要完成以下几个步骤即可实现部署：
Github步骤
安装git
生成密钥
- 右击目录空白处，打开
Git Bash Here - 输入命令生成
ssh-keygen -t rsa
-
根据指令回车
- 回车生成密钥文件
- 输入密钥锁码(可直接回车)
- 再次输入
- 生成
id_rsa私钥 - 生成
id_rsa.pub公钥 - 可以直接命令行打开文件，也可以进入c盘
.ssh目录查看
-
获取这个pub公钥后，复制在Github中
注意：这不是进入Github项目设置，而是Github中的用户设置，需要点击头像：
Settings->SSH and GPG keys
项目配置步骤
自动化部署配置
- 根目录新建
docs.sh文件
# 打包
vuepress build docs
# 进入打包目录
cd docs/.vuepress/dist
# git 初始化
git init
git add -A
git commit -m 'deploy'
# 推到你仓库的的 gh-page 文档分支,如果没有新建
# 将 <USERNAME>/<REPO> 替换为你的信息，github用户名/仓库名.git
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
这里命令会依次执行，如果中途发送错误会终止，具体信息需要自己根据项目填充。
- 配置
scripts
{
"scripts":{
"docs":"docs.sh"
}
}
vuepress配置
module.exports = {
// 部署才能找到相应资源
base: "/github上传的仓库名/",
// 注意html标签logo也需要加上仓库名，否则找不到资源
head: [['link', { rel: 'icon', href: '/github上传的仓库名/images/logo.png' }]],
// ....
}
vuepress的config文件中需要注意的是配置head的时候，href需要加上仓库名作为路径。
最后
npm run docs
成功之后我们可以通过Github项目设置里的Pages查看：Settings->Pages
