静态网站 CMS 组合工具调研报告

调研概述

本文档整理了当前主流的内容管理系统（CMS）工具，专注于与静态网站生成器结合使用的方案。这些工具能够让非技术人员也能轻松管理内容，同时保持静态网站的性能优势。

核心价值：

降低内容管理门槛，让非技术人员也能参与
保持静态网站的性能和安全优势
提供灵活的内容编辑体验
支持团队协作和版本控制

📖 快速导航

按类型分类

Headless CMS（自托管型） - 完全自主控制
- Strapi、Payload CMS、Directus
Git-based CMS - 基于Git的内容管理
- Tina CMS、Decap CMS、Netlify CMS
可视化编辑器 - 所见即所得
- Builder.io、Plasmic、Makeswift
云端 Headless CMS - 托管服务
- Sanity、Contentful、Prismic

按使用场景选择

完全控制 + 自托管 → Strapi、Payload CMS、Directus
Git 工作流 + 开发者友好 → Tina CMS、Decap CMS
可视化编辑 + 营销团队 → Builder.io、Plasmic
企业级 + 托管服务 → Sanity、Contentful
快速启动 + 低成本 → Decap CMS、Directus

一、Headless CMS（自托管型）

1. Strapi ⭐⭐⭐⭐⭐

官网: https://strapi.io/
GitHub: https://github.com/strapi/strapi
Stars: 62k+
技术栈: Node.js + React
开源协议: MIT（社区版）/ 企业版收费

核心特点

完全可定制的 API
- 自动生成 REST API 和 GraphQL API
- 支持自定义控制器和路由
- API 权限精细控制
直观的内容管理界面
- 拖拽式内容类型构建器
- 富文本编辑器（支持 Markdown）
- 媒体库管理
- 多语言内容支持（i18n）
灵活的数据库支持
- SQLite（开发）
- PostgreSQL、MySQL、MariaDB（生产）
- 自动数据库迁移
插件生态系统
- 官方插件：GraphQL、文档、国际化等
- 社区插件丰富
- 可自定义插件开发
角色和权限管理
- 细粒度权限控制
- 支持自定义角色
- API Token 管理

适用场景

企业级内容管理 - 需要完整的权限和工作流
多端内容分发 - Web、App、IoT 统一内容源
电商后台 - 产品管理、订单处理
API 优先的项目 - 需要灵活的 API 设计
团队协作 - 多角色、多权限管理

技术优势

✅ 优势

功能最完善的开源 Headless CMS
社区活跃，文档详尽
插件生态丰富
可完全自托管，无厂商锁定
支持 TypeScript
内置国际化支持
性能优秀，支持大规模项目

❌ 劣势

需要 Node.js 环境和数据库
初次部署配置较复杂
消耗服务器资源相对较多
企业版功能需付费（SSO、审计日志等）

与静态网站结合方案

// 方案 1: 构建时拉取数据
// Next.js + Strapi 示例
export async function getStaticProps() {
  const res = await fetch('https://your-strapi.com/api/articles')
  const articles = await res.json()
  return { props: { articles } }
}

// 方案 2: Webhook 触发重新构建
// Strapi 内容更新 → Webhook → Vercel/Netlify 重新部署
// 配置路径: Settings → Webhooks

// 方案 3: ISR (Incremental Static Regeneration)
export async function getStaticProps() {
  const res = await fetch('https://your-strapi.com/api/articles')
  const articles = await res.json()
  return {
    props: { articles },
    revalidate: 60 // 每60秒重新验证
  }
}

部署方式

自托管
- VPS（Hetzner, DigitalOcean, Linode）
- Docker 容器部署
- Kubernetes 集群
平台托管
- Railway
- Render
- DigitalOcean App Platform
- Heroku（已不推荐）
Strapi Cloud（官方托管，付费）

定价模式

免费：社区版，完全开源
付费：企业版 $999+/月（SSO、审计日志、SLA 支持）
Strapi Cloud：$99+/月（托管服务）

评分

易用性: ⭐⭐⭐⭐ (4/5)
功能完整性: ⭐⭐⭐⭐⭐ (5/5)
性能: ⭐⭐⭐⭐ (4/5)
灵活性: ⭐⭐⭐⭐⭐ (5/5)
社区支持: ⭐⭐⭐⭐⭐ (5/5)
学习曲线: ⭐⭐⭐ (3/5 - 中等)

2. Payload CMS ⭐⭐⭐⭐⭐

官网: https://payloadcms.com/
GitHub: https://github.com/payloadcms/payload
Stars: 25k+
技术栈: Node.js + React + TypeScript + MongoDB
开源协议: MIT

核心特点

代码优先的配置
- 完全 TypeScript 支持
- 配置即代码，版本控制友好
- 类型安全的 API
本地化 API（Local API）
- 可以在服务端直接调用 CMS 功能
- 无需 HTTP 请求，性能极佳
- 非常适合 Next.js App Router
强大的字段类型系统
- 丰富的内置字段类型
- 块编辑器（Block Editor）
- 关系型字段
- 数组和组合字段
访问控制
- 基于角色的权限控制
- 文档级权限
- 字段级权限
版本管理和草稿
- 内容版本历史
- 草稿/发布工作流
- 内容恢复功能
内置认证
- JWT 认证
- 邮箱验证
- 密码重置
- 会话管理

适用场景

Next.js 项目 - 可以直接集成到 Next.js 应用
TypeScript 项目 - 类型安全的内容管理
复杂数据模型 - 关系型数据、嵌套结构
开发者主导 - 代码配置，Git 工作流
高性能需求 - Local API 避免网络开销

技术优势

✅ 优势

