一、說明
本系列文章將會詳細說明使用 Hexo + github pages 來搭建個人部落格，並對主題進行配置，然後使用 travis ci 來進行自動化部署的全過程。
搭建一個賞心悅目的部落格，寫文章和閱讀也會更加舒適，一次搭建，終生使用，而且還全程免費，何樂而不為呢。
通過本系列文章的學習，你將收穫一個免費且漂亮的個人部落格，並熟悉搭建、寫作、部署的全流程以及其中一些很好用的工具。
二、成品展示
這只是其中的一個主題，如果不喜歡，也可以很方便的切換其它主題。
hexo 主題相當豐富，可以在這裡選擇喜歡的主題進行切換即可。
三、前期準備
在開始搭建之前，需要準備以下幾樣東西：
- 本地安裝
node.js - 本地安裝
git - 一個
github賬號 - 建立一個
github倉庫 - 一個
travis ci賬號
已經有過安裝經驗的同學，可以根據自己情況選擇性的跳過部分章節。
本地安裝 node.js
windows 系統可以在這裡下載 installer 安裝包進行安裝。
mac 系統可以在這裡下載 pkg 安裝包，也可以使用 homebrew 進行安裝：
brew install node
然後在命令列輸入以下命令來驗證是否正確安裝:
node -v
本地安裝 git
windows 系統可以從這裡下載安裝包後進行安裝。
mac 系統可以從這裡下載安裝包進行安裝。
也可以使用 homebrew 進行安裝：
brew install git
輸入以下命令來檢視是否正確安裝好了 git ：
git --version
然後設定自己的使用者名稱和郵箱：
git config --global user.name "你的使用者名稱"
git config --global user.email "你的公司或個人郵箱"
github 賬號
首先，需要註冊一個 github 賬號，點選這裡。
填寫好使用者名稱和密碼，驗證完成後，便可以將一個 github 賬號收入囊中。
建立好賬號之後，我們還需要把我們本地的 SSH Key 新增到 github 中去，這樣我們之後才能有許可權將原生程式碼推送到 github 中。
先本地生成一對 RSA 金鑰：
ssh-keygen -t rsa -b 4096 -C "你的郵箱"
然後用食指敲擊你的Enter鍵三次，記住，要用食指，但別問為什麼。
找到你剛才建立的金鑰，windows 使用者可以在 C://使用者//admin//.ssh 目錄下查詢，mac 使用者可以在 ~/.ssh 目錄下找到。複製 id_rsa.pub 檔案裡的資訊，然後到這裡新增新的 SSHKEY 。
把我們剛才的 key 複製進行後儲存即可。
建立倉庫
點選這裡，建立一個新的倉庫。
倉庫名稱可以隨便取，比如：blog、my-blog，隨便取一個就好。倉庫說明也可以隨便寫，可以大概描述一下你這個倉庫是做什麼的。可以參考一下我的倉庫
然後把倉庫地址記下來，是下圖中箭頭標示的 git 開頭的地址，後面需要用到。
建立好倉庫之後，就可以進行下一步了。
travis ci 賬號
travis ci 賬號是跟 github 賬號關聯的，所以需要先建立好 github 賬號，建立好之後，點選這裡進行賬號關聯登陸。
在設定裡進行一次賬戶同步：
同步完後重新整理一下頁面，剛才建立的倉庫應該就會出現在這裡：
四、安裝 Hexo
hexo 是一款靜態網站生成工具，可以根據設定的主題樣式和配置檔案，來生成豐富多彩的網頁，通常配置檔案設定好之後不需要經常修改，我們只需要負責寫好我們的博文，寫好之後就能使用命令一鍵生成網站，而且還可以為所欲為的切換主題，可以說是寫部落格的一大利器。
hexo 的安裝其實很簡單，只需要輸入以下咒語：
npm install -g hexo-cli
然後輕輕的敲擊你的Enter鍵，hexo 便能成功的安裝在你的電腦中。
可以使用以下命令進行驗證：
hexo -v
五、使用 hexo 搭建部落格
選擇一個準備放置部落格網站的目錄，然後使用以下命令來初始化一個專案：
hexo init breeze-blog
cd breeze-blog
npm install
該命令將會在當前目錄下，生成一個名為 breeze-blog 的新目錄，當然，你可以把這個名字換成任何你想要的名字，並將 hexo 的初始化檔案寫入其中。
新建完成後，breeze-blog 資料夾的目錄如下：
.
├── _config.yml
├── package.json
├── node_modules
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml 是配置檔案，裡面有很多可以配置的資料，這裡暫時不多介紹，後面的文章裡會進行詳細說明。
package.json 是應用程式資訊，通常不需要關心。
node_modules 用來存放 node 相關的模組，通常不需要關心。
scaffolds 裡面是模版檔案，也就是每次新建文章時，都會根據模版檔案來建立對應的 md 檔案，這一點也會在後續的文章裡進行詳細介紹。
source 是資原始檔夾，用來存放使用者資源的地方。除 _posts 資料夾之外，開頭命名為 _ (下劃線)的檔案 / 資料夾和隱藏的檔案將會被忽略。
theme 是主題資料夾，每個主題的配置都會有些不一樣，需要根據具體主題情況來定，後續介紹主題的文章裡會有說明。
在 breeze-blog 目錄下使用以下命令來執行我們的部落格：
hexo server
在預設情況下，服務會使用 4000 埠，如果已經被佔用，也可以新增 -p 引數來換用其它埠：
hexo server -p 8080
開啟 http://localhost:4000 即可訪問我們生成的網站了。
這樣，我們的部落格就搭建起來了。
六、部署到 github pages
github pages 可以理解為 gayhub github 提供的免費網頁空間，可以用來存放你的靜態網頁檔案，並通過 https://使用者名稱.github.io/專案名/ 的方式來訪問，比如我新建立的 blog 地址就是：https://mfrank2016.github.io/breeze-blog/。
利用 github pages 就能建立我們的免費部落格站點了，至於為什麼要使用免費站點，而不選擇購買伺服器來搭建，是因為根據之前使用伺服器經常忘記續費，導致部落格資料丟失，損失慘重。github 已經穩定執行了很多年，是全球最大的 同性交友網站 開發者網站，他們的服務值得信賴。而且是免費的。
我們之前已經註冊好 github 的賬號並建立好了對應的倉庫，本地也安裝好了 git ，現在讓我們來把他們利用起來。（如果還沒有完成的同學可以往上面翻翻，先完成前面的步驟）
注意：有兩種型別的
github pages，一種是使用使用者名稱.github.io作為專案名，一種是使用其它名稱。雖然看起來只是名字不一樣，但兩種方式其實是有差異的，前一種方式裡，網頁靜態檔案只能存放在 master 分支，所以如果想要把部落格原始檔也存到同一個倉庫，必須使用其它分支來存放，相應的 travis ci 監聽和推送的分支也需要修改，當然也可以使用另一個新的倉庫來存放。後一種方式則沒這個限制，通常使用名為gh-pages作為分支名，Hexo內預設設定的分支也是叫這個名字。這裡我們使用的是後一種方案，即原始檔和生成的網頁靜態檔案存放在同一個倉庫，原始檔在master分支，靜態檔案在gh-pages分支。
首先，我們將本地的檔案推送到 github 上。
在 breeze-blog 目錄下，初始化 git 倉庫，將現有檔案新增到 git 倉庫中，並建立 gh-pages 分支：
cd breeze-blog
git init
git add .
git commit -am"init blog"
git remote add origin 倉庫地址
倉庫地址是前面我們建立倉庫時說過的地址，比如我的地址是： git@github.com:MFrank2016/breeze-blog.git ，把它複製到這裡來替換即可。
然後我們使用最後一句咒語，把程式碼推送到倉庫中去。
git push -u origin master
如果你的倉庫原來已經有資料了，可以新增 -f 引數來強制推送，但這樣會使得你原來的資料丟失，所以慎用。
git push -f -u origin master
然後建立一個新的本地分支 gh-pages，並關聯遠端分支：
git checkout -b gh-pages
git push -u origin gh-pages
⚠️不要改用其它分支名。
然後在專案 settings 頁面裡開啟 github pages：
這裡要選擇 gh-pages 分支，不要選 master 分支。
然後我們修改一下 hexo 的配置檔案(_config.yml)，找到對應的地方進行修改，指定我們的倉庫資訊，並修改 root 和 url 資訊。
url: https://mfrank2016.github.io/
root: /breeze-blog/
deploy:
type: 'git'
repo: git@github.com:MFrank2016/breeze-blog
branch: gh-pages
把這裡的 repo 地址修改為你的倉庫地址即可。
安裝 hexo-deployer-git：
cd breeze-blog
npm install hexo-deployer-git --save
萬事具備，發車！
hexo clean && hexo generate
hexo deploy
執行完成後，我們的部落格檔案就順利部署到 github pages 上了，現在我們開啟下面網址來檢視我們的部落格效果：
https://使用者名稱.github.io/專案名/
之後每次我們新增或修改完本地檔案後，使用：
hexo clean && hexo g -d
即可重新生成專案檔案，並推送到 github 專案的 gh-pages 分支，為了備份資料，也方便我們在不同裝置上進行編輯，最好將我們修改的檔案推送到 master 分支進行儲存：
git checkout master
git add .
git commit -am "這裡可以寫一下修改的備註資訊"
git push
七、使用 travis ci 進行自動化部署
如果我們每次都按前面的方式進行操作，也會略顯麻煩，使用 travis ci 後，可以將前面部署的步驟自動化，我們只需要將本地修改的檔案推送到 github 倉庫，就會觸發 travis ci 的自動部署。
travis ci 的配置也很簡單，而且只需要配置一次，之後就不需要修改了。
首先，我們需要把_config.yml檔案裡的repo資訊註釋一下，不需要在配置檔案裡指定倉庫地址，travis ci 會直接在其監聽專案上進行部署。
deploy:
type: 'git'
# repo: git@github.com:MFrank2016/breeze-blog
branch: gh-pages
在本地部落格目錄下建立一個名為 .travis.yml 的檔案，與 _config.yml 要在同級目錄。
然後在檔案中寫入以下內容：
sudo: false
language: node_js
node_js:
- 12
cache: npm
branches:
only:
- master # build master branch only
script:
- hexo generate
deploy:
provider: pages
skip-cleanup: true
github-token: $GH_TOKEN
keep-history: true
on:
branch: master
local-dir: public
這裡沒有任何東西需要修改，直接複製貼上即可。
接下來，需要在 travis 裡配置一個環境變數，GH_TOKEN 。
前面我們已經將 travis 關聯了 github 賬號，並同步了專案，如果操作正確，這裡應該會出現我們的倉庫資訊。
這裡的 access token 是指 github token，可以在這裡獲取：
選好後，點選 generate 即可生成一個新的 access token，這個 token 即是用於許可權驗證的，好好儲存，不要洩露，千萬不要直接寫到 config 檔案裡，而且之後是無法進行檢視的，所以需要記錄在一個安全的地方。
建立好之後，把這個 token 填寫到前面的 travis ci 的專案環境變數中儲存，這樣一切就準備好了。
現在讓我們在本地建立一篇新的部落格，然後推送到遠端倉庫：
cd breeze-blog
git checkout master
hexo new "my first blog"
git add .
git commit -am"add a new blog"
git push
然後我們可以在 travis ci 中看到構建過程被觸發了，等待一會即可完成部署，然後再開啟我們的部落格，檢視一下我們新生成的文章是否已經在上面了。（瀏覽器有快取，所以可能需要重新整理幾次才有效果）
小結
整個過程看起來有些麻煩，距上次部署部落格已經有很長時間了，我也是摸索了幾次後才大致掌握，因為不想每次都重新來一遍，所以還是記錄一下為好，利人利己。
寫部落格是一種生活態度，記錄並整理生活和程式設計中的心得和經驗並分享，在漫漫人生路上留下自己一路走來的印記，這樣以後再回過頭來看時，就不會感慨時間都去哪了。如果能因此遇到有共同興趣愛好的人，那也將會是人生裡的不錯點綴。
這裡只是完成了部落格搭建和自動化部署的過程，關於部落格的配置和主題的配置以及部落格寫作的一些技巧會在後面的文章中進行說明，敬請關注～
