非前端專業的 SSG 使用心得 | Hexo | Hugo | Docusaurus | VitePress | MkDocs

開始架網站後靜態網站生成器 (SSG) 換了好幾個,由於我不是學前端的所以這是一個非前端用戶的視角,依照使用時間排序,本文包含以下幾個 SSG 工具:

  1. Hexo
  2. Hugo
  3. Docusaurus
  4. MkDocs
  5. Vitepress

Hexo

使用約一週,基本上沒改什麼東西就跳到 Hugo 了,心得如下。

優點

  1. 完整詳細的中文文檔,新手超級友善
  2. 背景語言是用 js 寫的,適合本來就會 js 的人,也適合剛開始學 js 的
  3. 沒有預設框架,不用學 React 等等框架
  4. 有很多適合中文生態的插件,例如宅宅 L2D

缺點

  1. 主題我都不喜歡,最好看的還是 Next 但是已經爛大街
  2. 慢,才沒寫幾篇文章就已經感覺到開發階段的畫面更新有延遲
  3. 慢,這幾個 SSG 就只有他的網頁瀏覽起來有不流暢的感覺

電腦是 M1 MacBook Pro。

樣式範例

Hugo

因為 Hexo 慢所以找了一個很快的 Hugo,到現在都還在用也自定義最多,所以本段內容最豐富。

優點

  1. 主題多,數量爆打其他 SSG

  2. 主題好看,Hexo 很多主題我都覺得醜

  3. 優秀的圖片渲染管道

  4. SEO 很好,全靜態內容

  5. 只有簡單語法不會碰到語言的框架問題

  6. 可以隨便在 md 裡面寫 HTML 和 JS,Docusaurus 和 Vitepress 有些語法要轉換

  7. 速度很快,七十個 md 文件渲染速度如下:

    • 冷啟動 9 秒,使用 hugo server --disableFastRender --ignoreCache
    • 冷啟動 1.5 秒,使用 hugo server --ignoreCache
    • 熱啟動 0.2 秒,使用 hugo server

    我也測試過 eallion.com 有 600 個 MD 文件,冷啟動速度約兩分鐘,熱啟動 7 秒左右,已經非常快了。

    還有比 Hugo 更快的 Zola,快一個數量級(約十倍),所以 Hugo 不是官網上宣稱的地表最快,不過也夠快了。

  8. Github 超多部落格的開源程式碼可以參考

缺點

  1. 客製化非常困難
    • html/js 學到一半要跑去看 go 語言,進階使用還要理解 Hugo 自身的渲染流程,可以說是最難客製化的 SSG
    • 如上述,很難找到完美的主題,因為開發者需要精通全部語言外加 SEO 以及瀏覽器相關的知識,還要喜歡 Hugo 到願意做一個主題
    • 應該沒辦法拿 js 生成頁面,至少我沒看過有人這樣做過
    • 基於客製化困難,頁面效果沒辦法太複雜
  2. 除錯非常愚蠢:由於 Go 模板導致我們要在 themes/layouts 和自己的 layouts 之間來回比較才能除錯。除此之外,因為 partials 是插入,所以 trace code 變成使用編輯器的全局搜索功能才能順利找到問題
  3. 官方文檔內容陳述方式很爛,Go 模板功能很多人搞錯有一半原因是文檔講的不清不楚,現在改版了不知道寫的如何
  4. 內建的 Chroma syntax highlight 很爛,語法大錯特錯
  5. 沒有插件這種東西,想要新功能就是自己寫,還好 Github 有很多開源範例可參考
  6. 沒有內建 broken link 檢查
  7. 仍舊不是穩定版本

抱怨多是因為用的多,文末有說明我選擇的原因。

樣式範例

Docusaurus

發現 Hugo 要寫文檔不太適合,hugo-book 太醜,doks 其實不錯但是當時沒搞懂 Hugo 模板,而且那時候 frontmatter 不支援自訂項目(現在支援了),後來找到 Docusaurus。

優點

  1. 文檔功能強大,部落格功能也很強大,適合撰寫文檔
  2. 幾乎開箱即用,並且有很多範例可以找到原始碼
  3. 完善的生態系統,甚至給你配色版,社群插件也很多
  4. 超級多的可調選項,甚至可以把整個組件 swizzle 出來改,背後有臉書就是厲害
  5. 可使用 React 建立自訂頁面,例如朝八晚八整個部落格幾乎沒用內建的文檔頁面,以及 Docsaid 的遊樂場頁面
  6. SEO 功能完善
  7. 內建 broken link 檢查
  8. 使用 JS 撰寫設定檔,超級彈性