TypeScript 原生支持，类型安全
Local API 性能极佳（与 Next.js 集成）
现代化架构，代码配置
版本管理和草稿功能强大
可以与应用代码在同一仓库
文档清晰，社区活跃
3.0 版本支持 Postgres（2024更新）

❌ 劣势

默认需要 MongoDB（3.0支持Postgres）
配置需要编写代码，非技术人员门槛高
相对 Strapi 插件生态较小
UI 自定义需要 React 知识

与静态网站结合方案

// 方案 1: Next.js App Router + Local API
// app/blog/page.tsx
import { getPayloadHMR } from '@payloadcms/next'
import config from '@payload-config'

export default async function BlogPage() {
  const payload = await getPayloadHMR({ config })

  const posts = await payload.find({
    collection: 'posts',
    limit: 10,
  })

  return <div\>{/* 渲染内容 */}</div\>
}

// 方案 2: 作为独立 CMS，通过 API 调用
const res = await fetch('https://your-payload.com/api/posts')
const { docs: posts } = await res.json()

// 方案 3: Webhook 触发构建
// Payload Hook 配置
{
  afterChange: [
    async ({ doc }) =\> {
      await fetch('https://api.vercel.com/v1/integrations/deploy/...', {
        method: 'POST'
      })
    }
  ]
}

部署方式

集成部署（推荐）
- 与 Next.js 应用同一项目
- 部署到 Vercel/Netlify
- 使用 Payload Cloud 数据库（或 MongoDB Atlas）
独立部署
- VPS + MongoDB
- Docker 容器
- Payload Cloud（官方托管）

定价模式

免费：完全开源，自托管
Payload Cloud：$35+/月（托管服务，包含数据库）

评分

易用性: ⭐⭐⭐ (3/5 - 需要编码)
功能完整性: ⭐⭐⭐⭐⭐ (5/5)
性能: ⭐⭐⭐⭐⭐ (5/5 - Local API)
灵活性: ⭐⭐⭐⭐⭐ (5/5)
社区支持: ⭐⭐⭐⭐ (4/5)
学习曲线: ⭐⭐ (2/5 - 较陡峭)

3. Directus ⭐⭐⭐⭐⭐

官网: https://directus.io/
GitHub: https://github.com/directus/directus
Stars: 28k+
技术栈: Node.js + Vue.js + SQL
开源协议: GPL v3（开源版）/ 商业版可用

核心特点

数据库优先（Database-First）
- 可以连接现有数据库（MySQL、PostgreSQL、SQLite、MS SQL、Oracle、MariaDB等）
- 不修改数据库结构，只添加必要的元数据表
- 可以与现有应用共享数据库
即时 API 生成
- 自动生成 REST API
- 自动生成 GraphQL API
- 实时 WebSocket 支持
无头架构
- 完全解耦的前后端
- 可以作为任何项目的数据层
强大的数据管理界面
- 可视化查询构建器
- 批量编辑
- 数据可视化（图表、地图）
- 支持自定义布局
文件管理
- 支持本地存储
- 支持云存储（S3、GCS、Azure、Cloudinary）
- 图片变换和优化
流程自动化（Flows）
- 可视化工作流编辑器
- 触发器和操作
- 数据转换
- 外部集成（类似 Zapier）

适用场景

现有数据库项目 - 需要为已有数据库添加管理界面
数据驱动应用 - 复杂的数据关系和查询
多应用共享数据 - 一个数据库服务多个应用
内部工具 - 快速构建管理后台
IoT 数据管理 - 实时数据收集和展示

技术优势

✅ 优势

可以连接现有数据库，无需迁移
支持最多种类的数据库
不锁定数据结构，直接使用 SQL
强大的 Flows 自动化功能
UI 美观，用户体验好
支持多种存储后端
实时数据同步（WebSocket）
完全开源，无功能限制

❌ 劣势

GPL 协议（商业项目需购买许可）
配置相对复杂
需要数据库知识
对非技术人员门槛较高

与静态网站结合方案

// 方案 1: REST API 调用
const response = await fetch('https://your-directus.com/items/articles')
const { data } = await response.json()

// 方案 2: GraphQL 查询
const query = `
  query {
    articles {
      id
      title
      content
      author {
        name
      }
    }
  }
`

// 方案 3: SDK 使用
import { createDirectus, rest } from '@directus/sdk'

const client = createDirectus('https://your-directus.com').with(rest())
const articles = await client.request(readItems('articles'))

// 方案 4: Flows 触发 Webhook
// Directus Flows → 内容更新时 → POST 到 Netlify/Vercel Webhook

部署方式

Docker（推荐）

docker run -d \
  -p 8055:8055 \
  -e DB_CLIENT=postgres \
  -e DB_HOST=your-db-host \
  directus/directus

Node.js 部署
- VPS + PM2
- Railway、Render
Directus Cloud（官方托管）

定价模式

免费：开源版，完全功能
商业许可：$2500+（用于商业项目，避免 GPL）
Directus Cloud：
- 免费版：1个项目
- 专业版：$15+/月
- 企业版：定制价格

评分

易用性: ⭐⭐⭐⭐ (4/5)
功能完整性: ⭐⭐⭐⭐⭐ (5/5)
性能: ⭐⭐⭐⭐ (4/5)
灵活性: ⭐⭐⭐⭐⭐ (5/5 - 数据库层面)
社区支持: ⭐⭐⭐⭐ (4/5)
学习曲线: ⭐⭐⭐ (3/5 - 需要数据库知识)

二、Git-based CMS

1. Tina CMS ⭐⭐⭐⭐⭐

官网: https://tina.io/
GitHub: https://github.com/tinacms/tinacms
Stars: 12k+
技术栈: React + Next.js + GraphQL
开源协议: Apache 2.0

核心特点

