一、前言
使用hexo + gitPages
搭建好個人博客後,每當要發表一篇博文,第一步得手動使用hexo g
命令生成靜態網頁,然後還得通過hexo d
命令將靜態文件推送到GitHub
遠程倉庫,雖然不算繁瑣且可以編寫批處理命令進行簡化,但是有更簡單的,爲何不用呢?
我們可以通過 Travis CI
實現自動化構建自己的博客,我們只需將寫好的Markdown
格式的博文,我們將博文推送(push
)到GitHub
的時候,就可以觸發自己編寫好的腳本,實現自動化部署。
首先我們需要了解Travis CI
分爲兩種:
- Travis CI .org for public repositories【公共倉庫】
- Travis CI .com for private repositories【私有倉庫】
針對私有倉庫的當然是收費的,接下來我們使用的是 Travis CI .org
。
二、Travis CI 自動化構建實現
2.1 登錄Travis CI.org
首先我們使用GitHub
賬號登錄 Travis CI .org ,然後我們我們就進入如下界面:
第一次進入可能下面沒有你的倉庫列表,我們可以點擊右上角的Sync Account
即可。
2.2 添加自動化構建倉庫
其實上圖中已經看到了,我們將需要自動化構建倉庫前面的開關打開即可!當然我們可以回到主頁[點擊網站圖標],然後進行如下操作:
然後也就跳轉回你的Profile
界面了,我們打開自己要實現自動化構建的倉庫:
注意:需要是你的博客源碼的倉庫,我的博客源碼與網站的靜態文件是兩個倉庫,其實使用一個倉庫,選用兩個分支即可!
2.3 設置倉庫
我們需要打開下面的幾個開關:
說明:
- Build only if .travis.yml is present:只有在
.travis.yml
文件中配置的分支改變了才構建 - Build pushed branches:當推送完這個分支後開始構建
至此, 我們已經開啓了要構建的倉庫,但是構建完後,我們怎麼將生成的文件推送到github上呢?
我們使用Travis CI服務的目標是,我們只要將博文源文件推送到GitHub,Travis CI就自動構建並push
靜態文件到GitHub Pages!
接下來,我們就是爲Travis CI賦予操作GitHub的權利了!
2.4 GitHub生成Personal access tokens
我們登錄GitHub後進入設置界面,選擇最下面的Developer settings:
接下來就是生成Personal access tokens
:
我們需要爲此賦予權限,此處我除了刪除權限,其它一股腦都賦予了:
注意:Personal access tokens
生成後會在上方顯示出來,我們應當立即複製此祕鑰,否則你將再也看不到了!
2.5 在Travis CI配置Personal access tokens
當然,我們也可以在配置文件中書協自己的Personal access tokens,但是配置文件與源碼是放在一起的,別人獲得了此鑰匙就相當於可以控制你的GitHub了,當然非常不安全,因此還是建議在網站上進行配置!
2.6 編寫配置文件
配置文件的配置時非常靈活的,且方式多樣,但是的主要目標已經確定,只需在我的配置文件的基礎上修改自己的個人信息即可。我們首先在博客的根目錄下創建.travis.yml
文件,下面是我的配置信息:
language: node_js #設置語言
node_js: node
# 緩存node_modules文件夾,節省部署的時間
#cache:
# directories:
# - node_modules
# 源碼所在分支
branches:
only:
- master
# 安裝依賴
install:
- npm install hexo-cli -g
- npm install hexo-generator-searchdb --save
- npm install hexo-generator-feed --save
- npm uninstall hexo-generator-index --save
- npm install hexo-generator-index-pin-top --save
- npm install
# 執行的命令
script:
- hexo clean
- hexo generate
# 部署
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_TOKEN # Set in travis-ci.org dashboard, marked secure
keep-history: true
local-dir: public
repo: fxb577328725/fxb577328725.github.io # 你的GitHub Page倉庫地址
target-branch: master
至此,一切就緒!你可以編寫一篇博文,然後推送到GitHub進行測試,如果你查看的比較快的話,你還可以看到Travis CI網頁上執行的全過程,當然最終也可以看到其全貌!
注意:構建成功不完全代表部署成功了,你需要等一下查看個人博客確認一下!