天天看点

使用Travis CI自动部署Hexo博客

自从使用GitHub Pages和Hexo来发布博客之后,不得不说方便了许多,只需要几个简单的命令博客就发布了。但在不断的使用中发现每次的发布操作也挺耗时的。

后来看到一篇文章介绍可以使用Travis CI来自动部署hexo的博客,只需要将md文件 <code>pull</code> 到仓库中博客就自动发布好了。趁着这几天工作任务不太着急,研究了一下,特纪录在此,希望能帮到有需要的朋友。

Travis CI 是目前新兴的开源持续集成构建项目,用来构建托管在GitHub上的代码。它提供了多种编程语言的支持,包括Ruby,JavaScript,Java,Scala,PHP,Haskell和Erlang在内的多种语言。

因为我之前的博客源文件是存放在私有的git管理工具下,如果我们要使用Travis CI自动部署,必须将这些博客的源码文件放到GitHub上才能被Travis访问到。因为 <code>GitHub Pages</code> 默认要求必须使用 <code>master</code> 分支存放静态文件,我们可以在该仓库下使用其他分支来存放博客源码文件,或者新创建一个仓库来单独保存。这里我们把hexo博客的源码放在 <code>hexo</code> 分支下,博客的静态文件部署在 <code>master</code>分支下。

对于如何在GitHub上创建分支,相关操作命令如下,仅供参考:

当切换到 <code>hexo</code> 分支后,因为我们是需要用 <code>hexo</code> 分支来存放博客源码文件的,所以,将 <code>hexo</code>分支下的文件除 <code>.git</code> 目录外全部删除,然后将博客源码文件拷贝到该目录下,并 <code>commit</code> 到 <code>hexo</code> 分支.

然后我们需要将本地的 <code>hexo</code> 分支提交到远程仓库中

这样我们在GitHub的仓库下就能看到 <code>hexo</code> 分支为博客源文件,<code>master</code> 分支为静态文件。

这里需要注意一点,当我们新增博客md文件时,获取远程分支时要指定分支的名称,否则会默认获取 <code>master</code> 分支:

使用Travis CI自动部署Hexo博客

然后点击后面的齿轮图标进入设置界面。

如果你之前已经勾选过项目,可以进到项目主页中,在右上角找到 <code>More options</code> 选项下的 <code>Settings</code> 进入设置界面。

使用Travis CI自动部署Hexo博客

在 <code>General</code> 区域开启:<code>Build only if .travis.yml is present</code> 表示“只有当 <code>.travis.yml</code> 存在时才构建” ;开启:<code>Build branch updates</code> 表示 “当分支更新时构建” 两个选项,如下:

使用Travis CI自动部署Hexo博客

Travis CI在自动构建完成后需要push静态文件到仓库的 <code>master</code> 分支下,而访问GitHub的仓库是需要权限的,下面来看看如何配置权限。

如下图,<code>Environment Variables</code> 区域就是用来添加权限信息的。我们需要填写一个Token的名称和值,该名称可以在配置文件中以 <code>${变量名}</code> 来引用,该Token我们需要从Github中获取。

使用Travis CI自动部署Hexo博客

之前我们在使用命令 <code>hexo d</code> 部署hexo博客到GitHub上时,是因为本地有 <code>SSH key</code>,当交给 Travis 去自动部署时我们也需要设置可操作权限,这里我们使用GitHub提供的token变量来实现。

登陆 <code>GitHub</code> --<code>Settings</code> 选项,找到 <code>Personal access tokens</code> 页面。

点击右上角的 <code>Generate new token</code> 按钮会生成新的token,点击后提示输入密码后继续,然后来到如下界面,取个名字(我这里取 <code>Travis_Token</code> 下面的配置文件中会用到),勾选相应权限,这里只需要 <code>repo</code> 下全部和 <code>user</code> 下的 <code>user:email</code> 即可。

使用Travis CI自动部署Hexo博客

生成完成后,将该token拷贝下来。这里需要注意的是该token只有这个时候才能看到,当再次进入这个页面时就只会显示之前设置的名称了。如果忘记了只能重新生成一个。

使用Travis CI自动部署Hexo博客

将上面获取到的token添加到 <code>Environment Variables</code> 部分,值为该 <code>token</code> ,而名称即为上面设置的 <code>Travis_Token</code> (请更改为个人所设置名称)。不勾选后面的 <code>Display value in build log</code> . 否则会在日志文件中暴露你的 <code>token</code> 信息,而日志文件是公开可见的。

至此我们已经配置好了要构建的仓库和访问的token,接下来就是如何构建的问题了。

之前的步骤中我们勾选了一项 <code>Build only if .travis.yml is present</code>,所以我们要在博客源码文件的<code>hexo</code> 分支下新增一个 <code>.travis.yml</code> 配置文件,其内容如下:

