基于TravisCI自动化部署Hexo博客到Github

前言

什么是Hexo,什么是TravisCI就不介绍了,不知道的自行Google。因为自己现在的笔记本快要退休了,工作公司一台电脑,自己一台,所以就想着能不能在不同电脑上都能愉快的写自己的博文。查了一圈,把Hexo放在阿里云上,每次编写好md文件再拷到服务器发布算比较好的方式了,但不是人人都是学生党能买到这么便宜的服务器,写个博客买台服务器也不划算,恰好自己最近在弄Jenkins,最后就决定采用TravisCI来自动化部署博文了。

本地环境安装(Windows)

Hexo依赖Node.js,另外需用Git来进行版本控制,下载对应系统的Node.js和Git一路确定安装即可~~

安装完成后,使用以下命令确认是否安装成功,成功会输出具体的软件版本

1
2
node -v
git --version

确认无误后,这里使用 Git bash 来执行之后的操作,不使用CMD的原因是我使用CMD的过程中出现了permission denied等一些估计和权限有关的错误。Git bash 是Windows下的命令行工具,如下所示

安装Hexo

1
npm install hexo-cli -g

完成后进入一个新目录存放博客资源,这里我放在D盘下

1
2
3
4
5
cd d:
hexo init blog
cd blog
npm install
hexo server

若一切正常,你将会看到如下输出

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打开浏览器输入地址http://localhost:4000/,你将会看到


### 开始博客
#### 编写博客
Hexo编写博客很简单,打开一个新的git bash,切换到blog目录,使用下面的命令可以初始化一篇博客的md文件,产生的源码位置在\blog\source_posts下
1
hexo new post test


使用编辑器打开文件,适当编辑
1
2
3
4
5
6
---
title: test
date: 2018-11-26 22:50:36
tags:
---
### 这是测试文档


刷新http://localhost:4000/页面,会发现新建的测试博客已经生效

博客站点的一些基本信息,可以在根目录的_config.yaml中配置,如
1
2
3
title: 與誠的博客小站
subtitle: To be honest ~~~
language: zh-CN


note:key和value之间有空格,更多的使用方式详见Hexo的官方文档。编写博客使用的是markdown,具体的语法可以自行查询,都比较简单,简书一早也就支持了markdown语法,详细介绍见这里
#### 主题定制
Hexo有很多优秀的主题,可以在主题页面选择一款你钟爱的主题。这里我选择的是经典的NexT主题,因为之后的自动化部署,Hexo和主题都是即安即用的,本地的配置不再起作用,所以用自己的github账号fork一份NexT主题的代码,在这上面更新个人配置。按NexT的使用文档一步一步配置就可完成主题的定制,使用hexo server 重启,刷新页面,就可以看到主题生效了,所有配置完成后就可以推送自己的Github仓库中。具体配置可以参考我的配置文件
NexT由iissnan开发,现在已经交给组织,这里使用文档有个别有误的地方,官方使用文档最近还在更新中。
### 在线部署
以上都只能在本地访问我们的博客,要想在互联网上都能访问到,需要有一个博客托管的地方,这里使用免费的Github Pages来部署博客。
#### SSH key 配置
每次操作使用账号密码比较麻烦,这里先配置ssh密钥来免密访问Github和Coding。首先配置一下用户名和邮箱。
1
2
git config --global user.name "your name"
git config --global user.email "youremail@example.com"


使用命令行生成SSH key或者Git GUI工具的帮助–》show ssh key–》generate key,产生的文件具体位置在C:\Users\用户名.ssh下
1
ssh-keygen -t rsa


按提示一路回车即可。或者

拷贝一份生成的id_rsa.pub公钥信息到github和coding账号中。

验证ssh是否生效

1
2
3
ssh -T git@github.com
Hi renyuzh! You've successfully authenticated, but GitHub does not provide shell
access.

创建托管仓库

Github中创建一个仓库名为yourname.github.io的仓库

发布配置

