Devops

CICD Intergration on Hexo Blog

Posted by Anthony Chao on 2021-01-22

CICD intergration on hexo blog

為了讓寫 blog 這件事可以更持久，讓這個過程變得簡單是絕對必要的

檢討之前沒辦法持續的原因主要就是有點麻煩，還要記住一些指令才能更新部落格

如果可以像平常寫 code 一樣 commit push 之後，部落格馬上更新，這樣寫部落格的成本就可以降到很低

hexo on github page

我使用的框架是 hexo，在你使用 markdown 寫完文章之後，你需要重新 build 一次，把這些 markdown 檔案轉成 html 靜態檔案，而這些靜態檔案會放在 public folder 裡面

以我的 blog 來說，檔案架構長得像下面這樣，而寫的文章會放在 _posts folder 底下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
qoo_blog
├── node_modules
├── scaffolds
├── public
├── source
│   ├── _posts
│   ├── about
│   ├── archive
│   ├── img
│   │   ├── article
│   │   ├── article_header
│   │   ├── avatar
│   │   ├── header_img
│   │   └── signature
│   └── tags
└── themes
    └── huweihuang
        ├── languages_to_be_added
        ├── layout
        └── source

如果 build 完之後， public 下面架構會長的像下面這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public
├── about
├── archive
├── archives
├── article
│   ├── 2019-09-02-day1
│   └── 2019-09-03-day2
├── css
│   └── images
├── fonts
├── img
│   ├── article
│   ├── article_header
│   ├── avatar
│   ├── header_img
│   └── signature
├── js
├── node_modules
├── page
├── source
└── tags
    ├── Javascript
    ├── Life
    ├── Rails
    └── Ruby

一般來說會放在 github page 上面的會是 build 過之後的內容，也就是 public folder 裡面的東西，這樣 github page 才有辦法正常顯示

至於中間設置的詳細內容可以參考小菜的blog有很詳細的圖文解說

intergrate travis CI

到這一步之前，需要先確定目前已經可以成功從 github page 看到你設置的靜態網頁，再來下面的設定

我用的 CICD 服務是使用 travis CI，當然要使用其他家也可以，只是 config 檔案設定會不一樣

首先需要去 travis ci 官網創一個帳號，通常會直接用 github 帳號申請，這樣他會直接讀取你的 repo 有哪些

然後在 travis ci settings 裡面 enable 部落格對應的 repo

接著在 setting 裡面有一個 Environment Variables 的選項，裡面需要設定你的 github token 為某個環境變數，我是設定成GH_TOKEN，等等的 config 會用到，如何做一個 token 可以參考這邊

travis config file

最後最重要的就是 travis ci 的 config 檔，我使用的 config 檔如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
language: node_js
sudo: false
node_js:
  - '12'
cache: npm
branches:
  only:
    - master # build master branch only
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  message: 'deploy by travis'
  on:
    branch: master
  local-dir: public

其中比較需要注意的是 branches 裡面選擇 master 的意思是只有在 master branch 推上去的時候才會執行這些 config 檔裡面的動作

另外在 travis 提供的 deploy 功能裡面，如果選擇 provider 是 pages 的話，因為我們沒有指定要把結果推到哪裡，預設會是 gh_pages 這一個 branch

最後，因為我們 travis 設定把 build 玩的檔案推到 gh_pages 這一個 branch，我們也要改一下 github repo 的設定，把 source 改成 gh_pages 這一個 branch

然後只要把文章更新推上去，你的 travis ci 顯示綠色應該就是成功了喔!

如此一來，只要寫完新文章，就可以用簡單的 commit + push 更新部落格嚕

參考資料：

https://www.slmt.tw/blog/2019/04/26/hexo-auto-deploy/




FEATURED TAGS
Devops
FRIENDS
prevent_hack