使用 Netlify CMS 实现无头化

2025-06-07

使用 Netlify CMS 实现无头化

有网站吗？内容修改容易吗？您使用 CMS 吗？什么是 CMS？如何设置 CMS？

读完本文后，您将了解如何启动并运行Netlify CMS。您还会学到一些让您的生活更轻松的技巧。

  • 使用 Next.js 设置 Netlify CMS
  • 使用netlify-cli
  • 利用 Netlify CMS Beta 功能！

什么是 CMS？

内容管理系统 (CMS) 是一种便捷的内容管理方式。您可以将其视为一个特殊的地方，方便您更新网站。更新图片、文案和内容！它可以位于同一个域名，也可以位于完全不同的域名。

什么是“无头”CMS？这意味着我们的 CMS 不与前端耦合。它不知道内容将如何显示。这是理想的选择。它使我们的内容具有可移植性。想要切换前端框架？太棒了！将所有内容放入新的框架中。您所呈现内容的底层结构无需更改。

为什么选择 CMS？

我们之前提到过。但是，“可移植性”呢？将内容与呈现层分离，可以带来“一次创建，随处显示！”的好处。此外，还有“便捷性”。发现自己网站上的拼写错误？但您不在办公桌前？登录您的CMS，进行修改，点击“发布”，就大功告成了！这还能让您的内容拥有更佳的协作体验。想要支持不同的作者或访客发帖？那就为这些用户创建单独的登录名吧。

Netlify 内容管理系统

Netlify CMS 是一个不错的选择，无论您是 CMS 新手还是老手。它是一款有趣的“基于 Git”的产品。这意味着它会在您的 Git 仓库中创建和更新内容。如果您是 CMS 新手，这非常有用，因为您可以在开发过程中查看机器上的内容变化。它也具有高度可定制性。想想自定义小部件和预览。

设置 Netlify CMS

在今天的演示中，我们将使用 Next.js 网站设置 Netlify CMS。无论您使用什么，设置步骤都相同。如果您没有可用的应用程序，请按照以下步骤创建一个 Next.js 网站。

先决条件？

  • Github/Gitlab/Bitbucket 账户
  • Netlify 帐户
  • 可选 – 一个需要集成的应用。或者，按照以下步骤创建一个演示应用。

对于那些TL;DR阵营的人，您可以从这个 repo获取演示应用程序和入门套件。

创建应用程序

让我们开始创建一个应用程序。

yarn create next-app netlify-cms-next-starter
Enter fullscreen mode Exit fullscreen mode

对于这个应用程序，我已经使用新的闪亮“JIT”编译器引入了 Tailwind。

安装 Netlify CMS

那么我们需要netlify-cms-app。

yarn add netlify-cms-app
Enter fullscreen mode Exit fullscreen mode

设置管理页面

接下来，我们需要一个“管理”页面。该页面需要通过 访问/admin。不同的框架有不同的实现方式。我们使用 Next.js。我们可以将 HTML 文件拖放到或创建public中。public/admin/index.htmlpages/admin/index.js

直接 HTML 将使用 Netlify CMS 的 CDN 链接，看起来像这样。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Admin: Netlify CMS && Next.js Starter</title>
    <link rel="shortcut icon" href="/assets/icons/favicon-32x32.png" />
    <link rel="apple-touch-icon" href="/assets/icons/logo-192x192.png" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

但是，我们已经安装了netlify-cms-app。这意味着我们可以从模块启动CMS。

import CMS from 'netlify-cms-app'
// Initialize the CMS object
CMS.init()
Enter fullscreen mode Exit fullscreen mode

不过，我们使用的是 Next.js。这意味着我们可以对设置做一些稍微不同的事情。

import dynamic from 'next/dynamic'

const CMS_CONFIG = {}
const Loading = () => (
  <div className="min-h-screen flex items-center justify-center">
    <p className="text-gray-500 font-semibold text-xl">Loading...</p>
  </div>
)

const CMS = dynamic(
  () =>
    import('netlify-cms-app').then((CMS) => {
      CMS.init({ CMS_CONFIG })
    }),
  { ssr: false, loading: Loading }
)