可视化编辑体验
- 在实际页面上直接编辑内容
- 实时预览更改
- 侧边栏编辑器
Git 作为数据源
- 内容存储在 Git 仓库（Markdown/JSON）
- 版本控制天然支持
- 可以直接在 GitHub/GitLab 上查看和编辑
GraphQL API
- 自动生成类型安全的 GraphQL API
- 支持关系型查询
- 构建时数据查询
TypeScript 支持
- 完全类型安全的内容模型
- 自动生成 TypeScript 类型
Schema 定义
- 代码定义内容结构
- 支持自定义字段类型
- 可扩展的字段组件
多媒体管理
- 支持 Git、Cloudinary、S3 等存储
- 图片优化
- 拖拽上传

适用场景

Next.js/React 项目 - 深度集成
Markdown 博客 - 可视化编辑 Markdown
开发者 + 内容团队协作 - Git 工作流 + 可视化编辑
静态网站 - 保持文件系统简单
个人/小团队项目 - 免费层充足

技术优势

✅ 优势

可视化编辑体验极佳（所见即所得）
内容存储在 Git，无厂商锁定
TypeScript 类型安全
与 Next.js 集成完美
免费层非常慷慨（2个用户免费）
支持本地开发
社区活跃

❌ 劣势

主要针对 React 生态
需要 Tina Cloud（或自建 GraphQL 服务）
大型团队需付费
多媒体存储需要额外配置

与静态网站结合方案

// 方案 1: Next.js 页面直接使用
// app/posts/[slug]/page.tsx
import { client } from '../../../tina/__generated__/client'

export default async function PostPage({ params }) {
  const { data } = await client.queries.post({
    relativePath: `${params.slug}.md`,
  })

  return <div\>{data.post.title}</div\>
}

// 方案 2: 可视化编辑模式
// pages/posts/[slug].tsx
import { useTina } from 'tinacms/dist/react'

export default function Post(props) {
  const { data } = useTina({
    query: props.query,
    variables: props.variables,
    data: props.data,
  })

  return <\>{/* 渲染内容，支持实时编辑 */}</\>
}

// 方案 3: Schema 定义（tina/config.ts）
export default defineConfig({
  schema: {
    collections: [
      {
        name: 'post',
        label: 'Posts',
        path: 'content/posts',
        fields: [
          { type: 'string', name: 'title', label: 'Title' },
          { type: 'rich-text', name: 'body', label: 'Body' },
        ],
      },
    ],
  },
})

部署方式

Tina Cloud（推荐）
- 免费：2个用户
- 付费：$29+/月（更多用户）
自托管
- 需要自建 GraphQL 后端
- 使用 Tina Cloud 的免费数据层

定价模式

免费：2个编辑用户，无限项目
团队版：$29/月起（更多用户）
企业版：定制价格

评分

易用性: ⭐⭐⭐⭐⭐ (5/5 - 可视化编辑)
功能完整性: ⭐⭐⭐⭐ (4/5)
性能: ⭐⭐⭐⭐⭐ (5/5 - 静态生成)
灵活性: ⭐⭐⭐⭐ (4/5)
社区支持: ⭐⭐⭐⭐ (4/5)
学习曲线: ⭐⭐⭐ (3/5 - 需要 React 知识)

2. Decap CMS ⭐⭐⭐⭐

（原 Netlify CMS，已独立）

官网: https://decapcms.org/
GitHub: https://github.com/decaporg/decap-cms
Stars: 18k+
技术栈: React + Git
开源协议: MIT

核心特点

纯前端 CMS
- 单页应用，运行在浏览器中
- 无需后端服务器
- 直接连接 Git 仓库
Git Gateway 支持
- 通过 Netlify/GitHub/GitLab 认证
- 无需 Git 权限也能编辑
- 自动提交和 PR
简单配置
- 单个 YAML 配置文件
- 快速上手
工作流支持
- 编辑草稿
- 发布审核流程
- 状态管理
媒体库
- 支持多种存储后端
- 图片上传和管理
框架无关
- 可以与任何静态网站生成器配合
- Hugo、Jekyll、Eleventy、Gatsby 等

适用场景

Jekyll/Hugo 博客 - 传统静态网站
无后端项目 - 纯静态托管
小型团队 - 简单的内容管理
快速原型 - 最快启动的 CMS
非 React 项目 - 框架无关

技术优势

✅ 优势

完全免费开源
无需后端，部署简单
配置简单（一个 YAML 文件）
框架无关
支持所有主流 Git 平台
内容存储在 Git，无厂商锁定
成熟稳定

❌ 劣势

功能相对简单
UI 较为基础
社区活跃度下降（从 Netlify CMS 独立后）
不支持实时预览（需要额外配置）
大型项目性能一般

与静态网站结合方案

# 配置文件：admin/config.yml
backend:
  name: git-gateway
  branch: main

media_folder: "static/images"
public_folder: "/images"

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Date", name: "date", widget: "datetime" }
      - { label: "Body", name: "body", widget: "markdown" }

<!-- 添加到网站：admin/index.html --\>
<!DOCTYPE html\>
<html\>
<head\>
  \<meta charset="utf-8" /\>
  <title\>Content Manager</title\>
</head\>
<body\>
  \<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"\></script\>
</body\>
</html\>

部署方式

零配置部署
- 添加 admin/ 文件夹到项目
- 配置 Git Gateway（Netlify）
- 访问 yoursite.com/admin
自托管认证
- 使用 Git OAuth 应用
- 自建认证服务

定价模式

完全免费：开源，无任何费用
Git Gateway（Netlify）：免费层充足

评分

易用性: ⭐⭐⭐⭐⭐ (5/5 - 配置最简单)
功能完整性: ⭐⭐⭐ (3/5 - 基础功能)
性能: ⭐⭐⭐ (3/5)
灵活性: ⭐⭐⭐ (3/5)
社区支持: ⭐⭐⭐ (3/5)
学习曲线: ⭐⭐⭐⭐⭐ (5/5 - 最容易上手)

