手把手教你使用Travis CI自動部署你的Hexo博客到Github上

---

title: 利用Travis CI解決家裏和公司兩地寫博客的麻煩-填坑教程
categories: 利用Travis
date: 2017-02-16 16:24:03
tags:

• 利用Travis
• Hexo
• Nodejs

---

前言

前面一篇文章介紹了在github上使用hexo搭建博客的基本環境和hexo相關參數設置等,博客基本上是能夠完美運行了。可是，有一點是不太好，就是源碼同步問題，若是在不一樣的電腦上寫文章會很是不方便,必須藉助U盤,由於個人linux環境是配在虛擬機裏面的 ,要把虛擬機文件裝在U盤裏面,這樣才能解決家裏和公司寫博客的麻煩,後來搜索發現你們都用Travis CI 自動部署博客,簡單說就是把網站源碼放在dev分支,hexo生成的靜態文件仍是保留在master分支,這個沒辦法改變 ,本地增長.travis.yml文件,只要有了這個文件,你每次push代碼Travis CI都能幫你從dev分支取出代碼部署到master分支去，代碼部署後的效果請點擊，https://github.com/wangxujun1...

Travis CI 工做原理

簡單來講，Travis CI原理就是當你每次提交commit到在github後，它會自動檢測你的提交，同時根據的配置文件，生成一個Linux虛擬機來運行你的命令，一般這些命令用於測試，構建等。在咱們的要求下，就能夠用它運行一些hexo g d之類的命令來自動生成、部署我靜態網頁。

設置Personal Access Token

Personal Access Token 是github API訪問的token ,利用這個token 可讓Travis CI check 你的代碼 ，push 你的代碼.
新建Personal Access Token,點擊右上角頭像旁邊的三角，在菜單中點擊「Setting」，進入設置頁面

點擊左側欄的最下面的「Personal access tokens」，建立Personal access tokens,點擊右上角的「Generate new token」，輸入用戶密碼，進入「New personal access token」頁面,

設置Token description（其實就是名稱），選擇相應的權限，以下圖所示,

點擊「Generate token」按鈕，生成Personal access tokens。以下圖中紅線標註的部分。注意：這行token只會在剛剛建立完成後顯示一次，之後再也不顯示。所以，複製並保存到本地。

配置Travis CI

登陸並配置Travis CI(https://travis-ci.org/)將鼠標...，在彈出的菜單中點擊「Accounts」，將會顯示你在GitHub上的倉庫。 找到本身的博客項目，點擊X號，將其變成√號。再點擊右側的齒輪，進入該倉庫的配置頁面。 在項目的設置中開啓Build only if .travis.yml is present這一項,

本地安裝Travis

#刪除舊版ruby
yum remove ruby ruby-devel -y
wget  http://cache.ruby-lang.org/pub/ruby/ruby-2.4-stable.tar.bz2
tar xvf  ruby-2.4-stable.tar.bz2 
cd ruby-2.4.0/
yum install  openssl-devel
./configure --prefix=/usr/local/ruby --with-opessl
make && make install

# 安裝travis
gem isntall travis

新建配置文件

首先打開博客項目文件夾，在項目根目錄新建.travis.yml配置文件。

$ cd /root/blog
$ touch .travis.yml

登陸travis

travis login --auto

而後會提示輸入github的用戶名和密碼

新建變量

在項目根目錄下執行:

# 這裏的 REPO_TOKEN 是變量名,在後面的配置文件中會用到
# TOKEN 是上面github生成的Token
travis encrypt 'REPO_TOKEN=<TOKEN>' --add

此操做會在.travis.yml文件中添加下面的信息

env:
global:
  secure: fxBE17yzFhC2+FjwVLYbgIhggyfliv3dFCDozTJD7U3n...

Travis配置文件

vim  .travis.yml

language: node_js
node_js:
  - "4"  # nodejs的版本
branches:
  only:
  - dev  # 設置自動化部署的源碼分支
env:
  global:
    secure: oQSAOgn7y+FUjwpudsPYKKpxOAiIbztL4RB80vZjX05X0c52+S1nsfxtC6nkvNHfhr4WsX/qY6CE+h0rFyYvMXXjVsGgq9HH4wYgi7xPl7w+b+HQo6bc8tu3JHrx+cML9prfz2BwqjaCmKlMff7ciif+Gf75fgLi9g0o+pF8gWATwi4wfb4YB+zIRU/lisbLt+M2FZp9+rY/B0Bl1fMuBZv6+J53b3BJJ3ZvCS7ifLcnXBowKqpk+ubRJUcsYT0qRjE7/++9ipKpiQvTt1ItkDKDAqxe+ISMbBL4UwNIJD/PpqEIrxFpljEn/BRtn4XX3QI3RWnqxlDBv/ojHzvI4UTz83rR+iYgTAqaPokByV+1m+BQtTtjbTYnCGBpLtFDXec8NvAY0DD64cCXhhjouRPSinEqEMOxxcQ6f5OYhEG1zQ3l1paLyBKGpcjuydD0tlefcXUO/6Kb8zQRLFadeJ1VfWAZVfOX68I9o4SgE/d8TPZi/d8XaHc1646eWb8UVr4GUz2oj1tot8+NI+3J4IwTT5okXLAQpcWqveNin5+yegWeef6aBydoy7NtA/yZYdAgRbPJUa7Mq5fwO498Wx1vY8lJpKCsJlwFYqj1sX365PsWcHiVB9K+KMoZFhlk3BXpPPeHgpxR6vt6QyrouD23tU6ZBJXjuRDT4INSjEQ=
    
before_install:
- export TZ='Asia/Shanghai'  # 設置時區
- npm install -g hexo
- npm install -g hexo-cli
- npm install hexo-server
before_script:
# 設置github帳戶信息
- git config --global user.name "wangxujun163163" #設置github用戶名
- git config --global user.email wangxujun163163@163.com #設置github用戶郵箱
# github倉庫操做
- sed -i'' "s~git@github.com:wangxujun163163/wangxujun163163.github.io.git~https://${REPO_TOKEN}:x-oauth-basic@github.com/wangxujun163163/wangxujun163163.github.io.git~" _config.yml
# 安裝依賴組件
install:
- npm install
# 執行的命令
script:
- hexo clean
- hexo generate
# 執行的成功後執行 
after_success:
- hexo deploy

上傳網站源碼到github dev分支

新建倉庫blog，將原來博客目錄下的如下內容複製到blog文件夾中

mkdir  github
cd github/
git init blog
cd blog
cp  /root/blog/*   .  -r

修改.gitignore文件，取消對node_modules文件夾的忽略。（即刪除對應的行）

# 將github倉庫改成本身的博客倉庫
git remote add origin git@github.com:wangxujun163163/wangxujun163163.github.io.git
# 添加文件
git add .
# 提交修改
$ git commit -m "test travis"
# 推送至遠程倉庫dev分支
[root@localhost blog]# git push -u origin dev
error: src refspec dev does not match any.
error: 沒法推送一些引用到 'git@github.com:wangxujun163163/wangxujun163163.github.io.git'

[root@localhost blog]# git branch  -a  #查看本地倉庫的分支
* master
[root@localhost blog]# git push origin master:dev

git  commit  -m   "modify nodejs version"   .travis.yml 
[root@localhost blog]# git push origin master:dev

我push代碼的時候發生了錯誤,忘記指定本地的分支了

push本地的代碼至遠程倉庫以後，在https://travis-ci.org後臺查看...。