const Admin = () => <CMS />

export default Admin
Enter fullscreen mode Exit fullscreen mode

在这里，我们使用netlify-cms-app动态加载到浏览器中next/dynamic，然后初始化CMS。

设置 CMS 配置

CMS 是由配置驱动的。我们创建一个配置文件，它会告诉 Netlify CMS 要显示哪些字段、要更新哪些内容等等。我们需要一个config.yml“管理”页面可以访问的文件。CMS 的配置选项有很多种。以下是一个基本的起点。在这个配置中，我们创建了两个集合。一个用于处理全局数据，例如网站副本。另一个用于处理独立页面。这可以与创建博客文章等内容的结构相同。

backend:
  name: git-gateway
  branch: main
publish_mode: editorial_workflow
media_folder: "public/images"
public_folder: "/images"
collections:
  - label: "Globals"
    name: "globals"
    files:
      - label: "Site Copy"
        name: "site_copy"
        delete: false
        create: true
        file: "_data/copy.json"
        fields:
          - { label: "Tagline", name: "tagline", widget: "string" }
          - { label: "Headline", name: "headline", widget: "string" }
  - name: "standalone pages"
    label: "Standalone Pages"
    folder: "standalone-pages"
    slug: ""
    file: "standalone-pages/.mdx"
    create: true
    extension: mdx
    format: frontmatter
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - {
          label: "SEO Meta Title",
          name: "metaTitle",
          widget: "string",
          required: false,
        }
      - {
          label: "SEO Meta Description",
          name: "metaDesc",
          widget: "string",
          required: false,
        }
      - {
          label: "Social Image",
          name: "socialImage",
          widget: "image",
          required: false,
        }
      - { label: "Body", name: "body", widget: "markdown" }
Enter fullscreen mode Exit fullscreen mode

Netlify CMS 的设置选项非常丰富。主要包括“后端”、“媒体文件夹”以及集合的运作方式。

说到集合，我们可以定义文件的类型、文件存放位置以及内容的创建方式。例如，我们的独立页面集合。我们声明这些文件将包含 MDX 文件extension，并位于 下standalone-pages/。 下的每个字段fields构成了页面的托管内容。在我们的示例中，我们使用string窗口小部件作为文本字段。但是，body文件的 将是markdown。注意到format集合中的字段了吗？这告诉 Netlify CMS 我们希望将数据存储在 中frontmatter，并在其后添加内容body。值得查看“配置”文档和“字段”文档。

创造身份

如果我们启动应用并访问，/admin就会看到一个登录界面。CMS 系统正在运行！但是，我们没有任何登录凭证。

空白的 Netlify CMS 登录屏幕

我们需要一个身份来进行身份验证。您可以使用不同的身份验证选项。但是，我们将使用 Netlify Identity 进行身份验证。这是最快的设置方式，并且如果您以前没有使用过 Netlify Identity，它将帮助您熟悉它。

打开你的 Netlify 仪表盘，你需要创建一个“从 Git 创建新站点”。前提是你已经将你的应用推送到 Git 仓库。

这将引导您完成站点设置。按照提示操作，Netlify 将为您检测构建设置。请注意，在我们的示例中，我们已安装简洁的“Essential Next.js”构建插件。

在 Netlify 上建立新网站

现在我们需要为网站启用“身份”。导航到“身份”选项卡，然后点击“启用身份”。

在 Netlify 仪表板上启用身份

进入“设置和使用”，然后点击“启用 Git 网关”。需要向下滚动一下。

启用 Git 网关

快完成了！现在我们需要邀请用户使用我们的 CMS。点击“邀请用户”，然后向您想要使用的电子邮件地址发送邀请。

邀请用户

完成后，您将在列表中看到该用户。

更新的用户列表

查看你的电子邮件，你应该会看到一封邀请你加入应用的邮件。但是，点击链接后，你会被引导到你的托管网站，什么也不会发生。这是因为我们需要将身份小部件拖放到页面中，并为其运行一段代码。

