【vuepress】将vuepress项目部署到github pages上

准备工作

在这里vuepress项目的编写就不多加赘述了，这篇文章默认已经拥有vuepress项目并且会创建远程仓库。
这里推荐项目名称和远程仓库名称一致

修改config.js中的base

在.vuepress目录下有个config.js文件，添加配置base节点，如果不配置会导致部署后出现错误

module.exports = {
    ...
    base: '/你的项目名称/', // 或者'./'
    ...
}

vuepress项目中添加文件

项目中package.json文件中查看"script"节点，配置运行和打包的命令

"scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
},

下面要用到打包命令docs:build
在vuepress项目的根目录下添加deploy.sh文件，该文件是用于执行发布的脚本文件。

#!/usr/bin/env sh

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

# 这里是执行打包命令，docs:build是package.json中配置的
npm run docs:build

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

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

# 这里是填写你的github仓库地址，把[email protected]:xxx/xxx.git替换成你的仓库地址
git push -f [email protected]:xxx/xxx.git master:gh-pages

cd -

新建github仓库

这里不是一定要新建仓库，现有仓库也可以配置，但这里只讲新建的

在新建好仓库后，把这个新仓库的地址添加到上述的deploy.sh文件中。

部署

在项目根目录下打开终端(git bash、cmd等都可以)，执行sh deploy.sh命令

sh deploy.sh

因为这里deploy.sh文件是在根目录下，所以可以直接写文件名称。如果是在项目根目录下添加了目录，则需要加上目录(路径形式)，比如：

项目根目录
	|--scripts目录
		|--deploy.sh
比如在项目根目录下新建了scripts目录下添加的deploy.sh文件（添加目录一般都叫scripts）
此时命令就要写成:

sh scripts/deploy.sh

执行命令后，没有报红报错即可。

体验

打开github，打开刚才的仓库，找到Settings选项

然后在侧边找到Pages选项，进行一个简单的配置

如果配置后没有显示网址，可以尝试刷新。

后续项目要更新新内容的话，只需要再次在终端里执行deploy.sh文件就可以了

文章到这就结束啦，希望能对大家有帮助。