3. Keystatic ⭐⭐⭐⭐

官网: https://keystatic.com/
GitHub: https://github.com/Thinkmill/keystatic
Stars: 9k+
技术栈: React + Next.js
开源协议: MIT

核心特点

本地优先
- 可以完全在本地运行
- 无需云服务即可使用
- 也支持 GitHub/GitLab 集成
内容组件（Content Components）
- 可组合的内容块
- 类似 Notion 的块编辑器
- 自定义组件支持
类型安全
- TypeScript 原生支持
- 自动生成类型定义
文件系统优先
- Markdown/JSON 文件
- Git 版本控制
- 可直接手动编辑
支持 React Server Components
- 与 Next.js 13+ 完美集成
- 服务端读取内容

适用场景

Next.js 项目 - 深度集成
本地开发优先 - 无需云服务
开发者 + 编辑协作 - Git + UI
组件化内容 - 复杂的内容结构

技术优势

✅ 优势

可完全本地运行
现代化 UI，用户体验好
与 Next.js App Router 完美集成
免费无限制
内容组件功能强大
TypeScript 类型安全

❌ 劣势

相对较新，生态尚在发展
主要针对 React/Next.js
文档还在完善中
社区较小

定价模式

完全免费：开源，无任何限制

评分

易用性: ⭐⭐⭐⭐ (4/5)
功能完整性: ⭐⭐⭐⭐ (4/5)
性能: ⭐⭐⭐⭐⭐ (5/5)
灵活性: ⭐⭐⭐⭐ (4/5)
社区支持: ⭐⭐⭐ (3/5 - 新项目)
学习曲线: ⭐⭐⭐ (3/5)

三、可视化编辑器

1. Builder.io ⭐⭐⭐⭐⭐

官网: https://www.builder.io/
GitHub: https://github.com/BuilderIO/builder
Stars: 7k+
技术栈: 框架无关
开源协议: MIT（SDK）/ 商业产品

核心特点

可视化拖拽编辑器
- 所见即所得
- 拖拽组件构建页面
- 实时预览
- 响应式设计
代码组件集成
- 可以导入 React/Vue/Angular 组件
- 在可视化编辑器中使用自定义组件
- Design Tokens 支持
A/B 测试
- 内置 A/B 测试功能
- 个性化内容
- 受众定位
性能优化
- 自动代码分割
- 图片优化
- 生成优化的代码
框架支持
- React、Vue、Angular、Svelte
- Next.js、Nuxt、Qwik
- 纯 HTML/JavaScript
AI 功能（2025）
- AI 生成页面
- AI 内容优化
- AI 设计建议

适用场景

营销落地页 - A/B 测试、转化优化
电商产品页 - 快速迭代页面
营销团队主导 - 无需开发即可创建页面
多变化测试 - 快速实验不同设计
企业级项目 - 需要完整的营销工具链

技术优势

✅ 优势

可视化编辑体验最佳
支持所有主流框架
A/B 测试和分析功能强大
性能优秀（生成优化代码）
可以使用自定义组件
AI 功能领先
企业级支持

❌ 劣势

免费层限制较多
商业产品，定价较高
学习曲线陡峭（功能多）
过度依赖可能导致厂商锁定

与静态网站结合方案

// Next.js 示例
import { builder, BuilderComponent } from '@builder.io/react'

builder.init('YOUR_API_KEY')

export async function getStaticProps({ params }) {
  const page = await builder
    .get('page', { url: `/${params.slug}` })
    .toPromise()

  return { props: { page } }
}

export default function Page({ page }) {
  return \<BuilderComponent model="page" content={page} /\>
}

// 注册自定义组件
Builder.registerComponent(MyCustomComponent, {
  name: 'MyComponent',
  inputs: [
    { name: 'title', type: 'string' },
  ],
})

部署方式

CDN 托管：Builder.io 托管内容
静态生成：构建时拉取内容
边缘渲染：Vercel Edge Functions

定价模式

免费：1000 次访问/月，基础功能
成长版：$29+/月（10万访问）
商业版：$299+/月（100万访问，A/B测试）
企业版：定制价格（无限访问）

评分

易用性: ⭐⭐⭐⭐⭐ (5/5 - 非技术人员可用)
功能完整性: ⭐⭐⭐⭐⭐ (5/5)
性能: ⭐⭐⭐⭐ (4/5)
灵活性: ⭐⭐⭐⭐⭐ (5/5)
社区支持: ⭐⭐⭐⭐ (4/5)
学习曲线: ⭐⭐⭐ (3/5 - 功能多)

2. Plasmic ⭐⭐⭐⭐

官网: https://www.plasmic.app/
GitHub: https://github.com/plasmicapp/plasmic
Stars: 5k+
技术栈: React
开源协议: MIT（SDK）/ 商业产品

核心特点

设计工具级别的编辑器
- 类似 Figma 的编辑体验
- 精确的像素级控制
- 强大的设计系统支持
代码组件导入
- 导入现有 React 组件
- 在编辑器中配置 props
- 保持代码和设计同步
设计系统管理
- Design Tokens
- 组件变体（Variants）
- 主题管理
- 全局样式
内容管理
- CMS 功能内置
- 页面和组件版本控制
- 多语言支持
开发者友好
- 生成 TypeScript 代码
- 与 Git 集成
- 本地开发工作流
无头架构
- 可以只用作设计工具
- 导出代码到项目

适用场景

设计系统驱动的项目 - 需要精确的设计控制
设计师 + 开发者协作 - Figma to Code
复杂的 UI 组件 - 高度定制化
React 项目 - 深度集成
产品页面 - 营销内容快速迭代

