如何快速搭建一個有域名且持續整合的hexo部落格(2.0版)

嗶譜嗶譜發表於2019-03-03

前言: 由於本人最近在學習vue,想把做出來的網頁放到一個有自己域名的網站上來供大家學習交流(裝B)。首先考慮的是租用雲主機,無奈雲主機貴的一逼,千幸萬苦終於找到一個便宜點的20塊錢一個月的國內主機。結果剛把新鮮買的域名繫結上去,過了一會就無法訪問了。一臉懵逼好嗎!居然需要備案,百度了一下備案週期差不多要一個月。。。玩毛!諮詢了一下,原來所有的國內的主機必須備案才能通過繫結的域名進行訪問。怪不得我的github上面的hexo部落格域名能夠訪問,原來因為github用的是國外的主機。。。我以前一直以為只有cn域名才需要備案來著?前端時間全部域名都要備案了,我還特意看了下我的hexo部落格(top域名),還能正常訪問,然後就導致我一直有這個認知誤區。。。

後來通過github上面的gh-pages終於將vue網頁展示了出來並繫結了自己的域名(重要的是沒有備案也沒有被封- -)。於是我就開始思考,能否將用於對vue網頁進行持續整合的Travis CI 用在hexo部落格上,於從而大大減少部落格更新的繁瑣步驟呢?結果發現真的大大減少了每次更新部落格的命令數量(感興趣的同學可以和我之前寫的1.0版進行對比),而且!!!hexo部落格的安裝與遷移過程也得到了最大的簡化,於是就有了這篇文章!

我的hexo部落格:Marathoner | 倉庫地址
使用的主題:Material

1. 安裝hexo

注: 由於本人的電腦是windows系統,之前一直是用的虛擬機器上的linux,覺得多此一舉,所以改換了windows上的github客戶端。所以本文的下列步驟全都是用windows系統進行的。

在安裝hexo之前,請確保你的系統安裝了GitNode.js,不多做贅述。

用Git Shell輸出下列命令,進行hexo腳手架的全域性安裝

npm install hexo-cli -g複製程式碼

2. 初始化hexo

讓我們新建一個hexo資料夾然後用Git Shell cd 到該目錄下,然後輸入下列命令進行hexo的初始化

hexo init複製程式碼

3. 建立github倉庫

直接在官網操作即可,本人是建立了一個以賬號名命名的zytx121.github.io的倉庫,因為貌似以前看到說只有以使用者名稱作為倉庫名才能展示網頁。後來發現是完全是謠言,你github下面任意一個倉庫都可以生成有自己獨一無二域名的展示網頁(感興趣的童鞋可以點選這篇文章),並不是說一個github賬號下只有一個倉庫才能有展示頁面,也不是說每個賬號的多個展示頁面只能有一個統一的域名。

3. 將github倉庫clone到本地

4. 將之前初始化的hexo檔案裡面的所有東西拷貝到github倉庫本地目錄下

到這裡,hexo部落格的準備工作就做的差不多了,下面該輪到Travis-CI登場了!

5. 使用Travis-CI對hexo進行持續整合

(1) 用github賬號登陸

這樣就將github與travis-ci進行了繫結,使其能都讀取你github中的倉庫資訊

(2) 開啟指定倉庫並進行相關設定

Build only if .travis.yml is present:是隻有在.travis.yml檔案中配置的分支改變了才構建

Build pushes:當推送完這個分支後開始構建

然後到github的setting頁面中完成Access Token的申請,將其作為環境變數GH_TOKEN的值存在這裡。

只需要repo這一項許可權即可。

(3) 建立travis設定檔案

最後,讓我們回到倉庫本地目錄,在該目錄下新建一個.travis.yml檔案

檔案內容如下:

language: node_js
node_js: stable

# Travis-CI Caching
cache:
  directories:
    - node_modules


# S: Build Lifecycle
install:
  - npm install

before_script:
 # - npm install -g gulp


script:
  - hexo g


