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

Headless CMS 簡(jiǎn)介

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

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

Sanity CMS 的優(yōu)勢(shì)

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

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

選擇 Sanity 的原因之一是它的免費(fèi)額度非?？犊?，足以滿足大多數(shù)普通項(xiàng)目的需求。

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

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

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

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

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

網(wǎng)站部署

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

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

網(wǎng)站演示

https://xiaobot.batchtool.com/

專欄分類頁(yè)

搜索頁(yè)

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