缺點

  1. 醜不拉基
    • 最大問題是文檔頁面的排版,沒有要給讀者任何喘息空間,文字直接塞滿整個頁面給你滿滿的文字 creampie
    • 部落格右側的 ToC 超窄,文檔頁面的 ToC 寬度明明就正常
    • custom.css 可以解決這些問題,但是要花時間自行修改
  2. 語法上色
    • 內建的 PrismJS syntax highlight 比 Hugo 更爛,語法大錯特錯,錯的比 Hugo Chroma 更誇張,尤其是 shell 語言
    • PrismJS 比 Hugo 更難修改,因為有些插件的功能是基於內建 code block,除非直接不用那些插件
    • PrismJS 改 HLJS 沒看到有人在討論,改成 Shiki 倒是很多人討論,但是沒有放入規劃
  3. 文檔頁面不支援 RSS!!!文檔頁面不支援 RSS!!!文檔頁面不支援 RSS!!!
  4. 客觀事實上不慢,但是每次刷新頁面就看到刷新條在那邊跑,心理上會覺得慢

樣式範例

MkDocs

MkDocs 本身就是 Python 生態系出來的,我的心得也是把他拿來建立 Python 文檔就好,其他地方使用不那麼合適,有還算豐富的社群插件,略顯老態的 UI 以及幾乎是零的客製化空間。

樣式範例

VitePress

因為 Docusaurus 的 syntax highlight 和排版實在太醜,又發現基於 shiki 的 VitePress 於是決定把我的 Git 零到一百 搬移到 VitePress。

優點

  1. 非常好看,就算是文檔風格也是最好看的
  2. 內建超強 syntax highlighting,內建 Shiki 和 TwoSlash 且無須任何設定開箱即用
  3. hot update 開發時更新速度超快
  4. 使用 markdown-it 可以輕鬆的擴充功能
  5. 邏輯清晰的文檔,而且還有中文版
  6. 支援關閉 SPA 改用 MPA 模式
  7. 就算有一些內建樣式有點醜,也有完整的社群教學教你優化且不難
  8. 使用 TS 撰寫設定檔,超級彈性
  9. 文檔頁面支援 RSS!!!文檔頁面支援 RSS!!!文檔頁面支援 RSS!!!

缺點

  1. 只適合寫文檔,不想寫文檔的話所有功能就要從零寫起
  2. SEO 不佳,有些內容不是靜態的要靠 JS 渲染,例如 code block 內容
  3. MPA 模式粗暴的關閉所有 JS,連切換亮暗模式都不能
  4. 小問題是頁面路由還要自己寫程式,連移除 prefix 都沒有內建支援;大問題是不支援讀取 frontmatter 自訂 slug
  5. 使用自訂而不是一般的 markdown-it,導致客製化時需要額外除錯
  6. 資源非常少
  7. 按下內頁 anchor 後再回到上一頁,應該要回到剛才瀏覽的位置,但錯誤的回到 URL 位置而不是先前的瀏覽進度

樣式範例

同場加映

Zola

同場加映 Zola,沒用過,作者是說因為 Hugo 的 Go 模板太愚蠢所以才自己寫 Zola,模板問題就是在 Hugo 段落說明的那些。

以下是整理資料,基於 Rust 所以速度超快,大概 build 速度是 Hugo 10 倍,但是我沒那麼多文章,而且 Zola 的主題又少又醜,大部分主題也都停止更新,而且很多主題的 HTML 頁面設計不佳,瀏覽起來有卡頓感,所以沒有要遷移的打算。如果只是需要一個簡易的文字記錄網頁那 Zola 倒是很適合你,找一個 minimum design 的主體,寫再多 markdown 速度都很快。

Eleventy, Astro, Gatsby, Next.js

沒用過,需要用戶是一個專職寫 JS 的才用的好這些工具。

總結

直接放棄 hexo,因為開發過程畫面更新的速度慢,瀏覽體感也慢。Hugo 雖然有諸多缺點,但是沒有額外框架要學所以倒是沒那麼複雜,反而是 VitePress 要學整個 Vue 有點麻煩,因為 Vue 資源比起 Docusaurus 的 React 少太多了。總而言之

  1. 依照用途選擇
    • 部落格: Hugo 或 Hexo
    • 文檔: Docusaurus 或 Vitepress
  2. 依照外觀選擇,Docusaurus 和 Vitepress 只適用於文檔,拿他們來改成部落格要花很大心力
  3. 依照金主爸爸選擇,Docusaurus 有臉書,其他都沒有
  4. 依照穩定性選擇,Hugo 仍然在測試階段,其餘兩個都是穩定版本
  5. 依照語言選擇
    • Hugo: HTML + JS + 基礎 Go
    • Docusaurus: JS/TS + React
    • VitePress: TS + Vue
  6. 客製化的擴展能力是 Docusaurus >>> VitePress > Hugo,如果再考慮除錯能力這兩個會遠大於 Hugo,Hugo 囿於模板功能,導致除錯能力非常糟糕,大量客製化用 Hugo 會中風
  7. 如果需要進階客製化,需求的語言能力是高到低 VitePress > Docusaurus > Hugo,VitePress 最難的原因是 Vue 資源少,而 Hugo 雖然需要很多語言,但是每個語言都是基礎用法
  8. 整篇好像講了 Hugo 很多缺點,但是這個 thread 很好的說明了為何我還留在 Hugo 的原因

請注意這是非前端用戶的心得,而且最重要的是文章內容而不是網站多好看,就算是這種毫無裝飾的網站文章還是超多人看。

載入評論