这只需要在我们的根页面上执行。我们需要运行以下代码。

if (window.netlifyIdentity) {
  window.netlifyIdentity.on('init', (user) => {
    if (!user) {
      window.netlifyIdentity.on('login', () => {
        document.location.href = '/admin/'
      })
    }
  })
}
Enter fullscreen mode Exit fullscreen mode

并且包含这个脚本。

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
Enter fullscreen mode Exit fullscreen mode

对于我们的 Next.js 应用程序，我们可以更新我们的“主页”以运行代码并用于next/head包含脚本。

import { useEffect, Fragment } from 'react'
import Head from 'next/head'

const Home = () => {
  useEffect(() => {
    if (window.netlifyIdentity) {
      window.netlifyIdentity.on('init', (user) => {
        if (!user) {
          window.netlifyIdentity.on('login', () => {
            document.location.href = '/admin/'
          })
        }
      })
    }
  }, [])
  return (
    <Fragment>
      <Head>
        <title>Netlify CMS && Next.js Starter</title>
        <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
      </Head>
      <main className="min-h-screen flex items-center justify-center mx-auto flex-col prose">
        <h1 className="text-center">Netlify CMS && Next.js Starter</h1>
      </main>
    </Fragment>
  )
}
Enter fullscreen mode Exit fullscreen mode

重新部署

为了使更改生效，我们需要重新部署网站。我们可以将更改推送到 git 仓库来实现。Netlify 会检测到更改并帮我们重新部署。

或者，我们可以使用netlify-cli来重新部署我们的网站。我建议使用netlify-cli。它可以大大改善你的工作流程，尤其是在你已经打开终端的情况下。要使用netlify-cli，请先安装它。

npm i -g netlify-cli
Enter fullscreen mode Exit fullscreen mode

安装完成后，登录

netlify login
Enter fullscreen mode Exit fullscreen mode

然后从您的 repo 目录中，将您的 repo 链接到您的网站

netlify link
Enter fullscreen mode Exit fullscreen mode

现在，您可以通过命令行进行构建和部署。您的构建设置（包括插件）也会自动拉取。这是一种无需提交拉取请求即可获取部署预览的好方法。

netlify build
netlify deploy
Enter fullscreen mode Exit fullscreen mode

当您对所部署的内容感到满意时。

netlify build
netlify deploy --prod
Enter fullscreen mode Exit fullscreen mode

访问 CMS

部署完成后，使用邮件中的邀请链接，您将看到一个“完成注册”的表单。创建密码后即可登录。

填写完整的注册表

现在访问/admin，系统会提示您输入 CMS 登录信息。登录即可！我们已经使用 Netlify CMS 为您的网站设置了 CMS。

更新内容

现在我们进入了CMS系统，可以浏览一下，探索一下您可以做什么。例如，上传图片或更改某个集合的内容。这里我更改了“全局”集合中“标语”字段下的内容。当我们准备好推送更改时，点击“保存”，将状态更新为“就绪”，然后点击“发布”。

发布副本更改

接下来就是等待了。等待更改被推送。在终端中将它们拉取到你的代码仓库，你会看到我们的例子里的代码_data/copy.json已经更新了。这就是我们在文件中定义的路径config.yml。

现在，您可以按照自己喜欢的方式将内容集成到前端。例如，在我们的演示应用中，我添加了导入路径_data。并且，我还更新了“主页”页面，使其能够显示标题和标语。

import { useEffect, Fragment } from 'react'
import Head from 'next/head'
import copy from '@data/copy.json'

const Home = () => {
  useEffect(() => {...}, [])
  return (
    <Fragment>
      <Head>
        <title>Netlify CMS && Next.js</title>
        <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
      </Head>
      <main className="min-h-screen flex items-center justify-center mx-auto flex-col prose">
        <h1 className="text-center">{copy.headline}</h1>
        <h2>{copy.tagline}</h2>
      </main>
    </Fragment>
  )
}
Enter fullscreen mode Exit fullscreen mode

