使用Hexo+Github+TravisCI搭建自动发布的静态博客系统

7

最近玩slack接触到 Travis CI,又突然想起自己好久没写技术blog了,想想尘封已久的hexo+coding.net,心想能不能把Travis CI加进去。

先列举要用到的东西:

  • Hexo - 快速、简洁且高效的博客框架
  • Github Pages - 完美的静态博客服务器(除大陆网速外)
  • NexT - 一款高质量且简洁优雅的Hexo主题
  • Travis CI - 一个持续集成测试工具

其中,Travis CI 是我最新接触的,它是一款很好用的持续集成测试工具。它可以自动关联Github上的项目并且clone下来编译测试,现在就是利用它这一特性来实现hexo博客自动编译、部署。

<!--more -->

步骤及重点

一些网上和官方文档都很明确的步骤不再详细叙述,只做记录,提高效率。

一、先搞Hexo

Hexo建站参考Hexo官方文档

没难度,需要注意几个点:

  1. 增加hexo-deployer-git依赖,防止部署时报错。
npm install --save hexo-deployer-git
  1. 增加hexo-utildev依赖,防止travis的npm版本<3,出现的Error: Cannot find module 'hexo-util'错误。
npm install --save-dev hexo-util

二、配置Github

建库、同步本地什么的都是github基础操作,注意一点,建两个分支,master分支和对应源码,gh-pages分支作为hexo生成的静态页面上传分支。网上很多都说要用到xxx.github.io这个项目的,其实没必要,只需要推到其他分支即可,然后在setting里配置要作为页面显示的是哪个分支即可。

三、使用NexT主题

这个可以参考Next帮助文档,步骤说明很详细。

其中需要注意的点:

  1. 就是上边说的hexo-util的问题,已给出解决办法。
  2. 关于语言的问题,v5.1.x版本的中文是zh-Hans,而v6.0.0的中文是zh-CN,注意区分。
  3. 关于主题的配置文件,采用了Hexo data files特性,利用这个特性,可以放心更新next主题,而不担心配置丢失或烦于合并。
  4. v6.0.0的fancybox移至外部仓库依赖,所以需要自行添加,添加方法参见详细安装步骤

四、配置Travis CI

重点来了,详细步骤可参考用 Travis CI 自动部署 hexo,作者已经说的比较详细。

需要注意的一点是:在package.json中增加depoly的命令行语句,防止travis在自动执行到npm run deploy这一步的时候报找不到该script的错。

"scripts": {
  "deploy": "hexo clean && hexo g -d"
},

上述代码加在dependencies同级即可。

其实配置完Travis发现,其实原理就是让Travis在云上帮我们执行本地化的编译、部署等操作,它也需要git pull项目下来,npm install安装依赖,hexo d -g去编译静态博客,并且依旧需要遵循github的权限验证,所以才需要配置了共私钥对。

举一反三,通过这个博客的配置,同时也学会了使用Travis做持续集成测试。除了可以应用到其他项目中去,同时也开启了新世界的大门。

个性化

  1. 配置自定义的css样式,主题目录下source/css/_custom/custom.styl
  2. NexT使用说明

后续

在此基础上,研究slack集成travis,让每次自动测试的结果及时推送到slack上,完美!


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

水寒 · 4月23日

我有一套更方便好用的方案,使用GitLab的 CI/CD 自动构建发布静态网站到七牛云存储,只需要提交代码即可,《Hexo使用PythonSDK整站静态发布七牛云》http://dp2px.com/2019/04/09/q...

回复

载入中...