技术优势

✅ 优势

设计工具体验最接近 Figma
代码质量高（可导出 React 代码）
设计系统功能强大
支持复杂的组件变体
开发者工作流友好
免费层功能充足

❌ 劣势

主要针对 React
学习曲线陡峭（设计工具复杂）
社区相对较小
某些高级功能需付费

定价模式

免费：无限页面，基础功能
成长版：$15+/月（更多协作功能）
商业版：$100+/月（企业功能）
企业版：定制价格

评分

易用性: ⭐⭐⭐⭐ (4/5 - 设计师友好)
功能完整性: ⭐⭐⭐⭐⭐ (5/5)
性能: ⭐⭐⭐⭐ (4/5)
灵活性: ⭐⭐⭐⭐⭐ (5/5)
社区支持: ⭐⭐⭐ (3/5)
学习曲线: ⭐⭐ (2/5 - 较陡峭)

3. Makeswift ⭐⭐⭐⭐

官网: https://www.makeswift.com/
GitHub: https://github.com/makeswift/makeswift
Stars: 500+
技术栈: Next.js + React
开源协议: MIT（SDK）

核心特点

Next.js 原生集成
- 专为 Next.js 设计
- 支持 App Router 和 Pages Router
- SSR/SSG 完美支持
可视化页面构建器
- 拖拽编辑
- 实时预览
- 响应式设计
组件市场
- 预制组件库
- 可自定义组件
- 组件共享
内容管理
- 页面管理
- 版本控制
- 发布工作流

适用场景

Next.js 营销网站 - 快速构建落地页
小型企业网站 - 简单易用
初创公司 - 快速迭代

技术优势

✅ 优势

Next.js 集成最简单
界面简洁易用
免费层可用
性能优秀

❌ 劣势

功能相对简单
仅支持 Next.js
社区很小
生态不完善

定价模式

免费：基础功能
付费：$29+/月

评分

易用性: ⭐⭐⭐⭐⭐ (5/5)
功能完整性: ⭐⭐⭐ (3/5)
性能: ⭐⭐⭐⭐ (4/5)
灵活性: ⭐⭐⭐ (3/5)
社区支持: ⭐⭐ (2/5)
学习曲线: ⭐⭐⭐⭐⭐ (5/5 - 非常简单)

四、云端 Headless CMS

1. Sanity ⭐⭐⭐⭐⭐

官网: https://www.sanity.io/
GitHub: https://github.com/sanity-io/sanity
Stars: 5k+
技术栈: React + JavaScript/TypeScript
开源协议: MIT

核心特点

实时协作编辑
- 类似 Google Docs 的实时编辑
- 多人同时编辑
- 即时同步
Portable Text
- 结构化的富文本格式
- 平台无关
- 可序列化为任何格式
GROQ 查询语言
- 强大的查询语法
- 类似 GraphQL 的灵活性
- 支持复杂关联查询
Sanity Studio
- 完全可定制的编辑界面
- 基于 React 组件
- 可以嵌入到应用中
图片处理
- 实时图片变换
- 智能裁剪
- WebP/AVIF 支持
- CDN 全球加速
版本控制
- 完整的历史记录
- 时间旅行查询
- 内容恢复
灵活的数据模型
- Schema 定义灵活
- 支持任意数据结构
- 无需迁移即可修改

适用场景

大型内容网站 - 复杂的内容关系
多端内容分发 - 一次编辑，多端使用
实时协作 - 多人编辑团队
电商平台 - 产品内容管理
企业级应用 - 需要可靠的托管服务
国际化项目 - 多语言内容

技术优势

✅ 优势

实时协作功能最强
GROQ 查询语言强大灵活
图片处理 CDN 性能优秀
Studio 完全可定制
免费层非常慷慨
社区活跃，插件丰富
企业级可靠性（99.9% SLA）
Portable Text 跨平台最佳

❌ 劣势

需要学习 GROQ 语法
云服务，有厂商锁定风险
大流量时成本较高
Studio 定制需要 React 知识

与静态网站结合方案

// 方案 1: GROQ 查询
import { createClient } from '@sanity/client'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  apiVersion: '2024-01-01',
})

const posts = await client.fetch(`
  *[_type == "post"] {
    title,
    slug,
    body,
    "author": author-\>name
  }
`)

// 方案 2: Next.js 集成
import { sanityFetch } from '@/sanity/lib/fetch'

export default async function BlogPage() {
  const posts = await sanityFetch({
    query: `*[_type == "post"]`,
    revalidate: 60, // ISR
  })

  return <div\>{/* 渲染 */}</div\>
}

// 方案 3: Webhook 触发构建
// Sanity Dashboard → API → Webhooks
// POST to https://api.vercel.com/v1/integrations/deploy/...

部署方式

Sanity Cloud（官方托管）
- 全球 CDN
- 自动扩展
- 99.9% SLA
Studio 部署
- Vercel/Netlify（推荐）
- 自托管

定价模式

免费：
- 3个用户
- 10GB 带宽
- 100k API 请求
- 无限文档
成长版：$99/月
- 无限用户
- 500GB 带宽
- 1M API 请求
企业版：定制价格
- SLA 保证
- 专属支持
- SAML SSO

评分

易用性: ⭐⭐⭐⭐ (4/5)
功能完整性: ⭐⭐⭐⭐⭐ (5/5)
性能: ⭐⭐⭐⭐⭐ (5/5 - CDN 优秀)
灵活性: ⭐⭐⭐⭐⭐ (5/5)
社区支持: ⭐⭐⭐⭐⭐ (5/5)
学习曲线: ⭐⭐⭐ (3/5 - GROQ 需要学习)

2. Contentful ⭐⭐⭐⭐⭐

