Hugo? Typst? blog 變更與心路歷程

短暫的 Hexo 時期 (2022-5 ~ 2022-10)

因為作者也是台灣人，做部落格的時候就優先考慮他的工具。其實我對於 hexo 沒有什麼客觀的負評，主要還是偏好問題：

我不熟悉 js 相關的語言，那時候沒有 ai 可以問。需要修改部落格配置的時候就要花很多時間爬文件，改很多地方都怕怕的XD
不想要 github repo 裡面有很多 js 腳本，後來就決定要跳去 hugo.
不想要本地編輯時裝一堆 npm, 然後接著裝一大堆 npm 生態依賴套件

後來用沒多久就跳去 hugo 了。

Hugo 時期 (2022-10 ~ 2026-08)

優點

換過來 hugo 之後用了最久（四年左右），很多地方都很滿意。除前述改進外，還有：

更多內容可以提前編譯，加上他自稱「全世界最快」讓我對他的速度很有信心😆
只有一個 hugo binary, 本地跟 CI 要產出部落格的時候不用裝很多依賴，甚至還有 watch 功能（i.e. 我可以改完馬上本地看到結果，不用下指令）
我找到 blowfish 這個功能完整、酷炫、客製化程度高，也很多人維護的 hugo 主題，讓我可以選好設定後專注在我的內容上，不用反覆調整外觀。

痛點

我很滿意 hugo 的這些優點，所以開開心心地寫了一些技術文章、也會在上面寫一些 latex. 經過一段時間使用，我當時使用的 Hugo + Blowfish 設定，仍有一些地方讓我不太滿意：

萬惡的 mermaid

很慢： mermaid 算繪 (render) 很慢，而且當我快速拖動網頁時會慢到閱讀同時算繪，讓我的部落格文字內容不斷閃爍、跳動。這點在 latex 上好像也會，但我更常用 mermaid 繪圖，體感更明顯。除了慢，有時候還會直接把 mermaid 語法輸出，算繪失敗。
規格不明確，不穩定：接著我想，現在 ai 這麼便宜，我應該可以仿照 hugo 編譯的想法，照著 mermaid 的語法做個編譯工具產生 svg 等格式，再讓部落格直接引用圖檔，這樣就穩定多了。
- 我沒有找到足以讓我輕鬆重做相容實作的完整規格；語法細節還需要對照各圖表的 parser、測試與實作。有找到 @emily/mermaid-ast 庫，但仍需要引入 JS／TS 生態的工具，而且它處理的是 Mermaid 文字與 AST 的轉換，並不包含 SVG 的排版與繪製。爬了一些文，看起來不同 chart/diagram 語法規格很大程度是 implementation-defined, 而且討論很多很雜。直覺上太複雜、實作成本高。而且自己做編譯器（或用別人的）很可能常常有 breaking change, 我就放棄這條路了。

我更喜歡 Typst 的數學語法

我當時用 Blowfish 的 KaTeX 功能顯示數學公式，所以這裡比較的是 KaTeX 支援的 TeX 數學語法與 Typst 的寫法，不討論完整 LaTeX 文件的 PDF 編譯速度。我用 Typst 寫過一陣子的 PDF，覺得很多地方的語法比較友善。例如：

中英混合時，我覺得 Typst 的原始碼更好讀：

𝑥 = 1 其中 𝑥 是節點數量

    $$
    x = 1 \quad \text{其中 } x \text{ 是節點數量}
    $$

$ x = 1 quad "其中 " x " 是節點數量" $

typst 很多數學語法更簡單

(\begin{matrix} 𝑎 & 𝑏 \\ 𝑐 & 𝑑 \end{matrix})

    $$
    \begin{pmatrix}
    a & b \\
    c & d
    \end{pmatrix}
    $$

  $ mat(
  a, b;
  c, d;
) $

我也更偏好 Typst 用函式、參數和資料型別來組合內容的方式。相較於 TeX 的巨集寫法，這種方式更直覺，也比較容易修改。

Typst 時期 (2026-08 ~ 現在)

Typst 生 md 給 Hugo?

最早我想讓 typst 處理我討厭的 mermaid 和用了一陣子的 latex 語法，產生 md 之後再丟給 hugo. 後續就可以串原有的 hugo. 看過大佬如何在 Hugo 中使用 Typst 编写文章做了類似的事情。他自己維護一個 hugo fork 來把 typst 文件編譯成 html.

後來發現好像可以連 markdown 都捨棄

研究了一下覺得轉 md, 每一家的 md 規格細節都不太一樣，我也不想自己維護一整套基礎建設，索性直接跳去純 typst 部落格的世界。調查了一下，最後找到 Calepin 這個靜態網站生成器完美解決了我所有痛點！

他是 typst 的包裝，彌補了目前 typst 直接生成 html 的一些弱項。
一樣有 watch 這個功能。
能夠靜態把 typst 裡面的繪圖生成 svg, 並且嵌入我的部落格中。

結論：首頁 speed index 耗時縮短 31% (3.5s → 2.4s)

現在部落格完全不再需要執行期算繪 mermaid 圖 / latex 算式，所有滾動的體驗好很多。

Hugo 網站的 Lighthouse 測試

Hugo 網站的 Lighthouse 結果：效能 98 分，Speed Index 3.5 秒，LCP 1.6 秒。

Typst / Calepin 網站的 Lighthouse 測試

Typst / Calepin 網站的 Lighthouse 結果：效能 99 分，Speed Index 2.4 秒，LCP 1.7 秒。