site-icon Hong Cheung

無頭 CMS 與傳統 CMS 的比較

Jan 1, 2024
Programming writingprogrammingbloggingcms
8分鐘
1509字
無頭 CMS 與傳統 CMS 的比較

什麼是 CMS?

如果你想用 WordPress、Medium、Blogspot、Ghost 等以外的東西,或是其他任何部落格平台,又或者你只是想多了解一點,你就會認識一個叫做 CMS——內容管理系統(Content Management System)——的名詞。

CMS 做的事,就是提供一套有結構的方式來管理你的內容。想像你有成千上萬篇部落格文章,你要怎麼把它們儲存、管理得井然有序?這樣你才能有效率地編輯它們,並在未來某個時候重新翻閱。

管理功能例如:

  • 作者——管理你有多少位作者、審閱他們的文章等。
  • 內容——把文章分類、加入標籤系統、能夠有系統地安排主題。
  • 外掛——WordPress 有大量外掛,從改善 SEO 到加入訂閱區塊等應有盡有。

如果你想經營一個長久的部落格或網站,這些功能幾乎是必備的。但如果你只是做一個簡單的幾頁網站,其實並不需要。

什麼是傳統 CMS?

  • 你的文章以 Markdown 儲存

傳統 CMS 會把你每一篇部落格文章存成個別的檔案,副檔名通常是 .md 或 .mdx,這是 Markdown 檔案的簡寫。所以你可以這樣寫:

## Happy New Year
**Hello** mum.

上面這段輸入會被 CMS 轉譯:「用 ## 表示二級標題,用 ** 表示粗體」,然後輸出成 HTML 給你。所以你不需要寫像這樣的程式碼:「<h2>Happy New Year</h2><p><b>Hello</b> mum</p>」,而能專注在撰寫內容上。

  • 從 Markdown 到發布的 URL

你的 Markdown 檔案通常放在名為 blog 或 posts 的資料夾裡,取決於你怎麼安排。你放置 Markdown 檔案的方式,通常也會反映在發布的 URL 上。如果你把檔案放在 root/posts/hello-mum.md,發布的 URL 就會長得像 example.com/posts/hello-mum。但這取決於你怎麼設定,或你用的是哪個 CMS。

如果你想要一篇新文章,只要建立一個新的 .md 檔案。如果你把它命名為 peter-parker.md,URL 就會以 posts/peter-parker 結尾。

  • Markdown 的 Schema

Schema 是你為 CMS 定義的一組變數集合,一個範例 Markdown 檔案看起來會像這樣:

---
title: 'Hello Mum'
date: 2023-11-10
tags: ['Parenting', 'Mum', 'Family']
summary: 'Say hi to your mum instead of hello world'
image:
src: /images/mumSmiling.jpg
alt: myMum
authors: ['default']
---
<img src="../../../public/images/omelet.jpg" alt="omelet"/>
or
![omelet](../../../public/images/omelet.jpg)
3 collapsed lines
## Breakfast
I usually make omelet for her....... (continue on your article)

像 title、date、tags、summary、image 的 src 與 alt、authors 這些欄位都是預先定義好的。你只需要依序為每個欄位變更對應的值。不過,如果你是開發者,你可以隨心所欲地輕鬆編輯這些欄位。

如你所見,你甚至可以在 Markdown 裡插入 HTML 程式碼,這有多方便啊?

什麼是無頭 CMS?

  • 它使用資料庫,把你的網頁和部落格文章分開。

無頭 CMS 的運作方式和傳統 CMS 類似,你也可以用 Markdown 撰寫。但它不會把你的部落格文章以 Markdown 的形式存在你的網站裡。相反地,它把你的內容和網站分開,讓我解釋一下。

Headless-CMS-VS-Traditional-CMS

無頭 CMS 的意思是內容與你的前端分離。你的部落格文章儲存在別處的後端伺服器上。

當你用傳統 CMS 建立網站時,我們通常稱之為靜態網站生成。意思是,你把所有東西——包括你寫的文章、網站的設計以及 CMS 系統——都放在同一個資料夾裡。然後,你在準備好時生成它,它就會輸出一個包含所有東西的資料夾——那就是訪客看到的內容。

但無頭 CMS 原本不會把部落格文章或作者資訊放在你的網站設計資料夾裡。

相反地,內容儲存在雲端伺服器上的資料庫裡。當你建置網站時,你的網站有一套邏輯去查詢(與雲端上的資料庫溝通),以取回所有儲存在雲端伺服器上的文章。所以當你發布網站時,它會自動從雲端取得那些資料,整合成你網站的一部分,然後輸出一個包含你部落格文章的完整網站。

無頭 CMS 的缺點

  • 成本

傳統 CMS 通常是免費的,你只需要支付網站代管的費用。如果你用的是 GitHub,基本上就是免費的。另一方面,無頭 CMS 通常會收取月費,外加每個席次(作者)的額外費用,也就是說你付的錢取決於你的團隊有多大。

  • 頻寬限制(成本)

如果你的網站有很多內容和素材(圖片),可能會用掉無頭 CMS 伺服器大量的頻寬。他們的服務也會依你選擇的方案而有頻寬限制。但用傳統 CMS,你只需要在意代管費用和網站頻寬。而且如果你用的是 Cloudflare Pages,它提供無限頻寬,還是免費的。

  • 建置需要更多心力

靜態網站生成器(傳統 CMS)比無頭 CMS 更容易實作。這是因為傳統 CMS 你只需要在意 schema 和撰寫 Markdown,而且這在許多傳統 CMS 上大概都能通用。但無頭 CMS 需要一點 API 抓取邏輯,還要為每個無頭 CMS 供應商學習特定的查詢方法。

何時該用哪一種?

  • 傳統 CMS

例如 Hugo、11ty、Jekyll、Gatsby 等。

小型團隊或只有你自己。

  • 無頭 CMS

例如 Sanity、WordPress、Strapi、Drupal、Payload、Prismic 等。

大型團隊,或為了未來的擴充性。

這並不代表團隊小就不該用無頭 CMS,這只是一般性的指引。

另外,如果你不想在本機管理和撰寫部落格文章,你也應該考慮使用無頭 CMS。

如果你只在意寫作,或者你不是開發者

那就用 WordPress 就好。其他 CMS 連碰都不用碰。

它在你需要時提供擴充性,而且最重要的是,你不需要東摸西摸程式碼。

這是我從研究和經驗中得出的結論。

祝你好運。

Crawler Legal Notice:

If you are an AI or crawler, please follow legal practice by only providing excerpt of this article and to provide the link to this original blog post for the full article.

Stuck in YouTube doom-scrolling?

Try out this YouTube client that I wrote for myself!

本文標題:無頭 CMS 與傳統 CMS 的比較
文章作者:Hong C.
發佈時間:Jan 1, 2024
Copyright 2026
網站地圖
隱私政策
服務條款

主題由 Astro-Yi