DevNow：支持集成 Tina CMS

LaughingZhu — Wed, 14 Aug 2024 06:59:05 +0000

前言

想了很久是否要集成一个类似 CMS 的管理平台来管理这些文章的内容，终于在这周开始落地了。简单说一下我为什么有这个想法的：由于 DevNow 的定位📌是一个开源的博客项目，所以我在努力的跳出我自己的想法，避免因为一些自己想要的一些功能来让 DevNow 看起来更加的臃肿。集成 Headless CMS 的主要目的是优化现在的工作流，由于我们是基于 Astro 来构建的一个博客项目，所以我们正常的工作流一般是：

在本地新建一个 .mdx 文件
完成文章内容的编辑
push 到线上环境，重新 build 生成新的文章内容从而完成网站内容的更新

这个 workflow 比较恶心的是我们必须要在本地去编辑文档，为了预览可能还需要再一个支持 markdown 或者 .mdx 预览的编辑器中来编辑，整体来说感觉这个过程会比较复杂。所以希望通过一些平台来优化这个 workflow 。然后就有了集成 CMS 想法，过程中也调研了一些常用的 CMS 平台，最终选择了 Tian CMS。

一些 CMS 平台的对比：

Tina 的优势

基于 Git 的内容管理

Tina 使用 Git 为内容和代码提供单一真实来源，增强开发人员和内容编辑者之间的协作。
内容更改直接提交到您的存储库，确保版本控制和内容历史记录。

实时视觉编辑

使用 Tina 的实时可视化编辑器直接在您的网站或应用程序环境中创建和编辑内容。
可定制的内容块允许内容编辑者组装页面并直观地管理内容，类似于使用网站构建器。
编辑所做的修改可以在发布前实时预览，确保内容的质量。

内容控制

Tina 的开源模型让您对您的内容拥有完全的控制权和所有权。
Tina（可选）的自托管后端让您免受供应商锁定的困扰。

可扩展性

大规模性能： Tina 专为大型项目而设计。无论您的网站有数百或数万个页面，Tina 都能确保最佳性能。
强大的查询功能：借助 Tina 独特的数据层，您的 Markdown 内容变得像在数据库中一样灵活且可查询。

总结一下：

数据存储：Tina 是一款开源的、由 Git 支持的无头内容管理系统 (CMS)，这个正好符合我们的项目结构，文件都是基于 Git 来管理的。其他平台多为在自己的 cloud 端存储，避免后期如果有数据迁移带来的数据问题。
文件格式：同时支持 Markdown、MDX 和 JSON 等多种内容类型。
支持实时可视化的编辑器
支持根据分支来管理版本内容
Tina 提供了一些自己的数据层，可以灵活的查询

具体的集成步骤如下

1. 在项目中集成 Tina

// 通过 tina cli 集成，按提示进行配置就好
pnpm dlx @tinacms/cli@latest init

到这里就已经在本地集成好了，需要注意的是图中标记的这个路径，需要根据自己项目中文档存储的路径来更换，这里是 DevNow 中的目录。这里如果配置错了也不用急，后边也可以在 tina/config.ts 中进行修改。

接下来替换项目运行的命令:

// 在 package.json 中修改 scripts 的 dev 和 build 即可
"scripts": {
  "dev": "tinacms dev -c \"astro dev\"",
  "build": "tinacms build && astro check && astro build",
}

根据项目替换 schema ，集体可参考 schema 配置

