部落格架站指南

配上好看的圖把人騙進來再說

前言

這是一篇寫給對架設、設計部落格有興趣的朋友的文章，希望能幫到未來的你。這篇文章會把重點放在「設計」與「框架選擇」的層面，帶你了解市場上的不同方案該如何挑選。如果有說錯的地方，也請多多指教！

部落格是怎麼運作的？

歸根結底，部落格就是一個非常簡單的網站。你完全可以用最基礎的HTML，CSS，JavaScript三件套來手刻自己的部落格。

但現實是，一個完整的部落格不僅僅有文章，還要有橫幅、目錄、頂部導航、留言區等固定的介面格式。寫部落格的時候，人們當然首先要考慮的是文章內容，而不是網站的排版。試想一下：當你終於擠出一點時間，想坐下來好好寫一篇文章時，如果還要分心去搞定網頁排版、文字大小這些瑣事，等一切調整完畢，寫作靈感大概也消失殆盡了。

為了讓創作者能專注於「內容」本身，這時候我們就要請出另外一個非常好用的工具：部落格框架。

部落格框架該怎麼選？

根據用戶需求與技術背景的不同，市場上有幾種主流的選擇：

WordPress（傳統動態 CMS）

作為世界上最受歡迎的部落格系統，WordPress的優點非常明顯：開箱即用。它擁有海量的外掛和佈景主題。你幾乎可以不寫一行程式碼，就把網站架起來。但隨著時間推移，它的缺點也會慢慢浮現。它是一個相對龐大且「笨重」的系統，一旦你對排版有強迫症，比如想要像素級地修改某個區塊的設計，你會發現自己必須鑽進一堆複雜的 PHP 程式碼裡。對於喜歡完全掌控視覺設計的人來說，這有時候會讓人感到相當綁手綁腳。

雖然 WordPress 號稱免費開源，但對於我們這種想白嫖到底的「免費仔」來說，它其實隱藏著不少成本。首先，它需要傳統的伺服器（Hosting）和 MySQL 資料庫來運行，這意味著你每個月都要掏出真金白銀來付主機費。

其次，就是著名的外掛地獄。想要SEO好一點？裝個外掛；想要網站跑快一點？裝個快取外掛；想要防止被駭客攻擊？再裝個資安外掛。這些好用的外掛往往都是採用訂閱制收費的。當你把網站拼湊成你想要的樣子時，不僅網站變得臃腫無比，載入速度變慢，每個月的開銷也可能是一筆不小的數目。這也是為什麼，很多懂一點技術的人，最終都會選擇逃離WordPress。

靜態網站生成器（SSG）

於是，這些受夠了笨重系統的開發者們，轉向了另一個極致：像Hexo、Hugo或Astro這樣的「靜態網站生成器」。

SSG允許你自己設計部落格的外觀。如果覺得自己設計不好，社區也有大量的主題可供使用。它的運作邏輯非常純粹：你只需要在本地端用Markdown寫作，然後在終端機敲幾行指令，框架就會把你的文字編譯成輕量、響應速度快的純HTML網頁。

這樣做的一大好處是，你可以免費部署在很多的網頁託管服務上。大多數的託管服務（如 GitHub Pages、Cloudflare Pages、Vercel 等）針對純靜態網頁都有很寬裕的免費額度。你甚至可以設定自動化腳本（CI/CD），只要推送 Markdown 檔案上去，伺服器就會自動幫你編譯更新。這種網頁速度快、沒有資料庫被駭的風險，省心又省事。

但痛點來了： 每次寫文章都要打開VS Code，沒有那個我們熟悉好用的視覺化後台。如果你今天出門在外，突然想用手機改文章裡的一個錯字；又或者是你想邀請不懂 Markdown 的朋友一起共筆......那就麻煩了。

Headless CMS（無頭內容管理系統）

難道我們不能同時擁有靜態網站的自由與速度加上好用的後台管理介面嗎？這時候，時代的解藥出現了——Headless CMS。

什麼是「無頭」？簡單來說，它把網站的 前台視覺設計 和 後台內容管理 徹底切開了。後台只負責儲存你的文章和圖片資料，而網站要長成圓的還是扁的，完全是你自己說了算。Headless CMS會提供三樣東西：內容管理（新增/刪除文章）、文字編輯器，以及內容儲存API。

當然，天下沒有白吃的午餐。如果你想當個免費仔，通常會選擇GitHub作為文章的儲存庫（Git-based CMS）。但 GitHub 作為儲存方案有個致命傷：如果兩個人同時編輯同一篇文章，缺乏即時同步機制的 Git 就會發生衝突（Git conflict），不僅可能導致心血白費，網站管理員處理起來更是頭痛。為了解決這個痛點，許多好用的 CMS 都會改用傳統的雲端資料庫來支援多人即時協作——當然，這也意味著它們必須開始向你收費了。

另一方面，完全免費的開源 CMS（如 Decap CMS、Sveltia CMS），其內建的編輯器又著實不太好用。CMS 為了兼顧所有用戶，通常會做出許多妥協：塞滿你不需要的功能，但你想客製化的特殊功能它又做不到。

私心插一嘴：SveltiaCMS其實是個很優秀的開源專案，介面現代且完全免費。但致命傷在於，它不支援客製化的實時預覽（WYSIWYG）。如果我想在編輯器裡直接預覽LaTeX數學公式或是特殊的自定義組件，它完全做不到。這對我來說是個硬傷。或許未來它更新後會是個完美的解決方案，但現在，我只能繼續尋找別的出路。

全部客製化：Web框架 + 編輯器

前面的那麼多選擇，對於我這個免費仔來說都有各種各樣的缺點~~（要錢！）~~。在經過了很長一段時間的開發後，我終於受不了了，決定自己從頭做一個後台。

我此前最大的抱怨就是編輯器實在是不好用，但很幸運的是，開源界有很多超好用的神級編輯器框架，例如 TipTap 和 Milkdown。 他們最大的好處在，只提供插件。你可以根據自己的需求，拿著這些插件隨心所欲的組裝自己想要的編輯器。想要什麼客製化的功能？想要適配特定的格式？沒問題，自己動手就好了！

一般很少會有人走到像我這一步：又要多人協作，又要GitHub儲存，又要有預覽功能的編輯器，還不能收費。我早期開發部落格，在上網研究的時候，完全沒見到有這種組合方法，只能想盡辦法繞過各種CMS的限制。直到偶然發現可以單獨把Milkdown這類編輯器抽出來，結合Web框架自己寫介面，才讓我重新把擱置了幾個月的部落格拿出來大改。

雖然這條路一開始最難走，但看著一個完全免費、有著好用實時預覽，且100%自己設計的部落格後台在手中誕生，那種成就感，絕對是任何現成框架都給不了的。

總結

如果看到這裡，你還是不太確定應該怎麼選，可以參考以下表格：

希望這篇文章，能為正在猶豫如何架設部落格的你帶來一些收穫！也許之後我會再開一個新的文章，聊聊設計心得、或是開發教程之類的東西。但是嘛...我也還不清楚應該要從哪裡開始說就是了。

非常感謝你願意花時間看到這裡！