Vuepress 快速部署到 GitHub 即刻访问
环境
vuepress 版本 1.0.0
准备我们的 vuepress 网站
首先你应该先创建一个 Vuepress 项目
首先我们需要创建一个文件夹
文件夹.png
在文件夹内，打开 cmd 或 PowerShell
//会在文件夹内构建vuepress的整体结构
yarn create vuepress
vuepress提供两种模板.png
这里我们以docs为例
构建vuepress成功.png
会让我们填一些信息，邮件、名字、描述什么的，这里我什么都不填
vuepress为我们创建的目录.png
执行
//安装所需依赖
yarn
然后我们去GitHub创建一个仓库
仓库名必须是你的GitHub名
仓库名必须是你的GitHub名
仓库名必须是你的GitHub名
仓库名必须以.github.io结尾
GitHub昵称.png
创建一个git仓库.png
创建成功.png
回到vuepress来，在package.json中增加以下代码
"scripts": {
"docs:build": "vuepress build docs",//新增
"deploy": "bash deploy.sh"//新增
}
与package.json同级新建一个deploy.sh文件
在文件中写下面这段代码
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io 填写你刚刚创建的仓库地址
git push -f https://github.com/NicCraver/niccraver.github.io.git master
cd -
package.json.png
deploy.sh.png
最后我们通过gitbash执行
yarn deploy
gitbash.png
gitbash2.png
打包后的文件会自动上传到GitHub上
打开https://niccraver.github.io/
项目就部署到GitHub上了
部署成功.png