至此，您的应用已拥有一个可用的 CMS。您可以浏览文档，并以您喜欢的方式管理内容。不过，我们还没有完成。让我们改进一下这个设置。

本地后端

我们有一个可以运行的 CMS。但是，工作流程可能会很慢。尤其是在我们摸索着要把什么内容放进 CMS 的时候。我们没有时间继续部署、在 CMS 中进行更改，以及等待内容推送到 Git。构建需要时间，而且会占用你在 Netlify 上的构建时间。

为了解决这个问题，我们将使用Beta 功能。local_backend事实上，如果您已经在使用 Netlify CMS，那么这个技巧可能会对您有很大帮助（如果您之前不知道的话）。

要使用local_backend，请将其添加到我们的config.yml文件中。

local_backend: true
backend:
  name: git-gateway
  branch: main
publish_mode: editorial_workflow
media_folder: "public/images"
public_folder: "/images"
Enter fullscreen mode Exit fullscreen mode

然后我们还有一个步骤。我们需要netlify-cms-proxy-server在开发时使用。我们可以更新dev脚本来适应它。

"scripts": {
  "dev": "npx netlify-cms-proxy-server & next dev",
}
Enter fullscreen mode Exit fullscreen mode

运行我们的开发服务器并访问/admin。我们上线了！无需登录屏幕。修改一些内容，点击发布，内容就会更新到您的目录中。太棒了！这让我们的工作流程提升了十倍。无需等待。

本地 Netlify CMS

这一切都是可能的，因为netlify-cms-proxy-server它会创建一个本地未经身份验证的服务器。当我们使用时，CMS 就运行在这个服务器上local_backend。您可以用不同的方式进行配置。如果您使用 on 部署文件，local_backend也不必担心。config.ymllocal_backend

但是，如果这不适合您，您可以编写一个在运行开发服务器时运行的节点脚本。

这是一个脚本，可以在文件更改时将其复制config.yml到目录中。它用于监视文件更改，并记录任何活动。publicchokidarpino

const chokidar = require('chokidar')
const logger = require('pino')({ prettyPrint: true })
const fs = require('fs')

// Write file to public/config.yml
const writeConfig = () => {
  logger.info('Updating Netlify CMS Config')
  const CONFIG = fs.readFileSync('./admin/config.yml', 'utf-8')
  fs.writeFileSync(
    `${process.cwd()}/public/config.yml`,
    `local_backend: true\n${CONFIG}`,
    'utf-8'
  )
}
// Set up Netlify CMS Config Watching
logger.info('Setting up Netlify CMS config watch')
chokidar.watch(`${process.cwd()}/admin/config.yml`).on('change', writeConfig)
// Write on script run so it's there
writeConfig()
Enter fullscreen mode Exit fullscreen mode

在这个脚本中，我们复制了配置并附加了local_backend选项。这意味着我们不再需要config.ymlinside的提交版本。在演示应用中，我已将其与 watch 脚本一起public移至一个目录中。admin

为了在开发时运行该脚本，我们可以更新package.json脚本以同时运行该脚本netlify-cms-proxy-server。

{
  "scripts": {
    "dev": "npx netlify-cms-proxy-server & next dev & node admin/config-watcher.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

就是这样！

这就是如何设置并运行“无头”CMS 的方法。在本例中，我们使用 Netlify CMS。如果您之前从未设置过 CMS，那么它是一个很好的解决方案和切入点。

我建议为你的网站设置一个CMS，尤其是你的个人作品集网站。不妨试试Netlify CMS？设置好之后，查看一下文档，根据你的需求进行自定义！

想尝试一下 Next.js 吗？请查看使用 Tailwind 搭建的演示仓库，并以此为起点。

一如既往，感谢您的阅读。想了解更多？想看点别的？快来Twitter上找我吧！

保持精彩！ʕ •ᴥ•ʔ

文章来源：https://dev.to/jh3y/go-headless-with-netlify-cms-5gcm
Devto 翻译
PREV
如何：光标跟踪视差
NEXT
3 分钟内揭秘 CSS 故障文本