×
广告

使用Travis CI持续部署Hexo博客

96
从这到那
2017.07.26 17:50* 字数 934

思路

将Hexo源码和发布代码放到一个仓库的不同分支,便于一一对应,也是对博客源码的备份。这里我使用Github Pages来展示自己的博客,并指定自定义域名。
使用Travis的配置,当仓库push后自动部署,不用手动发布。

整体流程

一个仓库两个分支

1.新建仓库,为了方便我们可以将仓库名命名为 username.github.io,其中username是你的github的id,可以在右上角查看,图中红圈处。如果是使用自定义域名的话,其实仓库名称可以随便取名,为了方便我们不要随便取名。创建仓库的时候我们初始一个readme文件,这样方便我们新建分支操作。

github_id

2.创建一个新分支,这里不再赘述怎么创建新分支。例如我创建的新分支:blog-source
3.现在我们有两个分支,一个默认的master分支,一个blog-source分支。blog-source分支用来存放我们的源码,master是部署后的文件。将blog-source设置为默认分支。在仓库的 settings->Branches->Default branch中设置。
4.将仓库clone到本地
5.在本地安装Hexo,具体安装步骤和配置在下文。
6.Hexo配置好了之后,第一次我们先手动部署,hexo d 。(如果你集成了Travis就不需要手动部署了,只需要git push 就行了。)

这样我们就有两个分支了一个源码分支和一个部署分支。换了电脑我们只要将仓库克隆下来就可以操作了,配置文件也不会丢失。日常操作流程:git add . git commit -v git push hexo g -d

Github Pages

仓库的settings中开启Github Pages

开启之后如果你的仓库名就是 username.github.io的话,就可以直接访问这个地址预览你的博客了。

自定义域名

首先你要有自己的域名,域名怎么注册呢?有很多选择,有GoDaddy阿里云华夏名网等等。
如果使用的是国外的域名注册商的话可以使用DNSPod的免费服务来接管域名注册商的DNS解析。这样国内会快一点。

在仓库中填上自定义域名


在域名解析网站后台添加CNAME解析
![]https://raw.githubusercontent.com/gl09025/image_respository/master/2017%E5%B9%B47%E6%9C%8826%E6%97%A5/%E4%BD%BF%E7%94%A8Travis%20CI%E6%8C%81%E7%BB%AD%E9%83%A8%E7%BD%B2Hexo%E5%8D%9A%E5%AE%A2/dns_cname.png

重要的一步,我们要在你的Hexo仓库的source文件夹下添加名为CNAME 的文件,注意全部大写,里面内容就写你的自定义域名。如果没有这个文件,每次推送自定义域名都会回到初始的username.github.io

Hexo安装和配置

参照官方文档来初始化一个Hexo项目

$ hexo init <folder>
$ cd <folder>
$ npm install

后面的配置参照官方文档的说明来定制自己的配置。官方文档

一般我们都是找到自己喜欢的主题,然后配置主题。
常用的hexo命令

hexo g//生成静态文件
hexo s//开启本地server预览
hexo d//部署

Travis

其实配置很简单,我们在官网使用github账号授权登录,hexo添加配置文件就可以了。
1.登录官网,使用github账号登录。
2.添加仓库,这里我使用过所以会有,一些选项

3.选中博客仓库



4.设置选项



5.在github添加Access Token,在右上角账号的settings->Personal access tokens.点击generate new token来生成新token
选择仓库权限就可以。

生成之后一定要保存好,因为只会出现一次,丢失了就只能再重新生成了。

6.回到Travis官网,在设置中填入刚复制的token,取一个名字,这个名字需要写到下面的配置文件中。


7.在你的hexo博客源码中添加配置文件.travis.yml
你需要修改的是git的配置信息。
要使用https协议的仓库地址,使用ssh仓库地址会失败。
注意这一行git push --force --quiet "https://${githubblog}@${GH_REF}" 中的githubblog就是你刚在token那里取的名字,要对应上

language: node_js
node_js: stable

# S: Build Lifecycle
install:
  - npm install


#before_script:
 # - npm install -g gulp

script:
  - hexo g

after_script:
  - cd ./public
  - git init
  - git config user.name "ganli"
  - git config user.email "gl09025@gmail.com"
  - git add .
  - git commit -m "Update docs"
  - git push --force --quiet "https://${githubblog}@${GH_REF}" master:master
# E: Build LifeCycle

branches:
  only:
    - blog-resource
env:
 global:
   - GH_REF: github.com/gl09025/hexo-blog.git

配置完成后推送到仓库中,我们就能看到网站中在部署了。

个人学习
Web note ad 1