首先安裝，部署 hexo。

這裡假定你已經搞定 hexo 本體了 (因為這只是一個備忘錄，我已經搞定 hexo 本體了) (絕對不是因為我hexo 是兩年前裝的，怎麼弄我已經完全不記得了)。

所以本文不會討論

  • hexo 安裝
  • hexo 基本教學

這個備忘錄會做以下幾件事:

  1. 用 Cloudflare Page 自動部署
  2. 把整個 hexo 環境放到 dev container 容器裡面
  3. 用 obsidian 作為未來寫 hexo 文章的編輯器
  4. 給博客添加遙測數據

1. 用 Cloudflare Page 自動部署

Cloudflare Page 可以在偵測到你 main branch 有動靜時自動構建並部署，體驗跟 GitHub Page 差不多。不過我個人覺得 Cloudflare Page 這個東西用起來比較無腦，不用配什麼 GitHub actions，搞什麼 git credential 之類的，一切交給 Cloudflare 大善人幫我們構建就行了。

所以直接開始。

組建命令寫 npm run build 而非 hexo g 是因為 Cloudflare 好像會找不到這個命令。反正 npm run build 能跑，which is nice。

下面根目錄寫的是你 hexo 的根目錄，就是有 source 文件夾，有 _config.yaml 文件的那個目錄，一般大概不用動。

然後就好了，看著他 build 就行了。自定義域名之後設置可以改，很簡單，不寫了。

2. 把整個 hexo 環境放到 dev container 容器裡面

看到這個標題時，你的腦子裡可能會有幾個疑惑:

  • dev container 是什麼？
  • 為什麼沒事閒著要把 hexo 放到 dev container 裡面？？

好吧，我承認這有點多此一舉，你可以跳過。但我已經配好了，不寫白不寫。

首先，dev container (開發人員容器) 是一個… 容器。你可以把整個開發環境都放在容器裡面，這樣就不用管什麼配置環境之類的東西了。開發人員容器相關的東西會被放在 .devcontainer/devcontainer.json 文件裡，如果被放到 git 裡面的話你就會獲得一個可複製的開發環境。

那為什麼閒著沒事要把 hexo 放開發人員容器裡面…

emmmm… 是安全問題。

是因為升級到 macOS Sequoia 的我今天在重新運行 hexo 服務器的時候發現我被 macOS 攔住了，他說這東西不安全 (或者說他們沒法確定這東西安不安全，所以就先攔住了)。

然後我仔細一想，node 搞下來的 packages 好像確實權限比較高，也聽說過這麼多供應鏈攻擊，感覺 hexo 插件其實就是個比較適合搞供應鏈攻擊的地方…

那就放在容器裡面跑好啦！ 可是一般的容器還要寫 dockerfile，東西改了還要重新 build…

那就用開發人員容器吧！ 一個配置文件，所有東西放容器裡運行，代碼自動映射，跟 VSCode 配對愉快…

隨便吧。

這是 VSCode 官方文檔，寫的挺好，自己看去吧。

這是我用的 .devcontainer/devcontainer.json 文件

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
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
  "name": "Node.js & TypeScript",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  "forwardPorts": [4000],

  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "npm install -g hexo-cli && cd hexo-blog && npm install && git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly && npm install hexo-renderer-pug hexo-renderer-stylus --save && npm install --save hexo-admin",

  // Configure tool-specific properties.
  "customizations": {
    "vscode": {
      "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
    }
  }

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}

那個 postCreateCommand 是唯一需要關心的地方。裡面放的是容器被創建之后他會執行的用來配環境的命令。這裡就裝一下 hexo 和 hexo 的插件。

3. 用 obsidian 作為未來寫 hexo 文章的編輯器

用 命令行生成頁面然後 用 VSCode 或 Typora 寫，好麻煩，而且會降低寫作熱情 (或者說降低把文章發到 hexo 上的熱情)。

我2022 年部署好的 hexo 就是這麼吃灰的。後面去用了 halo，但 halo 一重開機就炸數據庫… 很難繃，不是很懂。後面寫文章常常在知乎上寫，但知乎現在幣下要登入才能看文章，而且不讓瀏覽器 index 了，很難受。

所以要有簡單愉快的方式來寫文章！

包括圖片！

還有tag！

