使用Travis CI自动部署Hexo博客到Gtihub Pages
本博客的展示页面使用 Hexo 框架生成,并将生成后的文件托管在 Github Pages 。 Hexo 提供了如静态网页生成、一键部署等一系列工具,使用户只需关注博客的内容。一键部署用着确实方便,但每次发布博客时都需使用 Hexo CLI 工具手动生成页面文件,再手动将页面文件部署到 Github Pages,感觉用起来还是麻烦了点。于是上网搜了一下自动部署相关的东西,找到了一个叫 Travis CI 的持续集成工具。
使用前后对比
使用 Travis CI 之前,需自己手动使用 Hexo CLI 程序构建页面文件,再手动部署到 Github Pages,然后再将项目推送到 Github :
1 | # 编写博客 ... |
使用 Travis CI 后,只需编写博客后推送到 Github , 然后 Travis CI 会根据项目的配置,自动生成博客的静态页面并部署到 Github Pages :
1 | # 编写博客 ... |
使用 Travis CI
Travis CI 的使用非常简单,只需在项目的根目录里添加一个名为 .travis.yml
的配置文件,然后在 Travis CI 的网站里开启对这个项目的持续集成。配置好了后,在以后每次将项目推送到 Github 时,Travis CI 都会根据配置文件执行一系列的操作。
因为 Travis CI 要将项目部署到 Gtihub Pages ,所以需要有对 Github 仓库的操作权限,可以通过在 Github 生成一个 Token 来实现:
- 点击 Github 主界面右上角的头像,选择
Settings
进入设置界面 - 在左侧列表中点击
Developer settings
进入开发者设置界面 - 在左侧列表中点击
Personal access tokens
进入令牌界面 - 点击右侧的
Generate new token
按钮进入Token生成界面 - 在
Token description
项中输入一个用于描述该 Token 的名字(如:travis-ci) - 在
Select scopes
多选框中勾选repo
复选框 - 点击
Generate token
按钮生成 Token - 复制新生成的Token
再将生成的 Token 加入 Travis CI 的环境变量:
- 进入 Travis CI 官网启用想要自动部署的项目并进入项目管理界面
- 在右侧的
More options
菜单栏中选择Settings
进入设置界面 - 在
Environment Variables
栏目中添加一个新项:Name
为GITHUB_TOKEN
,Value
为刚刚复制好的新生成的 Gtihub Token,输入好后点击Add
按钮
这样设置好过后,剩下的就只需要编写 Travis CI 的配置文件了。进入项目根目录,新建一个名为 .travis.yml
的文件,并写入如下内容:
1 | # 使用语言 |
每一个配置项的作用可以看配置文件中的注释。该配置文件的大致描述为:
- 推送后通过
npm install
命令安装依赖 - 依赖安装完成后通过
hexo generate
命令生成静态页面到./public
目录 - 静态页面生成完成后,将生成好的页面推送到 Github Pages
其中
hexo generate
命令依赖于hexo-cli
,需在项目中添加该依赖: 在项目根目录执行npm install -D hexo-cli
。
万事具备,现在可以试试添加一篇新博客然后推送到 Github ,看看是否能自动部署了!