Netlify CMS是由 Netlify 创建的轻量级内容管理系统。

虽然,Netlify 构建了他们的 CMS 用于 Netlify 托管,但可以在自托管服务器上使用 Netlify CMS。

在本指南中,我们将介绍使用Cleaver完成此操作所需的步骤。

先决条件

• 有一个活跃的Cleavr帐户

• 服务器已配置并准备就绪

第 1 步:添加 NodeJS SSR 站点

在 Cleavr 中,转到您配置的服务器并添加一个新站点,其中 App Type 设置为 NodeJS SSR。

我们需要添加一个在我们的服务器上运行的应用程序,它将充当 GitHub OAuth 提供者。原因是 Netlify CMS 通常使用 Netflify 作为其 CMS 的身份验证器。它们确实允许您使用自定义身份验证器,例如 GitHub。但是,GitHub 需要服务器。因此,我们将添加我们自己的简单 OAuth 应用程序来执行神奇的操作。

我们正在经历的解决方案也适用于 GitLab;但是,这些说明将涵盖将您的项目放在 GitHub 上。

创建站点后,记下您分配给站点的 URL 并将其保存以备后用。

第 2 步:将项目添加到 GitHub

在本指南中,我使用 Jake-101](https://github.com/jake-101/bael-template)演示的[Bael 主题,该演示列在Netlify CMS 示例上。

为什么要做这个项目?很简单,它使用 Nuxt。 😍

将您的项目添加到您的 GitHub 帐户。你可以在这里看到我的 Bael 主题的叉子:我的叉子

与我们的其他部署指南不同,您需要确保您对存储库拥有所有权,因为我们将对文件进行更改。

第 3 步:更新 Config.yml 文件

在您的项目中,找到config.yml文件。在我们的示例项目中,它位于static/admin/config.yml。

我们需要更新backend部分,如下所示:

backend:
  name: github
  repo: user/repo
  branch: master
  base_url: https://your.oauth-provider-url.com

进入全屏模式 退出全屏模式

请务必为您的项目添加user/repo,它所在的分支,以及base-url,即步骤 1 中的 url。

保存您的更改。

第 4 步:创建 GitHub OAuth 应用程序

当我们在 Github 中时,现在让我们创建一个新的 GitHub OAuth 应用程序。

遵循GitHub OAuth 应用指南。

这实际上是在 GitHub 中导航到您的帐户 > 设置 > 开发人员设置 > OAuth 应用程序 > 新 OAuth 应用程序。

填写表格如下:

• Application Name: 填写你想调用这个 OAuth 应用程序的任何内容

• 主页 URL:使用步骤 1 中的 url

• 授权回调网址:将/callback附加到您上面使用的网址(即:https://example.com/callback)

注册应用程序。

创建应用程序后,您将看到 Client ID。复制客户端 ID 并保存以备后用。

单击生成新的客户端密码。复制秘密并保存以备后用。

第 5 步:添加 Nuxt 静态站点

回到 Cleavr,我们现在将在我们的服务器上添加一个新的 Nuxt 静态站点。

请注意,如果您的网站未使用 Nuxt,您可以选择不同的应用类型,例如 NuxtJS Static。

添加新站点后,请记下 URL。

第 6 步:配置和部署 OAuth 应用程序

配置回购

在 Cleavr 的 Web 应用程序部分,单击 OAuth Web 应用程序并转到设置 > 代码存储库选项卡。

选择 GitHub VC 配置文件。

在 Repository 中填写vencax/netlify-cms-github-oauth-provider。

我们正在使用 Vencax](https://github.com/vencax/netlify-cms-github-oauth-provider)项目的[Netlify CMS GitHub OAuth Provider

对于我们的 OAuth 提供程序应用程序。

将要部署的分支设置为master。

配置构建和 PM2

单击 Build 选项卡并将 Entry Point 设置为app.js

在 PM2 生态系统 区域内,将以下内容添加到env。

"NODE_ENV": "production",
"ORIGIN": "your.main-site.com",
"OAUTH_CLIENT_ID": "your-oauth-client-id",
"OAUTH_CLIENT_SECRET": "your-oauth-client-secret",

进入全屏模式 退出全屏模式

使用您的项目的 URL 更新 ORIGIN(从第 5 步开始)并使用值填写 OAUTH_CLIENT_ID 和 OAUTH_CLIENT_SECRET

从第 4 步开始。

配置部署挂钩

现在,转到部署挂钩部分并禁用 build 挂钩。

部署 OAuth 应用程序

完成上述操作后,转到部署部分并部署。

前往您的 OAuth 应用程序并单击链接以通过 GitHub 进行身份验证,以测试它是否按预期工作。

第 7 步:配置和部署 NetLify CMS

导航回主 Web 应用程序部分,然后单击 Nuxt 静态站点,该站点将成为我们正在部署的主站点。

配置回购

导航到设置 > 代码库。

选择您的 GitHub VC 个人资料。

对于 Repository,添加 repo。在我们的示例中,它是armgitaar/bael-template,要部署的分支是master。

保存更改。

部署

唯一剩下的就是部署!

部署站点后,将/admin附加到 URL 的末尾。您现在应该能够通过您的 GitHub OAuth 应用程序进行身份验证,并且

然后访问 Netlify CMS 后端。

提示

要充分利用此设置,请在设置 > 代码存储库部分启用 Push-to-deploy。更好!启用 GitHub Actions 集成。