obsidian 是個好東西。他恰好能解決所有問題，還很好用！

用 Obsidian 管理 hexo 裡面的文章

直接參考 Hexo + Obsidian + Git 完美的博客部署与编辑方案 的第三部分(使用 Obsidian 来编写和管理文章) 吧，我寫的不會比他好。

使用 obsidian 的模板系統來幫我們填寫 hexo 頁面的 metadata

這裡指的是在 hexo 裡面長得像這樣東西:

而這在 Obsidian 裡面會長這樣。

Obsidian 可以弄一個模板，設置好之後可以一鍵添加，並且可以自動幫你填上 title 和 date。

在 source 目錄下新建一個 _obsidian 目錄，裡面弄個 Post Template 來寫屬性模板。

我是這麼寫的

1
2
3
4
5
6
7
8
9
10
11
12
---
title:
  {{title}} 
author: Yi-Ting Chiu
date:
  {{date}}
cover: 
tags:
  - 奇怪的東西
categories:
  - 折騰筆記
---

這裡面的 {{title}} 和 {{date}} 會在插入模板的時候被替換成文件標題和時間。

接著，設置 -> 核心外掛 (核心插件) -> 模板 -> 改一下圖中這兩個選項。

模板資料夾就用剛剛創建好的 _obsidian 文件夾，日期格式就寫 YYYY-MM-DD HH:mm:ss。

這樣就好了。以後新建文件點這個插入模板。

啊，圖片！圖片怎麼辦？

如果你用圖床你就去用圖床。

不過我不喜歡用圖床，因為我不喜歡把圖片跟內容分開存。

他要怎麼讓 Obsidian 插入的圖片直接就能跟 Hexo 兼容呢？

看這篇文章 超详细的个人博客搭建教程：Hexo + Obsidian：解决图片无法显示问题╮（╯＿╰）╭（其二）

如果文章掛了，我這裡寫一個極簡的版本。

在 source 目錄新建一個 images 文件夾 (用來放所有圖片)。

然後進入 obsidian 設置:

就好啦。

Obsidian 現在插入圖片的格式就是 markdown 語法了，用相對鏈接引用的話 hexo 也能讀得到了。

4. 一些簡單的遙測數據

呃… 我的意思是，嗯… 你不覺得知道一下博客有沒有訪客還挺重要的嗎？這就是遙測數據派上用場的地方了。

我這邊使用尊重用戶隱私 (並且免費) 的 Cabin Analytics 來做訪客分析，不過不同遙測數據的接入都挺容易的。

cabin 要在 Hexo 博客的每個頁面的 body 元素末尾添加 HTML 代碼，可以使用 Hexo 的注入器 (injector) 功能。以下是具體操作方法：

使用 Injector 添加 HTML

基本語法

1
hexo.extend.injector.register(entry, value, to);

實際示例

1
2
3
4
5
6
// 在scripts文件夾中創建一個新的js文件
hexo.extend.injector.register('body_end', `
  <div class="custom-footer">
    這是添加在body末尾的內容
  </div>
`, 'default');

參數說明

注入位置(entry)

  • body_end: 在</body>標籤之前注入[1]
  • body_begin: 在<body>標籤之後注入
  • head_end: 在</head>標籤之前注入
  • head_begin: 在<head>標籤之後注入

頁面範圍(to)

  • default: 注入到所有頁面
  • home: 僅注入到首頁
  • post: 僅注入到文章頁面
  • page: 僅注入到獨立頁面
  • archive: 僅注入到歸檔頁面
  • category: 僅注入到分類頁面
  • tag: 僅注入到標籤頁面[1]

實現步驟

  1. 在Hexo博客根目錄的scripts文件夾中創建一個新的JavaScript文件（如果沒有該文件夾，請創建一個）[1]

  2. 在該JavaScript文件中編寫注入代碼

  3. 重新生成網站，你的HTML代碼將會自動注入到指定位置[1]

這種方法比直接修改主題文件更好，因為它不會影響主題的更新，而且可以更靈活地控制代碼注入的位置和範圍[1][2]。

Citations:
[1] https://hexo.io/api/injector
[2] https://stackoverflow.com/questions/67668734/hexo-inject-html
[3] https://dustinpfister.github.io/2018/01/05/hexo-helpers/