【Hexo】使用Hexo+github pages+travis ci 實現自動化部署

目錄

• 1、說明
• 2、成品展現
• 3、前期準備
  • 本地安裝 node.js
  • 本地安裝 git
  • github 帳號
  • 建立倉庫
  • travis ci 帳號
• 4、安裝 Hexo
• 5、使用 hexo 搭建博客
• 6、部署到 github pages
• 7、使用 travis ci 進行自動化部署
• 小結

1、說明

本系列文章將會詳細說明使用 Hexo + github pages 來搭建我的博客，並對主題進行配置，而後使用 travis ci 來進行自動化部署的全過程。

搭建一個賞心悅目的博客，寫文章和閱讀也會更加溫馨，一次搭建，終生使用，並且還全程免費，何樂而不爲呢。

經過本系列文章的學習，你將收穫一個免費且漂亮的我的博客，並熟悉搭建、寫做、部署的全流程以及其中一些很好用的工具。

2、成品展現

在線 Demo

這只是其中的一個主題，若是不喜歡，也能夠很方便的切換其它主題。

hexo 主題至關豐富，能夠在這裏選擇喜歡的主題進行切換便可。

3、前期準備

在開始搭建以前，須要準備如下幾樣東西：

• 本地安裝 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 "你的郵箱"

而後用食指敲擊你的回車鍵三次，記住，要用食指，但別問爲何。

找到你剛纔建立的密鑰，windows 用戶能夠在 C://用戶//admin//.ssh 目錄下查找，mac 用戶能夠在 ~/.ssh 目錄下找到。複製 id_rsa.pub 文件裏的信息，而後到這裏添加新的 SSHKEY 。

把咱們剛纔的 key 複製進行後保存便可。

建立倉庫

點擊這裏，建立一個新的倉庫。

倉庫名稱能夠隨便取，好比：blog、my-blog，隨便取一個就好。倉庫說明也能夠隨便寫，能夠大概描述一下你這個倉庫是作什麼的。能夠參考一下個人倉庫

而後把倉庫地址記下來，是下圖中箭頭標示的 git 開頭的地址，後面須要用到。

建立好倉庫以後，就能夠進行下一步了。

travis ci 帳號

travis ci 帳號是跟 github 帳號關聯的，因此須要先建立好 github 帳號，建立好以後，點擊這裏進行帳號關聯登錄。

在設置裏進行一次帳戶同步：

同步完後刷新一下頁面，剛纔建立的倉庫應該就會出如今這裏：

4、安裝 Hexo

hexo 是一款靜態網站生成工具，能夠根據設置的主題樣式和配置文件，來生成豐富多彩的網頁，一般配置文件設置好以後不須要常常修改，咱們只須要負責寫好咱們的博文，寫好以後就能使用命令一鍵生成網站，並且還能夠隨心所欲的切換主題，能夠說是寫博客的一大利器。

hexo 的安裝其實很簡單，只須要輸入如下咒語：

npm install -g hexo-cli

而後輕輕的敲擊你的回車鍵，hexo 便能成功的安裝在你的電腦中。

可使用如下命令進行驗證：

hexo -v

5、使用 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 便可訪問咱們生成的網站了。

這樣，咱們的博客就搭建起來了。

6、部署到 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

7、使用 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 中看到構建過程被觸發了，等待一會便可完成部署，而後再打開咱們的博客，查看一下咱們新生成的文章是否已經在上面了。（瀏覽器有緩存，因此可能須要刷新幾回纔有效果）

小結

整個過程看起來有些麻煩，距上次部署博客已經有很長時間了，我也是摸索了幾回後才大體掌握，由於不想每次都從新來一遍，因此仍是記錄一下爲好，利人利己。

寫博客是一種生活態度，記錄並整理生活和編程中的心得和經驗並分享，在漫漫人生路上留下本身一路走來的印記，這樣之後再回過頭來看時，就不會感慨時間都去哪了。若是能所以遇到有共同興趣愛好的人，那也將會是人生裏的不錯點綴。

這裏只是完成了博客搭建和自動化部署的過程，關於博客的配置和主題的配置以及博客寫做的一些技巧會在後面的文章中進行說明，敬請關注～