自动化部署VuePress到git page


2019/12/28 杂项

已经有越来越多的人开始使用VuePress与GitPage进行博客的记录,但部署方式是否可以简化。

# 手动部署脚本

首先,需要知道的是,VuePress在GitPage上的部署是统一到 gh-pages 分支的,因此较为普遍的方式是一个半自动化的脚本来简化每次的打包和推送:

# 确保脚本抛出遇到的错误
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

cd -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这也是官方文档推荐的方式,如果需要运行该脚本的话,方便操作可以在 package.json 中写一行脚本。

"scripts": {
  "d": "bash deploy.sh"
}
1
2
3

# 自定义域名

当然你有自己的域名的时候,你可能不想要你的博客域名只是单纯的 https://username.github.io/repo ,因此,为了将域名和自己的博客进行绑定,还需要做一些细微的操作:

  • 在你的工程目录下创建一个 CNAME 文件
  • CNAME 中写上你的域名,不要带有 www,也不要带有其他内容,例如我的 cyanthing.com
  • 进行域名解析

# 域名解析

首先你得对你的域名进行备案,具体方式可以具体根据自己购买服务器的教程进行操作。

以腾讯云为例,进到云解析的操作台,增加两个 CNAME 的解析记录:

WX20191229-183138.png

这里有几个说明:

  • @ 直接解析主域名 cyanthing.com
  • www 解析后的域名为 www.cyanthing.com
  • CNAME 记录,如果需要将域名指向另一个域名,再由另一个域名提供ip地址,就需要添加CNAME记录
  • 记录值意为你要解析后跳转的域

# github的配置

WX20191229-183138.png

此后约等待几分钟后,访问域名,就能跳转到你的博客主页了。

将你要绑定的域名填写在这里即可,刚刚提到的在工程里面创建的 CNAME 文件,没有创建的话,每次打包推送到 gh-pages 分支后都需要再次指定填写域名。

# 自动化部署

以上只是简化了你的部署流程而已,但是主要还是要依靠手动去做。现在进入最后一步,利用 Github 的工具链,去实现自动化的部署方式,我们只需要 push,就不用在操心博客的构建了。

我们需要做以下两件事:

  • Travis CI的注册于布置:因为 Github 没有自动化的 CI,因此借助它来构建。
  • GithubToken 生成,Travis 需要通过它来获取操作仓库的权限。

# Token的生成

  • 进入自己 github 的设置界面,点击 Developer Settings 进入开发者设置
  • 点击 Personal access tokens 生成自己的 token,这里起一个名字,方便自己记忆这个 token 是用来干嘛的即可

WX20191229-184957.png

因为需要让 Travis CI 有权限来操作仓库,所以记得勾选 repo

# Travis CI 的配置

WX20191229-185331.png

  • 点击 Manage repositories on Github,拉取你指定的博客仓库
  • 点击仓库的 setting 进行布置

WeChatde3678273b9ab803e30050867ef08972.png

  • 增加一个 TOKEN,名字写 GITHUB_TOKEN,填写刚刚生成的 token,并且添加
  • 在项目目录下增加一个文件用作自动部署时,读取的脚本
language: node_js # 执行环境
node_js:
  - lts/*
script:
  - npm run build
deploy:
  provider: pages
  skip-cleanup: true
  local_dir: public # 项目打包后生成的文件的目录,原版vuepress应该是 docs下的build文件夹
  github-token: $GITHUB_TOKEN # 你填写的token名
  keep-history: true
  fqdn: cyanthing.com # 使用自定义域名
  on:
    branch: master # 执行哪个分支
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 之后进行 push,正常的推送仓库,不需要做过多操作,Travis CI 会帮我们打包部署到指定域名下,我们等他跑完去刷新页面,就可以了,此时你可以删掉那个半自动的推送脚本了。

对于 yml 文件不是很熟悉的可以去查看官方配置,这里写的足够使用。

# 补充与参考

如果你使用的是 Gitlab: 由于 GitLab 自带 CI,只需要在项目根目录创建 .gitlab-ci.yml

image: node:9.11.1

pages:
  cache:
    paths:
    - node_modules/ # 缓存 node_modules,加速编译

  script:
  - npm install
  - npm run docs:build
  artifacts:
    paths:
    - public
  only:
  - master
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考:

Last Updated: 12/29/2019, 5:15:19 PM

Initializing...