Hexo支持 Git、Heroku、Rsync、OpenShift、FTPSync 等部署方式,这里使用Git,先安装对应的插件

1
npm install hexo-deployer-git --save

在博客根目录下有一个_config.yaml文件,拉到最后配置关联仓库地址

1
2
3
4
deploy:
type: git
repo: git@github.com:renyuzh/renyuzh.github.io.git
branch: master

保存配置后使用命令发布

1
2
3
4
hexo generate
hexo deploy
或者
hexo g -d

第一行命令将source目录中的markdown文件转化为html文件,第二行将内容发布到配置的仓库中。本质上pages展示的是public中的内容,所以不使用hexo deploy的方式,直接将public 中的内容push到远程仓库也是一样的效果。访问https://renyuzh.github.io,预览最新的博客


#### 自定义域名
自带的二级域名稍微难看点,我们可以自己购买想要的域名,价格几元到几万不等,这里使用在阿里云上购买的域名,登录阿里云账号,进入控制台,选择左侧域名

首先完善域名服务里的信息模板以便进行实名认证。然后选择自己购买的域名,点击解析,新建两个CNAME指向yourname.github.io地址,同时在Github的仓库根目录新建一个CNAME文件,内容是你的域名地址。等待10分钟后就可以使用我们购买的域名访问博客了。


### TravisCI
TravisCI是开源的持续集成项目,和Github的整合度很高,使用持续集成开源自动化的发布构建项目。整个自动化部署的原理很简单:
- 新建分支blog-source维护源码,一旦有push等更改操作时通知TravisCI拉取源码
- TravisCI根据分支blog-source中.travis.yml配置信息自动构建发布博客,再把内容推送到master分支上

首先使用Github账号登录TravisCI官网,同步我们的Github项目,开启pages项目


要想TravisCI有操作Github的权限,必须使用Github提供的Personal access tokens,如图所示在Settings-》Developer settings下


复制token信息,添加到对应的TravisCI项目中,这里只选择push时触发自动构建


上面说到源码是托管在blog-source分支中的,生成的文件放在master分支中,现在任意打开一个目录,初始化git仓库,在本地新建分支,配置好.travis.yml文件即可推送到Github中
1
2
3
git init
git remote add origin git@github.com:renyuzh/renyuzh.github.io.git
git checkout -b blog-source


分支中,复制原blog根目录下的db.json、package.json、source目录以及.travis.yml和_config.yml配置文件,这些是必须的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
language: node_js
node_js: stable

# assign build branches
branches:
only:
- blog-source

# cache this directory
cache:
directories:
- node_modules
#- themes 主题没有更改时可以缓存
# S: Build Lifecycle
before_install:
- npm install -g hexo-cli # 安装 hexo
- git clone https://github.com/renyuzh/hexo-theme-next.git themes/next # 主题没有更改时不用每次都下载安装一遍

install:
- npm install # 安装 package.json 中的插件

script:
- hexo generate

after_success:
- git config --global user.name "zhangrenyu"
- git config --global user.email "zrysunshine@gmail.com"
- sed -i "s/gh_token/${GH_TOKEN}/g" _config.yml #使用travisCI中配置的token替换掉_config.yml中对应的占位符
- hexo deploy
# E: Build LifeCycle


同时更改_config.yaml中的发布地址
1
2
3
deploy:
type: git
repo: https://gh_token@github.com/renyuzh/renyuzh.github.io.git


将更改后的分支推送到远程分支
1
2
3
git add .
git commit -m"test TravisCI"
git push origin blog-source


可以看到TravisCI自动部署成功了

参考文章

1.基于 Hexo 的全自动博客构建部署系统
2.Hexo遇上Travis-CI:可能是最通俗易懂的自动发布博客图文教程
3.hexo搭建个人博客–NexT主题优化
4.30分钟快速搭建hexo3.7.0 + next主题6.4教程(持续更新)

关于我

我的博客地址:與誠的博客小站


本文已结束 感谢您的阅读
赠人玫瑰,手有余香