早就聽說過 Headless CMS，但一直沒在項目中使用過。最近，在構(gòu)建一個基于 Next.js 的 SaaS 模板，其中博客是一個重要部分，對后期的 SEO 非常關(guān)鍵。這次正好借此機會嘗試一下 Headless CMS。

Headless CMS 簡介

Headless CMS 是一種將內(nèi)容存儲和展示分離的內(nèi)容管理系統(tǒng)。開發(fā)者可以通過 API 獲取內(nèi)容，并在前端自由展示。其優(yōu)點包括：

• 靈活性：可以在不同平臺上展示相同的內(nèi)容。
• 可擴展性：易于集成第三方服務(wù)和工具。
• 開發(fā)效率：前后端分離，開發(fā)者可以專注于各自的領(lǐng)域。

Sanity CMS 的優(yōu)勢

Sanity 是一個強大的 Headless CMS，提供了實時協(xié)作和內(nèi)容版本控制等功能。其主要優(yōu)勢包括：

• 實時編輯：支持多人同時編輯內(nèi)容，實時更新。
• 可定制性：通過 Sanity Studio，開發(fā)者可以自定義內(nèi)容模型和編輯界面。
• 強大的 API：提供靈活的查詢語言，便于獲取和管理內(nèi)容。

選擇 Sanity 的原因之一是它的免費額度非?？犊阋詽M足大多數(shù)普通項目的需求。

Sanity 官方對 Next.js 的支持很好，提供了 next-sanity 庫，方便與 Next.js 項目集成。集成后，可以通過通用的 /studio 路徑訪問本地的 Sanity Studio。在 Sanity Studio 中，你可以輕松創(chuàng)建和管理內(nèi)容模型。

除了通過 Sanity Studio 管理內(nèi)容外，還可以通過 API 管理內(nèi)容。特別是在批量導(dǎo)入內(nèi)容時，API 的支持使得通過腳本導(dǎo)入內(nèi)容變得簡單。比如，這次做的小報童專欄導(dǎo)航站 ，就是通過腳本批量導(dǎo)入數(shù)據(jù)。導(dǎo)入過程中還需要處理圖片，所以相比導(dǎo)入文本數(shù)據(jù)稍微復(fù)雜一些。

需要注意的是，使用 Sanity API 需要了解 Sanity 開源的 Sanity Query Language —— GROQ，這是一種功能強大且易學(xué)的查詢語言。

*[_type == "post"] {
   _id,
  title,
  slug,
  publishedAt
}

使用 GROQ，你可以準確描述應(yīng)用程序所需的信息，連接來自不同文檔的信息，并只返回所需的字段。不過，現(xiàn)在有了 AI 輔助工具的加持，比如，功能超強的 Cursor IDE，只需給出預(yù)期結(jié)果，它就能生成對應(yīng)的 GROQ 查詢語句，整個開發(fā)過程非常順暢。

網(wǎng)站部署

Cloudflare 是一個活菩薩，提供了很多免費的服務(wù)。網(wǎng)站開發(fā)完成后，我直接將其部署到 Cloudflare Pages。部署過程很簡單，與 GitHub 集成后，每次 Push 代碼，Cloudflare 就會自動部署。

不過，部署時遇到了一個問題：Sanity Studio 生成的 Worker 腳本太大，超過了 Cloudflare Worker 免費賬戶 1M 的限制。最后，我采取了比較簡單粗暴的方式，在打包過程中移除 Sanity Studio。不然，之前正式環(huán)境是通過 middleware.ts 來控制 /studio 的訪問。

網(wǎng)站演示

https://xiaobot.batchtool.com/

專欄分類頁

搜索頁

目前站點的功能還比較簡單，還有其他一些已知功能尚未開發(fā)，近期有空會慢慢補充。網(wǎng)站開發(fā)完后，感覺 R2 + D1 + Pages All in Cloudflare 的方案，應(yīng)該也挺不錯。關(guān)于 Headless CMS，還有 Strapi CMS、Payload 或 directus 等開源的方案。