Hexo+GitHub搭建靜態博客平臺(六)-使用Travis CI實現自動化部署

一、前言

使用hexo + gitPages搭建好個人博客後,每當要發表一篇博文,第一步得手動使用hexo g命令生成靜態網頁,然後還得通過hexo d命令將靜態文件推送到GitHub遠程倉庫,雖然不算繁瑣且可以編寫批處理命令進行簡化,但是有更簡單的,爲何不用呢?

我們可以通過 Travis CI 實現自動化構建自己的博客,我們只需將寫好的Markdown格式的博文,我們將博文推送(push)到GitHub的時候,就可以觸發自己編寫好的腳本,實現自動化部署。

首先我們需要了解Travis CI分爲兩種:

針對私有倉庫的當然是收費的,接下來我們使用的是 Travis CI .org

二、Travis CI 自動化構建實現

2.1 登錄Travis CI.org

首先我們使用GitHub賬號登錄 Travis CI .org ,然後我們我們就進入如下界面:


6_2.1

第一次進入可能下面沒有你的倉庫列表,我們可以點擊右上角的Sync Account即可。

2.2 添加自動化構建倉庫

其實上圖中已經看到了,我們將需要自動化構建倉庫前面的開關打開即可!當然我們可以回到主頁[點擊網站圖標],然後進行如下操作:


6_2.2-1

然後也就跳轉回你的Profile界面了,我們打開自己要實現自動化構建的倉庫:


6_2.2-2

注意:需要是你的博客源碼的倉庫,我的博客源碼與網站的靜態文件是兩個倉庫,其實使用一個倉庫,選用兩個分支即可!

6_2.2-3

2.3 設置倉庫


6_2.3-1

我們需要打開下面的幾個開關:


6_2.3-2

說明:

  • 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:


6_2.4-1

接下來就是生成Personal access tokens


6_2.4-2

我們需要爲此賦予權限,此處我除了刪除權限,其它一股腦都賦予了:


6_2.4-3

注意:Personal access tokens生成後會在上方顯示出來,我們應當立即複製此祕鑰,否則你將再也看不到了!


6_2.4-4

2.5 在Travis CI配置Personal access tokens


6_2.5

當然,我們也可以在配置文件中書協自己的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網頁上執行的全過程,當然最終也可以看到其全貌!

注意:構建成功不完全代表部署成功了,你需要等一下查看個人博客確認一下!


6_2.6

求贊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章