官网: https://www.contentful.com/
GitHub: https://github.com/contentful
技术栈: 云服务
开源协议: 商业产品

核心特点

企业级 Headless CMS
- 成熟稳定，市场领导者
- 大企业广泛使用（Nike、Shopify、Spotify）
- 99.99% SLA
灵活的内容模型
- 自定义内容类型
- 关系型数据
- 模块化内容
多语言支持
- 内置国际化
- 本地化工作流
- 翻译管理
强大的 API
- REST API
- GraphQL API
- Preview API（草稿预览）
- Images API（图片处理）
内容发布工作流
- 草稿/发布状态
- 定时发布
- 版本控制
- 环境管理（dev/staging/prod）
应用框架（App Framework）
- 可扩展编辑器
- 自定义字段类型
- 第三方集成

适用场景

企业级网站 - 需要 SLA 保证
全球化品牌 - 多语言、多地区
大型团队 - 复杂的权限和工作流
全渠道内容 - Web、App、IoT 统一管理
电商平台 - 产品内容管理

技术优势

✅ 优势

企业级稳定性和可靠性
功能最完整
全球 CDN 性能优秀
多语言支持最好
生态系统成熟（集成、插件）
详尽的文档和培训
专业的技术支持

❌ 劣势

定价昂贵（企业级）
免费层限制较多
学习曲线陡峭
厂商锁定风险高
小项目性价比低

与静态网站结合方案

// 方案 1: REST API
const res = await fetch(
  `https://cdn.contentful.com/spaces/${spaceId}/entries?content_type=blogPost`,
  {
    headers: {
      Authorization: `Bearer ${accessToken}`
    }
  }
)

// 方案 2: GraphQL API
const query = `
  query {
    blogPostCollection {
      items {
        title
        slug
        content
        author {
          name
        }
      }
    }
  }
`

// 方案 3: SDK 使用
import { createClient } from 'contentful'

const client = createClient({
  space: 'your-space-id',
  accessToken: 'your-token'
})

const entries = await client.getEntries({ content_type: 'blogPost' })

部署方式

Contentful Cloud（仅托管服务）
- 全球 CDN
- 自动扩展
- 99.99% SLA

定价模式

免费：
- 2个用户
- 25k 记录
- 48种内容类型
- 基础功能
团队版：$489/月
- 5个用户
- 50k 记录
- 环境管理
企业版：定制价格
- 无限用户
- 无限记录
- 高级功能
- SLA 保证

评分

易用性: ⭐⭐⭐⭐ (4/5)
功能完整性: ⭐⭐⭐⭐⭐ (5/5)
性能: ⭐⭐⭐⭐⭐ (5/5)
灵活性: ⭐⭐⭐⭐ (4/5)
社区支持: ⭐⭐⭐⭐⭐ (5/5)
学习曲线: ⭐⭐⭐ (3/5)

3. Prismic ⭐⭐⭐⭐

官网: https://prismic.io/
GitHub: https://github.com/prismicio
技术栈: 云服务
开源协议: 商业产品

核心特点

Slice Machine
- 组件化内容编辑
- 可重用的内容块（Slices）
- 本地开发工作流
开发者体验优先
- TypeScript 类型生成
- 本地 Slice 开发
- Git 集成
页面构建器
- 可视化页面组装
- 组件库管理
- 变体支持
多语言和多站点
- 内置本地化
- 多仓库（Multi-Repo）支持
- 地区定制
预览和发布
- 实时预览
- 草稿/发布
- 版本控制
性能优化
- 全球 CDN
- 图片优化
- 缓存策略

适用场景

营销网站 - 页面快速迭代
多语言站点 - 国际化内容
组件化设计系统 - Slices 适合
Next.js 项目 - 深度集成

技术优势

✅ 优势

Slice Machine 开发体验优秀
TypeScript 支持好
多语言功能强大
免费层充足
与 Next.js 集成完美
界面美观易用
价格相对合理

❌ 劣势

功能相对 Contentful/Sanity 较少
社区相对较小
某些高级功能需付费
Slice 概念需要学习

定价模式

免费：
- 1个用户
- 无限文档
- 基础功能
小型团队：€7/用户/月
- 3+ 用户
- 多语言
中型团队：€25/用户/月
- 高级功能
企业版：定制价格

评分

易用性: ⭐⭐⭐⭐⭐ (5/5)
功能完整性: ⭐⭐⭐⭐ (4/5)
性能: ⭐⭐⭐⭐ (4/5)
灵活性: ⭐⭐⭐⭐ (4/5)
社区支持: ⭐⭐⭐ (3/5)
学习曲线: ⭐⭐⭐⭐ (4/5)

五、技术选型对比

快速对比表

CMS	类型	免费层	学习曲线	最佳场景	推荐指数
Strapi	Headless（自托管）	✅ 完全免费	中等	企业级、完全控制	⭐⭐⭐⭐⭐
Payload	Headless（自托管）	✅ 完全免费	较难	Next.js、TypeScript	⭐⭐⭐⭐⭐
Directus	Headless（自托管）	✅ 完全免费	中等	现有数据库、数据管理	⭐⭐⭐⭐⭐
Tina CMS	Git-based	✅ 2用户免费	中等	Next.js、可视化编辑	⭐⭐⭐⭐⭐
Decap CMS	Git-based	✅ 完全免费	简单	静态网站、快速启动	⭐⭐⭐⭐
Keystatic	Git-based	✅ 完全免费	中等	Next.js、本地优先	⭐⭐⭐⭐
Builder.io	可视化编辑器	❌ 1k访问/月	较难	营销页、A/B测试	⭐⭐⭐⭐⭐
Plasmic	可视化编辑器	✅ 无限页面	较难	设计系统、React	⭐⭐⭐⭐
Makeswift	可视化编辑器	✅ 基础功能	简单	Next.js、简单需求	⭐⭐⭐⭐
Sanity	云端 Headless	✅ 3用户免费	中等	实时协作、企业级	⭐⭐⭐⭐⭐
Contentful	云端 Headless	❌ 2用户/25k记录	较难	大型企业、全球化	⭐⭐⭐⭐⭐
Prismic	云端 Headless	✅ 1用户免费	简单	营销网站、多语言	⭐⭐⭐⭐