after_script:
  - cd ./public
  - git init
  - git config user.name "yourusername"
  - git config user.email "youremail@xx.com"
  - git add .
  - git commit -m "Update docs"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
# E: Build LifeCycle

branches:
  only:
    - hexo
env:
 global:
   - GH_REF: github.com/zytx121/zytx121.github.io.git複製程式碼

看到這裡,我們就會發現travis其實就是一個幫你跑指令碼的雲主機命令列!

他按照我們指定的指令碼順序執行,先是install,再是before_scriptscript,最後是after_script.

branches指定了執行指令碼的分支。

全域性變數GH_REF指定了你的倉庫地址。

我們首先用npm install在 travis 這臺全新的主機上進行相關依賴的安裝,這裡就不需要重新再安裝一遍 hexo 然後進行初始化了。安裝完所需依賴之後,我們就可以直接使用 hexo 命令。

然後我們用hexo g命令來生成靜態檔案,生成的靜態檔案預設會被放在 public 目錄下。

我們cd到public目錄,用git init初始化倉庫,進行相關資訊的設定。

最後,travis-ci會將public目錄下的檔案全部 push 到你所建立倉庫的 master 分支上去。

詳細內容可以參考這篇文章 手把手教你使用Travis CI自動部署你的Hexo部落格到Github上

6. 將github倉庫本地目錄pull到hexo分支上去

這裡我使用的是PC客戶端,目錄下檔案變動會顯示,輸入Summary備註,點選Commit,然後點右上角的Publish即可。(注意,我們的部落格原始碼存放在hexo分支上,hexo生成的靜態網頁檔案存放在master分支。因為gh-pages的預設分支為master,但其實這是可以設定的。)

繫結域名

如果需要繫結自己的域名,只需要在根目錄下的/source/資料夾內新建一個CNAME檔案(需要大寫),然後在裡面寫上你的域名。儲存後一起push上去即可

然後,在倉庫設定中填入你的域名。

同時在你購買域名的伺服器管理控制檯中,新增如下2個解析:

主機記錄:@    記錄型別: A    記錄值:192.30.252.153     TTL: 10分鐘
主機記錄:www  記錄型別: A    記錄值:192.30.252.154     TTL: 10分鐘複製程式碼

這樣就完成了你的域名繫結。

關於404頁面:

同理,你可以在根目錄下的/source/資料夾內新建一個404.html檔案,然後在裡面寫上<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8"></script>並儲存。這樣,當你訪問部落格中不存在的頁面時,瀏覽器就會自動跳轉到騰訊的公益404頁面。

這樣就大功告成啦!

7. 等待Travis-CI執行指令碼

這樣就說明成功了,如果紅色則說明不成功。該頁面會顯示執行的命令列,如果出現錯誤就會報錯。

到這裡為止,部落格的搭建方法就介紹完畢了。之後每次需要更新發布文章的話,只需要重複第6步即可。

當你需要在其他電腦上更新部落格時,可參照下面的程式碼:

  1. $ git clone https://github.com/zytx121/zytx121.github.io //拷貝倉庫,在本地生成zytx121.github.io資料夾
  2. $ cd zytx121.github.io //進入該資料夾根目錄
  3. $ npm install(講道理其實如果只新增部落格文章,不進行hexo操作的話,這步其實可以省略。因為travis會在它的主機上安裝依賴,幫你生成靜態頁面。)

然後,你就可以在這臺新電腦上愉快的更新部落格辣~(≧▽≦)/~

與1.0版本的對比

  • 不需要安裝hexo-deployer-git外掛

  • 不需要每次部署部落格(hexo g)前都在本地生產靜態檔案(hexo d

  • 更換電腦後clone到本地後,只需要npm install安裝依賴,不需要安裝hexo,開箱即用。

  • 每次更新部落格文章後,你所需要做的只是將改動 push 到 hexo 分支,剩下的事 travis-ci 都會幫你做好。

由於持續整合大大簡化了更新hexo部落格的步驟,讓我又開始恢復了之前因為太麻煩而放棄更新的hexo部落格!!!

相關文章