原文：利用travis CI自动部署Hexo+NexT+github的pages博客
这周断断续续地用Hexo+NexT主题+Github搭建好了自己的博客，记录一下。
基础的项目搭建很简单，对于小白也能够很快搭建出来。不过想要实现travis CI的自动部署，就比想象中麻烦了——因为这方面的文章较少且内容重复，对于实际遇见的bug也少有说明，所以我在这里踩了几个坑……终于，在我对着电脑苦思冥想一番后，终于找到了解决方法~~~下面就把方法写下来，希望对大家有帮助!
博客第一站，出发！
最终效果
可在我的博客查看最终效果：vita的博客
实现的功能有：
- 字数统计+阅读时间
- 来访数据统计
- 文章搜索
- 萌萌的看板娘
- 文章版权说明
- 文章扫码关注公众号
- fancyBox图片查看
- 评论+喜欢功能
- 侧边栏进度条
10.travis CI自动部署在github和coding上
美化样式：
- 首页文章添加分割线
- 头像框改为圆形，放置会旋转
- 开启背景的canvas_nest动态效果
大概了解了最终效果，就来看看如何实现吧！
下载并安装项目
git clone https://github.com/vita2333/vita-hexo-next-blog.git
cd hexo-next-blog-master
npm install
安装完成后
hexo s
访问 http://locakhost:4000 查看效果
项目配置
博客基础信息配置
根据Hexo官方文档修改根目录下_config.yml文件。
配置博客主题
项目预设的是NexT主题，样式简洁大方且内置了许多功能，不需要自己一步一步配置。我的博客除了看板娘和自动部署，全部都是根据NexT文档完成配置的。
配置看板娘（可选）
图中黑猫就是看板娘。在项目根目录下的package.json中已经引入了所需的插件：hexo-helper-live2d以及需要用到模型（黑猫）。所以项目初始安装npm install就配置完成了。不需要此功能的执行npm uninstall xxx即可。
想要换成其他的看板娘，请移步作者的博客，选择喜欢的npm install xxx --save安装，并修改根目录下_config.yml
live2d:
enable: true
model:
use: live2d-widget-model-hijiki #换成喜欢的model名
至此基础的配置已经完成，可以执行hexo d部署到github上了。
但是，每次更新完博客都要重新部署，而且在github上只保留了博客渲染后的文件，也就是说，如果原始项目不小心丢失，就不能继续更新了。所以这里推荐用travis CI来自动部署，将原始项目文件推送到github的一个分支，travis CI会自动打包到master分支，这样即便本地文件丢失，也能在github找回。
配置travis CI自动部署
1.修改配置文件
这里我采用了另一款主题hexo-theme-snippet的配置，方法如下：
修改根目录下.travis.yml
branches:
only:
- dev #用于存放原始项目文件的分支
env:
global:
- GH_REF: github.com/vita2333/vita2333.github.io.git #配置github地址，注意是https://后的部分
- CO_REF: git.coding.net/vita2333/myBlog.git #配置coding地址（可选）
修改根目录下_travis,sh
git init
git config user.name "vita2333" #修改用户名
git config user.email "[email protected]" #修改邮箱
git add . -f
git commit -m "Build by Travis CI"
git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
git push --force --quiet "https://vita2333:${CO_TOKEN}@${CO_REF}" master:master #如果部署到coding上，这里的用户名也要修改
文件中GH_TOKEN和CO_TOKEN是我们要用travis CI访问项目的访问令牌。
2.获取项目访问令牌
github令牌获取方式：
点击头像 - setting - Developer settings- Personal access tokens
点击`Generate new token`，勾选`repo`和`user`然后点击生成。
coding令牌获取方式：
点击头像 - 个人设置 - 访问令牌 - 新建令牌
3.在travis CI上添加令牌
获得需要的令牌后，用github账号登录travis CI，开启对应项目服务
进入项目，在More options中点击setting
添加令牌
4.推送项目文件
在项目根目录
git add .
git commit -m 修改配置文件
git push origin master:dev --force #dev修改为你指定的原始项目文件分支
推送成功后，travis CI会自动部署，可在Build History中查看
也可在github的commit记录中查看
至此，项目已经实现了自动部署，可以开始使用啦！
其他问题
自定义样式
如果你想要修改主题的样式，修改主题文件下source/themes/next/source/css/_custom/custom.styl文件，我已经在里面修改了部分样式，你可以根据自己情况增删。
千万不要写在主题的原样式文件上，这样以后升级主题所有样式就木有了！
配置bug解决
基础配置我没有遇到问题，如果你有问题，欢迎提issue。
travis CI自动部署遇到了一个问题：部署成功后，服务器上空白，响应代码304，除此之外没有任何报错。
我查了很多都没有类似情况，最后发现是travis CI无法自动安装NexT主题，导致打包后的文件中没有js/css等资源。所以我直接把Next主题文件git add -f强制添加进了版本控制中，这样travis CI就可以加载主题资源了。（如果你有更好的方法，欢迎告诉我）
文档参考：
http://theme-next.iissnan.com/getting-started.html
http://hadronw.com/2018/05-27/travis-autodeploy-github-with-coding/
https://blog.csdn.net/Xiong_IT/article/details/78675874