按使用场景选择

🎯 个人博客 / 小型项目

Decap CMS - 最简单，零成本
Tina CMS - 可视化编辑，免费2用户
Keystatic - 本地优先，完全免费

🏢 企业级内容管理

Strapi - 完全控制，功能完整
Contentful - 企业级稳定性
Sanity - 实时协作，灵活强大

🚀 营销/落地页

Builder.io - A/B测试，转化优化
Plasmic - 设计系统，像素级控制
Prismic - 组件化，快速迭代

💻 开发者优先项目

Payload CMS - TypeScript，Next.js集成
Directus - 数据库优先，SQL控制
Tina CMS - Git工作流，可视化编辑

🌍 多语言/全球化

Contentful - 多语言支持最好
Prismic - 本地化功能强大
Sanity - 灵活的多语言方案

⚡ 快速启动/原型

Decap CMS - 配置最简单
Makeswift - Next.js 一键集成
Prismic - 开箱即用

按技术栈选择

Next.js / React

最佳：Payload CMS、Tina CMS
次选：Sanity、Builder.io、Plasmic

Vue / Nuxt

最佳：Strapi、Directus
次选：Sanity、Decap CMS

静态网站（Hugo/Jekyll/Eleventy）

最佳：Decap CMS
次选：Contentful、Sanity

框架无关

最佳：Strapi、Directus
次选：Sanity、Contentful

按预算选择

零成本（完全免费）

Strapi - 自托管，完全免费
Payload CMS - 自托管，完全免费
Directus - 自托管，完全免费
Decap CMS - 纯前端，完全免费
Keystatic - 本地运行，完全免费

小预算（$0-50/月）

Tina CMS - 免费层（2用户）
Prismic - €7/用户
Sanity - 免费层充足
Builder.io - $29/月（成长版）

中等预算（$50-500/月）

Sanity - $99/月（成长版）
Builder.io - $299/月（商业版）
Contentful - $489/月（团队版）

大预算（$500+/月）

Contentful - 企业版
Builder.io - 企业版
Strapi - 企业版（$999+/月）

六、决策流程图

是否需要完全自主控制和自托管？
├─ 是 → Headless CMS（自托管）
│   ├─ 需要最完整的功能 → Strapi
│   ├─ Next.js + TypeScript → Payload CMS
│   └─ 连接现有数据库 → Directus
│
└─ 否 ↓

是否基于 Git 工作流？
├─ 是 → Git-based CMS
│   ├─ 需要可视化编辑 → Tina CMS
│   ├─ 最简单的方案 → Decap CMS
│   └─ 本地优先开发 → Keystatic
│
└─ 否 ↓

是否需要可视化拖拽编辑？
├─ 是 → 可视化编辑器
│   ├─ 营销页 + A/B测试 → Builder.io
│   ├─ 设计系统 + 精确控制 → Plasmic
│   └─ Next.js 简单方案 → Makeswift
│
└─ 否 ↓

预算和规模如何？
├─ 大型企业 → Contentful
├─ 中型团队 → Sanity
└─ 小型团队 → Prismic

七、最佳实践建议

1. 技术选型原则

✅ 优先考虑

团队技术栈匹配度
预算和运营成本
非技术人员使用难度
未来扩展性
厂商锁定风险

❌ 避免陷阱

过度工程（功能过剩）
忽视运维成本（自托管需要维护）
只看免费层（增长后成本激增）
忽视学习曲线（团队培训成本）

2. 与静态网站集成最佳实践

构建时渲染（SSG）

适合内容更新不频繁的网站
性能最佳，SEO 友好
需要配置 Webhook 触发重新构建

// Next.js 示例
export async function getStaticProps() {
  const content = await cms.getContent()
  return {
    props: { content },
    revalidate: false // 纯静态
  }
}

增量静态再生（ISR）

适合内容更新中等频率
平衡性能和实时性
无需手动触发构建

export async function getStaticProps() {
  const content = await cms.getContent()
  return {
    props: { content },
    revalidate: 60 // 60秒后重新验证
  }
}

服务端渲染（SSR）

适合实时性要求高的内容
每次请求都获取最新数据
性能相对较低

export async function getServerSideProps() {
  const content = await cms.getContent()
  return { props: { content } }
}

客户端渲染（CSR）

适合个性化内容
SEO 不友好（需要额外处理）
用户体验可能较差（加载时间）

'use client'
import { useEffect, useState } from 'react'

export default function Page() {
  const [content, setContent] = useState(null)

  useEffect(() =\> {
    cms.getContent().then(setContent)
  }, [])

  return <div\>{content}</div\>
}

3. 内容模型设计建议

保持简单

不要过度设计内容类型
从简单开始，逐步扩展
避免过深的嵌套

可重用性

创建可复用的组件/Slices
使用关联而非重复
设计内容模块库

版本控制

利用 CMS 的版本功能
重要内容启用审核流程
保留历史记录

性能优化

图片使用 CMS 提供的优化服务
避免过大的查询
使用适当的缓存策略

4. 团队协作建议

角色划分

开发者：配置 Schema、集成代码
编辑：日常内容管理
审核者：内容发布审批
管理员：权限和配置管理

工作流设计

草稿阶段（Draft）
审核阶段（Review）
预览测试（Preview）
正式发布（Publish）

培训计划

