0%

使用 TravisCI 自动部署 hexo 博客

概述

这篇文章介绍了使用 Travis-CI 读取 github 中的项目代码,然后完成自动编译任务,最后将编译后的文件自动推送到指定 git 仓库,实现 hexo 博客的自动部署功能。

Travis-CI 是什么

官网:https://www.travis-ci.org/

Travis-CI 是一个在线的开源项目的持续集成构建工具,可以自动完成项目构建、测试、部署。支持多种主流的编程语言,如 C、C++、Java、Android、Python、PHP等,支持多种平台编译环境,如 Ubuntu、macOS、Windows,支持 docker ,使用 yml 配置任务,非常简洁。

Hexo 是什么

官网:https://hexo.io/zh-cn/

Hexo 是一个开源的,高效、简洁的静态博客工具,基于 nodejs 开发,使用 markdown 编辑博客内容,拥有大量精美的主题和实用插件,用起来非常高效而又省心。

博客项目

首先需要搭建一个 hexo 项目,然后把项目的源码上传到 github,并开启 github 的 page 服务,从而实现 hexo 静态博客的访问。

详情请参考:教你从0开始搭建个人博客

建议使用同一个 git 仓库存放 hexo 博客的源代码和部署文件,只需要在 git 仓库中创建两个分支,master 分支用于存放部署的文件,source 分支存放博客源文件。

可参考:如何维护hexo静态博客

注意,travis CI 对开源的仓库是免费的,这里需要将存放 hexo 博客源码的仓库设置为公开的。

Travis 自动部署配置

github 添加 Travis CI 及 Travis CI

  • 搜索 Travis 扩展 登录 github ,进入 Marketplace ,搜索 travis ,或直接进入 https://github.com/marketplace/travis-ci

  • 选择开源版本 将 travis-ci 扩展添加到 github,这里需要选择 Open Source 免费版本,点击 Install it for free 按钮。

  • 确认订单并安装 Travis CI 扩展。

  • 仓库访问权限 选择 Travis-CI 可用的仓库,默认是所有仓库,可以根据需要选择指定的仓库,选好之后点击 Install ,会出现密码确认界面,输入 github 密码确认安装。

    如果后续需要修改仓库访问权限:登录你的 github 账户,在 Applications settings 中配置 Travis CI 权限,使其能够访问你的仓库。

  • 登录 Travis CI 确认安装后,会自动跳转到 Travis CI 的页面,我们可以直接使用 github 账户授权登录。如果没有自动跳转,可以手动打开 https://travis-ci.com/

    travis-ci sign in

  • 使用 github 账户登录 Travis CI 后,可以看到自己 github 的仓库。

创建 github 个人访问令牌

我们需要创建一个访问令牌,供 Travis CI 访问我们的 github 仓库,需要能够仓库的读与写权限,这个令牌等会配置 Travis CI 时需要用到。

  • 另开一个页面登录 github ,进入配置页面(快捷链接:https://github.com/settings/profile),进入开发者选项配置。

  • 个人访问令牌配置(快捷链接:https://github.com/settings/tokens),点击新建令牌。

  • 填写令牌名称,勾选权限,这里主要需要读和写的权限,然后点击最下方的创建按钮即可。

  • 创建好令牌后,一定要把令牌复制并保存下来,因为离开这个页面后,将无法再查看这个令牌的内容。

Travis CI 配置

给 Travis CI 添加 github 访问令牌。

  • 回到 Travis CI 页面,选择需要存放博客源码的仓库,进入仓库配置页面。

  • 将 github 访问令牌添加到环境变量,在 Travis 配置页面下拉,找到 Environment Variables 配置,添加一个名为 GH_TOKEN 的记录(名称可以自己定义),值(value) 为上一步获得的 访问令牌,分支选择所有,一定要确认 DISPLAY VALUE INBUILD LOG 选项未勾选,防止访问令牌泄露,点击 Add 添加记录。

Travis CI 自动部署配置 .travis.yml

在博客源码根目录下创建一个文件 .travis.yml ,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
sudo: false # 是否需要管理员权限,我们不需要
language: node_js # 语言环境
node_js:
- 10 # 使用 nodejs v10 LTS
cache: npm
branches: # github 分支配置
only:
- source # 只有 source 分支有推送时才触发构建
script: # 要执行的命令
- git clone https://github.com/theme-next/hexo-theme-next themes/next ## 下载博客主题
- hexo generate # hexo 生成静态文件
deploy:
provider: pages
skip-cleanup: true
target_branch: master # 部署的目标分支,默认为 gh_pages 分支
github-token: $GH_TOKEN # 在 Travis CI 环境变量中添加的 github 访问令牌名
keep-history: true
on:
branch: source # 源码分支
local-dir: public # 要部署内容的目录
notifications: # 通知
email: true # 使用 email 通知自动部署结果

上面配置将会在 github 仓库的 source 分支有新内容推送上去时,触发 Travis CI 的自动部署任务,将自动生成 hexo 博客内容,然后将生成的内容推送到 github 仓库的 master 分支上。部署任务做完后将发送邮件通知。

注意:我的博客使用了 next 主题,所以在执行的命令中,需要添加下载 next 主题内容的命令

测试效果

.travis.yml 文件推送到 github 仓库中,将自动触发部署任务,这时候进入 Travis CI 网站 https://travis-ci.com/,可以看到自动构建部署的输出日志。

等待 Travis CI 自动构建部署完成后,可以登录你的 github pages 地址看看是不是部署成功了。

总结

使用 Travis CI 自动部署 hexo 真的非常方便,以后写完博客之后只需要推送到 github 就行了,不用手动构建、部署了。需要注意的是,如果你的博客里用了一些自定义的东西的时候,在 Travis CI 的配置文件 .travis.yml 中要修改或添加相应的配置项,详情可以参考 Travis CI 的官方文档。Travis CI 有一个问题是,在国内的访问速度可能会有点慢,有时根本打不开,但是只需要你第一次配置好了,后续就算 Travis CI 网站打不开也不影响!