注意:需要将配置文件中的 <code>GH_TOKEN</code> 换成我们自己设定的名称,这里我的配置应该是 <code>Travis_Token</code> 即 <code>- git push --force --quiet "https://${Travis_Token}@${GH_REF}" master:master # GH_TOKEN是在Travis中配置token的名称</code>。 还要更改 <code>GH_REF</code> 中我们的博客仓库的地址。

配置文件中的操作也很简单,这也是网上找到的比较常见的一种配置格式了。然而,这份配置文件中却隐藏着一个大坑。至于如何跳过去,后面再详说。

当 <code>.travis.yml</code> 配置文件修改完成后,将其提交到远程仓库的 <code>hexo</code> 分支下,此时如果之前的配置一切ok,我们应该能在 <code>Travis CI</code> 的博客项目主页页面中看到自动构建已经在开始执行了。上面会显示出构建过程中的日志信息及状态等。

使用Travis CI自动部署Hexo博客

在 <code>Travis CI</code> 的日志文件中,如果遇到下面的错误提示,那可能就是 <code>.travis.yml</code> 文件的格式有问题。

通过在github上查询,我发现这个问题是我在配置文件中的缩进使用了 <code>tab</code> 键导致的。因为在不同的编辑器下,<code>tab</code> 键表示的宽度可能不同。

这里建议是:不要用 <code>tab</code> 键,而是用适当的空格实现缩进

<a href="https://github.com/ruby/psych/issues/136">found character '\t' that cannot start any token while scanning for the next token at line · Issue #136 · ruby/psych · GitHub</a>

查看日志提示是权限问题。

这里的问题是我在 <code>.travis.yml</code> 配置文件中没有把 <code>${GH_TOKEN}</code> 部分换成自己在 <code>Travis CI</code> 中填写的token名称而导致的。执行时找不到token,也就没法设置权限了。

如果你按照上面的 <code>travis.yml</code> 配置文件的设置去自动构建你的博客,你会发现 <code>master</code> 分支的提交记录只有当前提交的这一条,而且无论操作多少次,也仅仅只有一条。这还真的是一个大坑呀!

<code>.travis.yml</code> 部分配置内容:

仔细查看上面的配置文件,我们发现每次都是将 <code>public</code> 目录下的文件重新生成了一个git项目,然后强制覆盖提交到了 <code>master</code> 分支下,这就是问题的所在。

为了解决这个问题,我将配置文件改为了如下的内容:

在 <code>after_script</code> 部分,我先将博客项目 <code>clone</code> 到本地的 <code>.deploy_git</code> 目录下(目录名可自定义),然后切换到 <code>master</code> 分支,将 <code>master</code> 分支下的 <code>.git</code> 目录拷贝到了 <code>public</code> 目录下,接着继续后面的 <code>commit</code> 操作。

这里算是采用了一种 <code>换位</code> 的方式。之前我们通过git管理文件时并不会改动 <code>.git</code> 目录,而只是更改文件。但在这种情况下,我们需要提交的是 <code>public</code> 目录下的新文件。这样,就会保留之前的提交记录了。

附上我在使用的配置文件内容:

注意上面配置文件中的某些参数改为自己的。

在网上看到一位网友解决 “<code>master commit</code> 树被清空” 的问题时采用了另外一种方法,即在 <code>after_script</code> 部分调用执行 <code>hexo d</code> 命令来发布。这样的方式遇到的问题是需要设置 <code>SSH Key</code>或者必须获得权限才能进行 <code>push</code> 操作。

有一种授权的方式是通过https使用OAuth验证的方式将token添加到url中来提交。即需要更改 <code>_config.yml</code> 中的如下部分:

为:

而这样一来 token 就暴露在配置文件中了。所以还需要在操作命令中使用替换的方式只在自动部署时更改该token。

这里仅做介绍,更详细可访问:

<a href="https://blog.xingoxu.com/2016/12/use-travis-ci-your-blog/">使用Travis Ci使hexo自动生成并部署 | xingo's private plot</a>

<a href="https://github.com/blog/1270-easier-builds-and-deployments-using-git-over-https-and-oauth">Easier builds and deployments using Git over HTTPS and OAuth · GitHub</a>

<a href="http://www.jianshu.com/p/e22c13d85659">手把手教你使用Travis CI自动部署你的Hexo博客到Github上 - 简书</a>

<a href="http://www.jianshu.com/p/5e74046e7a0f">使用 Travis CI 自动部署 Hexo - 简书</a>

<a href="http://zhzhou.me/2017/02/20/auto-deploy-hexo-on-travis-ci/">使用 Travis-CI 来自动化部署 Hexo · ZHOU</a>

该文章同步发表在:

<a href="http://www.cnblogs.com/babycool/p/7326722.html">使用Travis CI自动部署Hexo博客 - 酷小孩 - 博客园</a>

<a href="http://www.itfanr.cc/2017/08/09/using-travis-ci-automatic-deploy-hexo-blogs/">使用Travis CI自动部署Hexo博客 | IT范儿</a>

本文转自 酷小孩 博客园博客,原文链接:http://www.cnblogs.com/babycool/p/7326722.html  ,如需转载请自行联系原作者