部署 VuePress 到 GitHub Pages (超详细)

初始化 Git 仓库

首先，登陆 GitHub，然后，点击右上角➕找到 new repository 选项，创建一个新的仓库：

image

在 Repository name 填入blog，其他保持默认设置，点击 Create repository 按钮，就成功地创建了一个新的 Git 仓库：

image

初始化项目

初始化本地项目，将 VuePress 作为本地依赖安装：

# 初始化项目
cd ~/Desktop
mkdir my-vuepress
cd my-vuepress
npm init -y

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

接着，在 package.json 里加一些脚本：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy-gh": "GH=1 yarn docs:build && bash scripts/deploy-gh.sh"
  }
}

运行本地开发环境：

yarn docs:dev # 或者：npm run docs:dev

或构建线上静态文件：

yarn docs:build # 或者：npm run docs:build

配置 GitHub Pages

关于 GitHub Pages 的介绍，详见阮一峰的《github Pages入门》。

首先，在 docs/.vuepress/config.js 中配置正确的 base。

module.exports = {
  title: "My Blog",
  description: "This is a blog.",
  base: '/blog/' 
}

新建脚本 my-vuepress/scripts/deploy-gh.sh

#!/usr/bin/env sh

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

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

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

# 如果是发布到自定义域名
# echo 'www.example.com' > 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

# 把上面的 <USERNAME> 换成你自己的 Github 用户名，<REPO> 换成仓库名，比如我这里就是：
git push -f git@github.com:wtyqer/blog.git master:gh-pages

cd -

执行脚本进行部署：

yarn deploy-gh # 或者：npm run deploy-gh

返回 Git 仓库，点击 settings：

image

标红的位置就是部署后的 Github Pages 地址：

image

访问显示如下结果即为部署完成：

image