提示

本文主要讲解使用 VuePress 构建的博客如何部署到 GitHub Pages。

为什么直接就开始部署呢？

因为现在需要配置的代码非常少，很清晰。如果等到后面开始学习部署的话，你就会发现配置非常多，多到有点分不清了。

配置文件

讲部署前要先学习下配置文件，因为需要在配置文件中添加部署的相关配置。

需要在 docs 目录下新建 .vuepress 目录，然后在 .vuepress 目录下添加 config.js 文件。

文件的配置如下。

module.exports = {
    title: '二默',
    description: '二默的个人博客'
}

此时网站的首页应该是下面这个样子。

设置 base 属性

首先需要在 docs/.vuepress/config.js 中设置正确的 base。

如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。

如果你打算发布到 https://<USERNAME>.github.io/<REPO>/，也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>，则将 base 设置为 /<REPO>/。

本次以第二种方法演示，在 docs/.vuepress/config.js 添加 base 属性。

base: "/ermo"

添加 deploy.sh 部署文件

在项目的根目录中添加 deploy.sh 文件，并加入以下内容。

#!/usr/bin/env sh

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

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

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

# 如果是发布到自定义域名
echo 'www.ermo.cc' > CNAME

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

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
git push -f git@github.com:ermocc/ermo.git master:gh-pages

cd -