Netlify CMS 如何与任何基于平面文件的静态网站生成器协作,真是太酷了

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

坦白说:当我第一次看到 Netlify CMS 时,我只是觉得:不错,也许有一天我会尝试一下,当时我正在探索新项目所需的 CMS。然后,当我用全新的眼光看待它时:我立刻就能用它了!它是一个真正的 CMS,因为它可以在任何基于平面文件的静态网站生成器之上添加一个内容管理 UI!想想你如何使用 Gatsby、Jekyll、Hugo、Middleman 等从 Markdown 文件构建网站。你可以创建和编辑 Markdown 文件,网站的构建过程会运行,并创建网站。

Netlify CMS 为你(或你为其设置的任何人)提供了一种创建/编辑这些 Markdown 文件的方法,而无需使用代码编辑器或了解 GitHub 上的 Pull Request 或任何其他内容。它是一个小型的浏览器内应用程序,为你提供了一个 UI,并在后台处理文件操作和 Git 相关操作。

举个例子。

我们的会议网站 是使用静态网站生成器构建的完美网站。

它位于 GitHub 上,因此对 Pull Request 开放,每个会议都是一个 Markdown 文件。

这已经很酷了。社区已经贡献了 77 个 Pull Request,真正丰富了网站内容,以及设计、可访问性和功能!

我使用 11ty 构建了该网站,它非常适合将这些 Markdown 文件构建成网站,并使用 Nunjucks 模板。我发现,在克服了轻微的主要是与配置相关的学习曲线之后,这是一个非常令人满意的组合。

引入 Netlify CMS。

但是,尽管你我可能对快速代码编辑和 Pull Request 感到舒适,但并非所有人都如此。即使是我也必须承认,访问一个 URL、在输入字段中快速编辑一些内容并点击保存按钮,是管理内容的最简单方法。

这个 CMS UI 正是 Netlify CMS 提供的。想看看添加 Netlify CMS 的完整提交吗?

只有两个文件!这仍然让我感到不可思议。它是一个完全可配置的小型 SPA React 应用程序,只有一个文件。

简而言之,一旦安装完成,我现在就可以在生产网站上使用完全自定义的 UI 来编辑网站上的会议信息。

Netlify CMS 不会执行任何强制性或奇怪的操作,例如尝试直接编辑生产网站上的 HTML。它恰好与你的工作流程完全一致,就像你在代码编辑器中编辑文件并在 Git 中提交一样。

身份验证和 Git

你将在生产网站上使用 Netlify CMS,这意味着你需要身份验证,以便只有你(以及你想要的人)可以访问它。Netlify Identity 使此操作变得轻而易举。你只需从 Netlify 设置中将其打开,它就可以正常工作。

我启用了 GitHub 身份验证,以便可以一键登录。

Git 魔法通过名为 Git Gateway 的技术实现。你无需理解它(我实际上也不太懂),你只需在 Netlify 中启用它(作为 Netlify Identity 的一部分),它就会在你的网站和 Git 存储库之间建立连接。

现在,当你创建/编辑内容时,实际的 Markdown 文件会被创建和编辑(以及涉及的其他任何内容,如图像!),更改会直接发生在 Git 存储库中。


我将此设置为网站的页脚,因为这太棒了。