2024 技術文件及部落格的架站工具選擇

這幾天心血來潮在幫我的部落格新增一個主題區塊，因為自己造輪子造到懷疑人生，所以來分享一下沒那麼 hardcore 的內容。

過往我們想到部落格架站，你可能會聽過許多諸如 Hexo、Jekyll、Hugo 的靜態網站生成器 (Static Site Generator, 以下簡稱 SSG)，而在新技術百花齊放的 2024 年，如果今天你也想開始一個新的技術文件向的部落格有哪些選擇。

有一些雖然沒用過但有查到資料也一起列下來，若有需要勘誤的部分或你心中有個「怎麼可以少了它」的選項，歡迎留言跟我說！

tailwind-nextjs-starter-blog

• Link
• Tech-stack： Next.js App Router、Tailwind、Contentlayer、TypeScript
• 由 Timothy 這位部落客將他的部落格樣板開源出來
• 優點：
  • 作者將許多元件、功能如網站追蹤、留言、電子報、Algolia 搜尋、ToC、code syntax highlight 等模組化成另一個 Pliny 包在 template 中。
  • 基本部落格功能該有的都有，且版面蠻現代好看，GitHub repo 上也有紀錄許多套用該模板的開源 repo 可參考，像我很喜歡這個 leohuynh.dev 的版型就漸進式的參考過來。
  • 搭載最潮的 Next.js App Router 是我當時選擇的主因，想拿來當個基底練練手
  • 內建 Contentlayer 方便管理 MDX 文章資料在 Next.js 中的使用，實際部署文章可參考這個範例
  • lighthouse 跑分也都接近滿分，實際閱讀操作與寫文章的體驗都蠻不錯，客製化彈性高，也可一鍵輕鬆部署至 Vercel
• 缺點：
  • 因為原本設計是純部落格導向，所以如果想要類似 Docusaurus 那種文件式的版面需要自己刻，但好在內建
  • 對 Tech-stack 不熟悉的話改起來學習曲線可能比較高
  • 非 SSG 方案，如果想部署在 GitHub page 上要考慮其他方案

Docusaurus

• Link
• Tech-stack： React 、 MDX
• 優點
  • SSG 方案可靜態部署到 GitHub page
  • 基本版面與功能齊全，諸如 sidebar、breadcrumbs、手機版、文章導覽 ToC、標題連結複製、提供純部落格版型等
  • 另外還有 Algolia 搜尋、SEO 優化、i18n、文件版號等功能可快速設定
  • 小恐龍很可愛
• 缺點
  • 簡單快速或許是把雙面刃，沒有其他主題可選擇，當內容多起來如果不喜歡果醬堆 (Jamstack) 風格的側欄呈現方式，可能還是要自己動手刻
• 簡評
  • 若本身是 React 開發者，希望可以專注在內容產出，這套是最快的選擇
  • 若未來可能想要在網站上做除了靜態內容之外的客製功能、希望部落格主題與他人不同、有 SSR 需求，可能要參考其他 Next.js、Nuxt.js 的相關方案
  • 官方文件也有列出與其他方案的比較，可參考此連結

Nextra

• Link
• Tech-stack： Next.js Page Router 、 MDX 、 Tailwind
• 由 Vercel 工程師 Shu Ding 開發與維護，幾個知名的專案如 Turbo、SWR、Kuma UI 的文件官網都是用這套
• 沒實際用過與仔細研究，但因為這套的版型很符合我想要的樣子，所以好奇原始碼是怎麼做的，追了一下原始碼，也發現整個 repo 是用 Turborepo 來做 monorepo，覺得是個很不錯的學習範例。
• 有個不相關的是出於好奇也追了一下 Shu Ding 的個人部落格，發現他身為一位設計師與工程師，個人網站只是非常簡約的窄版設計，尤其是那個 Projects 列出來的作品與經歷，突然覺得簡單得令人震撼，不禁反思我好像 over-design 了。

VitePress

• Link
• Tech-stack： Vue 3 、 Vite 、 Markdown
• 個人認知 VitePress 這套應該算是對標 Docusaurus 的 Vue 版文件型 SSG 工具，看名字就知道是 VuePress 的 Vite 升級版，看起來也是 Vue core team 開發與維護。
• 許多知名專案如 Vue, Vite, Rollup, Pinia, VueUse, Vitest, UnoCSS 等其他更多案例都是使用 VitePress 來做官方文件.
• 幾乎 Docusaurus 有的功能都有，另外內建支援 dark mode，也支援內嵌在既有專案中

Docus

• Link
• Tech-stack： Nuxt.js 3 、 Markdown (MDC)
• 沒實際用過與仔細研究，看起來一些 Nuxt 生態文件有使用這套，看起來像是對標 Nextra 的 Nuxt 選項。
• 另外發現 Vue 生態圈有個像是對標 MDX 的版本叫做 MDC

Astro

• Link
• 一直對 Astro 這個潮潮的框架蠻感興趣，但我目前還沒有研究太多，只是先列下來並附上一些參考資源未來如果有機會來做 side project 時可以參考
• 參考資源
  • Kelly CHI - 打造高分作品集網站超簡單：Astro 框架基礎介紹
  • Apprentice Log - 用 Astro 重寫部落格的心得

11ty

• Link
• 全名是 Eleventy，自己沒用過，但看過一些文章介紹，可以說是 Hexo 升級版的選擇
• 搭配 eleventy-high-performance-blog 這個 template 基本的 lighthouse 跑分可以到全滿分，已處理圖片優化、SEO、A11Y、支援 Markdown 的靜態網頁部落格
• 缺點是客製 CSS 不好改、沒有內建分頁 UI 等，另外就是比較是純部落格版型，如果是想要做文件向的可能要參考如 Docusaurus 會更好。
• 細節也可參考以下兩篇文章：
  • Huli - 除了 hexo，也可以考慮用 eleventy 來寫技術部落格
  • Jason - 為什麼我離開 Medium 用 eleventy 做一個 blog

其他選擇

• 如果喜歡簡單快速，也有許多經典不敗款 SSG 方案如 Hexo 或也有看到 Gatsby，因沒深入研究且網路上也有許多關於這方面的介紹就不贅述
• 另外我自己以前也有在 Medium 寫文章，但當年還需要另外用 gist 去做 code syntax highlight，且文章列表不好瀏覽，覺得 DX 不算太友善，對技術部落格還是不太適合。另外推廣演算法與版面等都是掌握在平台方，但優點大概是現成的後台分析、SEO 優化、追蹤通知系統這些都蠻香的，端看個人認為哪些功能更需要，初期想專注在內容產出找現有平台也是個不錯的選擇。

結語

老人如我一路上也用過不少部落格平台，從最早的現成平台如無名小站、痞客邦、Blogger、Medium、GitHub issue，到開始自己架站的 Logdown、Hexo、Wordpress，最後落腳在目前的 tailwind-nextjs-starter-blog。

基本上覺得部落格架站這件事，技術沒有好壞，只有適不適合自己。所以最重要的還是能盡可能提升 DX 與生產力才是唯一考量；其次就是如果想順便當 side project 玩玩新技術把各種最潮的東西堆疊上去也是很有成就感，畢竟總不能在商用專案這樣玩火，也能當作工程師求知慾的一個出口。