前言
什么是Hexo，什么是TravisCI就不介紹了，不知道的自行Google。因?yàn)樽约含F(xiàn)在的筆記本快要退休了，工作公司一臺電腦，自己一臺，所以就想著能不能在不同電腦上都能愉快的寫自己的博文。查了一圈，把Hexo放在阿里云上，每次編寫好md文件再拷到服務(wù)器發(fā)布算比較好的方式了，但不是人人都是學(xué)生黨能買到這么便宜的服務(wù)器，寫個(gè)博客買臺服務(wù)器也不劃算，恰好自己最近在弄Jenkins，最后就決定采用TravisCI來自動(dòng)化部署博文了。
本地環(huán)境安裝（Windows）
Hexo依賴Node.js，另外需用Git來進(jìn)行版本控制，下載對應(yīng)系統(tǒng)的Node.js和Git一路確定安裝即可~~
安裝完成后，使用以下命令確認(rèn)是否安裝成功，成功會(huì)輸出具體的軟件版本
node -v
git --version
確認(rèn)無誤后，這里使用 Git bash 來執(zhí)行之后的操作，不使用CMD的原因是我使用CMD的過程中出現(xiàn)了permission denied等一些估計(jì)和權(quán)限有關(guān)的錯(cuò)誤。Git bash 是Windows下的命令行工具，如下所示
安裝Hexo
npm install hexo-cli -g
完成后進(jìn)入一個(gè)新目錄存放博客資源，這里我放在D盤下
cd d:
hexo init blog
cd blog
npm install
hexo server
若一切正常，你將會(huì)看到如下輸出
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
打開瀏覽器輸入地址http://localhost:4000/，你將會(huì)看到
開始博客
編寫博客
Hexo編寫博客很簡單，打開一個(gè)新的git bash，切換到blog目錄，使用下面的命令可以初始化一篇博客的md文件，產(chǎn)生的源碼位置在\blog\source_posts下
hexo new post test
使用編輯器打開文件，適當(dāng)編輯
---
title: test
date: 2018-11-26 22:50:36
tags:
---
### 這是測試文檔
刷新http://localhost:4000/頁面，會(huì)發(fā)現(xiàn)新建的測試博客已經(jīng)生效
博客站點(diǎn)的一些基本信息，可以在根目錄的_config.yaml中配置，如
title: 與誠的博客小站
subtitle: To be honest ~~~
language: zh-CN
note:key和value之間有空格，更多的使用方式詳見Hexo的官方文檔。編寫博客使用的是markdown，具體的語法可以自行查詢，都比較簡單，簡書一早也就支持了markdown語法，詳細(xì)介紹見這里
主題定制
Hexo有很多優(yōu)秀的主題，可以在主題頁面選擇一款你鐘愛的主題。這里我選擇的是經(jīng)典的NexT主題，因?yàn)橹蟮淖詣?dòng)化部署，Hexo和主題都是即安即用的，本地的配置不再起作用，所以用自己的github賬號fork一份NexT主題的代碼，在這上面更新個(gè)人配置。按NexT的使用文檔一步一步配置就可完成主題的定制，使用hexo server 重啟，刷新頁面，就可以看到主題生效了，所有配置完成后就可以推送自己的Github倉庫中。具體配置可以參考我的配置文件。
NexT由iissnan開發(fā)，現(xiàn)在已經(jīng)交給組織，這里使用文檔有個(gè)別有誤的地方，官方使用文檔最近還在更新中。
在線部署
以上都只能在本地訪問我們的博客，要想在互聯(lián)網(wǎng)上都能訪問到，需要有一個(gè)博客托管的地方，這里使用免費(fèi)的Github Pages來部署博客。
SSH key 配置
每次操作使用賬號密碼比較麻煩，這里先配置ssh密鑰來免密訪問Github和Coding。首先配置一下用戶名和郵箱。
git config --global user.name "your name"
git config --global user.email "youremail@example.com"
使用命令行生成SSH key或者Git GUI工具的幫助--》show ssh key--》generate key，產(chǎn)生的文件具體位置在C:\Users\用戶名.ssh下
ssh-keygen -t rsa
按提示一路回車即可?；蛘?/p>
拷貝一份生成的id_rsa.pub公鑰信息到github和coding賬號中。
驗(yàn)證ssh是否生效
ssh -T git@github.com
Hi renyuzh! You've successfully authenticated, but GitHub does not provide shell
access.
創(chuàng)建托管倉庫
Github中創(chuàng)建一個(gè)倉庫名為yourname.github.io的倉庫
發(fā)布配置
Hexo支持 Git、Heroku、Rsync、OpenShift、FTPSync 等部署方式，這里使用Git，先安裝對應(yīng)的插件
npm install hexo-deployer-git --save
在博客根目錄下有一個(gè)_config.yaml文件，拉到最后配置關(guān)聯(lián)倉庫地址
deploy:
type: git
repo: git@github.com:renyuzh/renyuzh.github.io.git
branch: master
保存配置后使用命令發(fā)布
hexo generate
hexo deploy
或者
hexo g -d
第一行命令將source目錄中的markdown文件轉(zhuǎn)化為html文件，第二行將內(nèi)容發(fā)布到配置的倉庫中。本質(zhì)上pages展示的是public中的內(nèi)容，所以不使用hexo deploy的方式，直接將public 中的內(nèi)容push到遠(yuǎn)程倉庫也是一樣的效果。訪問https://renyuzh.github.io，預(yù)覽最新的博客
自定義域名
自帶的二級域名稍微難看點(diǎn)，我們可以自己購買想要的域名，價(jià)格幾元到幾萬不等，這里使用在阿里云上購買的域名，登錄阿里云賬號，進(jìn)入控制臺，選擇左側(cè)域名
首先完善域名服務(wù)里的信息模板以便進(jìn)行實(shí)名認(rèn)證。然后選擇自己購買的域名，點(diǎn)擊解析，新建兩個(gè)CNAME指向yourname.github.io地址，同時(shí)在Github的倉庫根目錄新建一個(gè)CNAME文件，內(nèi)容是你的域名地址。等待10分鐘后就可以使用我們購買的域名訪問博客了。
TravisCI
TravisCI是開源的持續(xù)集成項(xiàng)目，和Github的整合度很高，使用持續(xù)集成開源自動(dòng)化的發(fā)布構(gòu)建項(xiàng)目。整個(gè)自動(dòng)化部署的原理很簡單：
- 新建分支blog-source維護(hù)源碼，一旦有push等更改操作時(shí)通知TravisCI拉取源碼
- TravisCI根據(jù)分支blog-source中.travis.yml配置信息自動(dòng)構(gòu)建發(fā)布博客，再把內(nèi)容推送到master分支上
首先使用Github賬號登錄TravisCI官網(wǎng)，同步我們的Github項(xiàng)目，開啟pages項(xiàng)目
要想TravisCI有操作Github的權(quán)限，必須使用Github提供的Personal access tokens，如圖所示在Settings-》Developer settings下
復(fù)制token信息，添加到對應(yīng)的TravisCI項(xiàng)目中，這里只選擇push時(shí)觸發(fā)自動(dòng)構(gòu)建
上面說到源碼是托管在blog-source分支中的，生成的文件放在master分支中，現(xiàn)在任意打開一個(gè)目錄，初始化git倉庫，在本地新建分支，配置好.travis.yml文件即可推送到Github中
git init
git remote add origin git@github.com:renyuzh/renyuzh.github.io.git
git checkout -b blog-source
分支中，復(fù)制原blog根目錄下的db.json、package.json、source目錄以及.travis.yml和_config.yml配置文件，這些是必須的
language: node_js
node_js: stable
# assign build branches
branches:
only:
- blog-source
# cache this directory
cache:
directories:
- node_modules
#- themes 主題沒有更改時(shí)可以緩存
# S: Build Lifecycle
before_install:
- npm install -g hexo-cli # 安裝 hexo
- git clone https://github.com/renyuzh/hexo-theme-next.git themes/next # 主題沒有更改時(shí)不用每次都下載安裝一遍
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中對應(yīng)的占位符
- hexo deploy
# E: Build LifeCycle
同時(shí)更改_config.yaml中的發(fā)布地址
deploy:
type: git
repo: https://gh_token@github.com/renyuzh/renyuzh.github.io.git
將更改后的分支推送到遠(yuǎn)程分支
git add .
git commit -m"test TravisCI"
git push origin blog-source
可以看到TravisCI自動(dòng)部署成功了
參考文章
1.基于 Hexo 的全自動(dòng)博客構(gòu)建部署系統(tǒng)
2.Hexo遇上Travis-CI：可能是最通俗易懂的自動(dòng)發(fā)布博客圖文教程
3.hexo搭建個(gè)人博客--NexT主題優(yōu)化
4.30分鐘快速搭建hexo3.7.0 + next主題6.4教程(持續(xù)更新)
關(guān)于我
我的博客地址：與誠的博客小站
