0%

Using hexo to being your static blog with Drone CI

Posted on Edited on In

Hexo 是一款方便使用者在 markdown 環境下建立 Blogger 的工具
若是他能夠與 CICD 並行使用會更加方便

流程

  1. Hexo 怎麼安裝與設定
  2. 建立新草稿與上文章的方式
  3. 上傳文章到 github.io 上
  4. 透過 Drone CI 來幫你進行 Build and Deploy

安裝 Hexo

首先，在你使用 hexo 之前要先安裝 hexo-cli 以便於你後續進行操作

1
npm install -g hexo-cli

之後，建立你自己的 hexo 目錄。並進行 library 的更新

1
2
3
4
hexo init <folder>
cd <folder>

npm install

底下目錄會長得像如此

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

可以先在 _config.yml 之中，去修改基本網頁設定。我基本先修改了這些

1
2
3
4
5
6
7
8
9
10
11
title: Blogger name
subtitle: a Awesome static blogger
description: My first blogger.
url: https://example.com/

author: My Name

language:
	- zh-tw
	- en
timezone: Asia/Taipei

再來可以透過 hexo server 進行測試，並在 http://localhost:4000 瀏覽

1
2
3
4
5
❯ hexo server
INFO  Validating config
ERROR Database load failed. Deleting database.
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

確認完畢後，可以透過 hexo generate 產生靜態檔案
會生成在 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
❯ hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 164 ms
INFO  Generated: archives/index.html
INFO  Generated: index.html
INFO  Generated: archives/2023/01/index.html
INFO  Generated: js/script.js
INFO  Generated: js/jquery-3.4.1.min.js
INFO  Generated: css/style.css
INFO  Generated: fancybox/jquery.fancybox.min.css
INFO  Generated: archives/2023/index.html
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: fancybox/jquery.fancybox.min.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.woff2
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: 2023/01/10/hello-world/index.html
INFO  17 files generated in 351 ms

❯ tree public
public
├── 2023
│  └── 01
│     └── 10
│        └── hello-world
│           └── index.html
├── archives
│  ├── 2023
│  │  ├── 01
│  │  │  └── index.html
│  │  └── index.html
│  └── index.html
├── css
│  ├── fonts
│  │  ├── fontawesome-webfont.eot
│  │  ├── fontawesome-webfont.svg
│  │  ├── fontawesome-webfont.ttf
│  │  ├── fontawesome-webfont.woff
│  │  ├── fontawesome-webfont.woff2
│  │  └── FontAwesome.otf
│  ├── images
│  │  └── banner.jpg
│  └── style.css
├── fancybox
│  ├── jquery.fancybox.min.css
│  └── jquery.fancybox.min.js
├── index.html
└── js
   ├── jquery-3.4.1.min.js
   └── script.js

建立草稿與發佈新文章

Hexo 在編寫文章的時候，可以選擇直接新增文章 或是先建立草稿後在發佈

直接新增文章

1
2
3
❯ hexo new "new title"
INFO  Validating config
INFO  Created: ~/test/source/_posts/new-title.md

之後指定位置 ~/test/source/_posts/new-title.md 就會自動幫你建立 markdown 檔，
直接進去進行編輯裡面會長的類似這樣

1
2
3
4
5
6
7
8
9
10
---
title: new title
date: 2023-01-02 13:10:54
categories: test
tags:
  - test
---
this is new post
<!-- more -->
full post right here.

categories 可以是文章的種分類
tags 可以多個上文章有的 Tag
<!-- more --> 則是用於分割全文的一種標記

透過草稿

透過草稿有個很大的優點，可以讓你在重新 Deploy 時不會誤部屬到還在編寫的文章
其中他也只需要改變與多一個步驟

請直接指定 drafts 的 layer，來新增你的文章

1
2
3
❯ hexo new draft "test"
INFO  Validating config
INFO  Created: ~/test/source/_drafts/test.md

之後，請於 ~/test/source/_drafts/test.md 去編輯你的文章
若完成執行以下步驟，就可以轉移文章到正式發佈的的地方了

1
2
3
❯ hexo publish "test"
INFO  Validating config
INFO  Published: ~/Documents/Daily/0110/test/source/_posts/test.md

使用 Drone CI 幫忙部屬

要使 Drone CI 進行自動部屬，要先完成一些事前動作

  • 在 package.json 添加 Deploy 與 Generate 的動作
  • 在 Drone CI 需要有 Github 的權限

在 package.json 上新增 Deploy 與 Generate 的動作

可以參考我之前寫的 Deploy Hexo at Github.io
主要是把指令直接添加到 package.json 上，方便我們管理流程

而 package.json 內容如下，我針對了 scripts 的部分新增

1
2
3
4
5
6
7
...
"scripts": {
  "start": "hexo server",
  "build": "hexo cl && hexo g && gulp",
  "deploy": "hexo d"
},
...

可以注意到我，額外添加了 gulp 的部分。
那部份主要是為了簡化輸出結果，沒有使用可以移除掉，後續文章會說明如何添加

之後，在 .drone.yml 的部分可以這樣編寫 steps

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
26
steps:
  - name: build
    image: node
    commands: 
      - git submodule update --init
      - node -v
      - npm -v
      - npm install
      - npm run build
    when:
      branch:
      - master

  - name: deploy
    image: node
    environment:
      SSH_KEY:
        from_secret: SSH_KEY
    commands: 
      - echo "$${SSH_KEY}" > /SSH_KEY && chmod 0600 /SSH_KEY
      - git config --global user.email "Your Email"
      - git config --global user.name "Youer name"
      - GIT_SSH_COMMAND='ssh -i /SSH_KEY -o IdentitiesOnly=yes -o StrictHostKeyChecking=no' npm run deploy
    when:
      branch:
      - master

可以注意到我這邊，將 SSH key 注入到 Secret 裡
然後，在 Deploy 環節將其加入到容器之中

故在此操作，務必請自行添加 Secrets 先以確保資料正確