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