schema: {
  collections: [
    {
      name: 'doc',
      label: 'Posts',
      path: 'src/content/doc',
      format: 'mdx',
      fields: [
        {
          type: 'string',
          name: 'desc',
          label: 'Desc',
          required: true,
          description: 'The image used for the cover of the post'
        },
        {
          type: 'boolean',
          name: 'draft',
          label: 'Draft',
          description: 'If this is checked the post will not be published'
        },

        {
          type: 'string',
          required: true,
          name: 'category',
          label: 'Category',
          description: 'Select an category for this post',
          options: [
            ...categories.map((item) => {
              return {
                label: item.title,
                value: item.slug
              };
            })
          ]
        },
        // 作者
        {
          type: 'string',
          name: 'author',
          label: 'Author',
          required: true
        },
        // 标签
        {
          type: 'string',
          name: 'tags',
          label: 'Tags',
          required: true,
          list: true,
          ui: {
            component: 'tags'
          }
        },
        {
          type: 'string',
          name: 'image',
          label: 'Image',
          required: true
        },
        // 封面图
        // 发布时间
        {
          type: 'string',
          name: 'publishDate',
          label: 'PublishDate',
          required: true
        },
        // 是否置顶
        {
          type: 'boolean',
          name: 'pin',
          label: 'Pin',
          required: true
        },
        {
          type: 'string',
          name: 'title',
          label: 'Title',
          isTitle: true,
          required: true
        },
        {
          type: 'rich-text',
          name: 'body',
          label: 'Body',
          isBody: true
        }
      ]
    }
  ];
}

:::tip[注意]

这里需要主要的是在首次运行的时候，会根据 tina/config.ts 生成一个 tina/tina-lock.json 的文件，每次修改完都 config.ts 的时候，都需要在本地运行一下来更新 tina-lock.json 的内容，否则无法成功 build 。

:::

运行项目：

pnpm dev

然后访问：

看到这样的界面，恭喜你，成功完成了配置 [庆祝][庆祝]
接下来就可以在这里去更新文章的内容了

2. 线上环境集成

通过以上的一些配置，我们已经完成了 local 的配置，接下来我们需要配置一下线上环境，我们可能主要的场景是在线上环境直接进行文件的更新。
Tina 在这里提供了两套解决方案:

这里我选择了 Tina Cloud ，具体的思考一个是自托管的配置成本比较高，需要自己的配置实现：

Auth Provider：处理 CMS 操作的身份验证和授权。提供由数据库中的用户集合支持的默认Auth.js实现。
Database Adapter：处理索引和与数据库的交互（例如MongoDB，Postgres等）
Git Provider：处理将内容保存到 Git

每个模块都是独立的，这意味着您可以选择用不同的实现替换任何模块，或者开发定制解决方案来满足您的特定需求。

当然自托管也是有一些限制的，不过限制部分对我来说不是最主要的问题，是上边三个配置的实现成本。还有就是作为一个博客项目，稳定的存储都在 Git 上，所以 Tina Cloud 对我来说是一个更好且简单的实现。

2.1 注册 Tina Cloud 账号

2.2 创建项目

Tina 提供了两种方式，我们选择第一个，选择导入一个已有的项目开始。根据提示的步骤一步一步来就好，

不出意外的话你会看到这样的一个界面。

2.3 配置环境变量

这里我是通过 Vercel 构建项目的，直接在上边配置环境变量就好了，具体如下：

需要注意的是，如果环境变量名改变的话，记得在项目配置在修改对应的值，具体实在 tina/cinfig.ts 中：

2.4 把我们集成好的项目分支推到 Git 上进行构建

如果是首次集成的话需要把我们上一步配置的 PUBLIC_GITHUB_BRANCH 这个分支名改成当先对应的分支名，否则 Tian Cloud 无法检测到对应分支，会导致构建失败，等成功推到 mian 主分支的时候，再将 PUBLIC_GITHUB_BRANCH 改回主分支名。

然后回到 Tina Cloud 刷新即可看到：

到这里我们就成功在 DevNow 中集成了 Tina ，后续可以直接通过线上环境访问即可进行文件更新。直接访问我们配置好的域名 https://www.laughingzhu.cn/admin 即可。

也欢迎大家体验开源博客项目 DevNow ，可以提一些反馈建议，当然也可以顺手点个赞👍🏻

原文链接 ：DevNow：支持集成 Tina CMS

DEV Community: LaughingZhu