开发者：CMS API 和集成
编辑：界面操作和最佳实践
定期知识分享会

八、2025 年趋势和建议

🔥 当前趋势

Git-based CMS 崛起
- 开发者更喜欢 Git 工作流
- 版本控制天然支持
- 无厂商锁定
- 推荐：Tina CMS、Keystatic
可视化编辑成为标配
- 非技术人员需求增加
- 实时预览成为必备
- 推荐：Tina CMS、Builder.io
TypeScript 原生支持
- 类型安全越来越重要
- 自动生成类型定义
- 推荐：Payload CMS、Tina CMS、Sanity
AI 功能集成
- AI 内容生成
- AI 图片处理
- AI 内容优化
- 推荐：Builder.io（AI功能领先）
本地优先开发
- 可以完全离线工作
- 无需云服务即可开发
- 推荐：Keystatic、Payload CMS
组件化内容
- 块编辑器（Block Editor）
- 可重用的内容组件
- 推荐：Payload CMS、Prismic（Slices）、Sanity

🎯 2025 年推荐

新项目首选

Tina CMS - Git + 可视化 + TypeScript
Payload CMS - TypeScript + Next.js
Sanity - 云服务 + 实时协作

企业级项目

Contentful - 成熟稳定
Sanity - 灵活强大
Strapi - 完全自主控制

营销网站

Builder.io - A/B测试 + AI
Plasmic - 设计系统
Prismic - 组件化

个人/小团队

Decap CMS - 最简单
Tina CMS - 免费2用户
Keystatic - 本地优先

💡 最终建议

如果你需要...

完全免费 + 自主控制 → Strapi / Payload CMS / Directus

最佳可视化编辑体验 → Tina CMS / Builder.io

最简单快速启动 → Decap CMS / Makeswift

企业级可靠性 → Contentful / Sanity

Next.js 深度集成 → Payload CMS / Tina CMS

营销落地页优化 → Builder.io / Plasmic

Git 工作流 + 开发者优先 → Tina CMS / Keystatic

多语言内容管理 → Contentful / Prismic

九、总结

核心要点

没有完美的 CMS
- 根据实际需求选择
- 考虑团队技术栈
- 平衡功能和复杂度
自托管 vs 云服务
- 自托管：完全控制，但需维护
- 云服务：省心省力，但有成本
Git-based CMS 趋势
- 版本控制天然支持
- 开发者工作流友好
- 无厂商锁定
可视化编辑价值
- 降低非技术人员门槛
- 提高内容更新效率
- 实时预览提升体验
TypeScript 的重要性
- 类型安全避免错误
- 开发体验更好
- 与现代前端工具链匹配

快速决策

预算充足 + 企业级 → Contentful / Sanity
开发者主导 + TypeScript → Payload CMS / Tina CMS
非技术团队为主 → Builder.io / Decap CMS
完全自主控制 → Strapi / Directus
快速启动原型 → Decap CMS / Keystatic

最后更新时间：2025-11-08 调研范围：12款主流 CMS 工具 重点推荐：Tina CMS、Payload CMS、Sanity、Builder.io

调研概述​

📖 快速导航​

按类型分类​

按使用场景选择​

一、Headless CMS（自托管型）​

1. Strapi ⭐⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

与静态网站结合方案​

部署方式​

定价模式​

评分​

2. Payload CMS ⭐⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

与静态网站结合方案​

部署方式​

定价模式​

评分​

3. Directus ⭐⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

与静态网站结合方案​

部署方式​

定价模式​

评分​

二、Git-based CMS​

1. Tina CMS ⭐⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

与静态网站结合方案​

部署方式​

定价模式​

评分​

2. Decap CMS ⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

与静态网站结合方案​

部署方式​

定价模式​

评分​

3. Keystatic ⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

定价模式​

评分​

三、可视化编辑器​

1. Builder.io ⭐⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

与静态网站结合方案​

部署方式​

定价模式​

评分​

2. Plasmic ⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

定价模式​

评分​

3. Makeswift ⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

定价模式​

评分​

四、云端 Headless CMS​

1. Sanity ⭐⭐⭐⭐⭐​

核心特点​

适用场景​

技术优势​

与静态网站结合方案​

部署方式​

调研概述

📖 快速导航

按类型分类

按使用场景选择

一、Headless CMS（自托管型）

1. Strapi ⭐⭐⭐⭐⭐

核心特点

适用场景

技术优势

与静态网站结合方案

部署方式

定价模式

评分

2. Payload CMS ⭐⭐⭐⭐⭐

核心特点

适用场景

技术优势

与静态网站结合方案

部署方式

定价模式

评分

3. Directus ⭐⭐⭐⭐⭐

核心特点

适用场景

技术优势

与静态网站结合方案

部署方式

定价模式

评分

二、Git-based CMS

1. Tina CMS ⭐⭐⭐⭐⭐

核心特点

适用场景

技术优势

与静态网站结合方案

部署方式

定价模式

评分

2. Decap CMS ⭐⭐⭐⭐

核心特点

适用场景

技术优势

与静态网站结合方案

部署方式

定价模式

评分

3. Keystatic ⭐⭐⭐⭐

核心特点

适用场景

技术优势

定价模式

评分

三、可视化编辑器

1. Builder.io ⭐⭐⭐⭐⭐

核心特点

适用场景

技术优势

与静态网站结合方案

部署方式

定价模式

评分

2. Plasmic ⭐⭐⭐⭐

核心特点

适用场景

技术优势

定价模式

评分

3. Makeswift ⭐⭐⭐⭐

核心特点

适用场景

技术优势

定价模式

评分

四、云端 Headless CMS

1. Sanity ⭐⭐⭐⭐⭐

核心特点

适用场景

技术优势

与静态网站结合方案

部署方式