使用 TinaCMS 更优雅的管理 Hugo 网站

最近一直在摸索如何在 Hugo 网站上撰写文章，因为我想要一个更方便的写作环境。看到 @佬T博客也一直在折腾如何为 hugo 实现一个方便且快捷的方式来管理文章。我也来了兴趣，于是就想着自己也来试试。

目前我的网站是在本地撰写 markdown ，再推送到 Github ，最后由 Cloudflare 完成线上部署的。这样要撰写文章不方便，因为我得坐在电脑前才能编辑 markdown ，不能随时随地线上编辑修改、发布文章。

有没有我能够直接线上编辑 Github 的 Git 储存库的方式呢？ 「github.dev」 是可以做到，不过我既要又要。像用 WordPress 、 Typecho 等动态网站管理工具一样，直接打开一个网页，登录后台，想改哪篇点哪篇，改完点个「保存」就自动发布，那该多好？

前几天折腾了Netlify CMS ，后台看起来总觉得简陋，本想着将就用吧，但最终还是放弃了，又开始折腾 Front Matter CMS ，随即又发现 Front Matter 的功能只能本地，还不够优雅，终于，找到了一个能实现这个梦想的工具 —— TinaCMS！

啥是 TinaCMS？它能干啥？

简单来说， TinaCMS 是一个开源免费的「无头 CMS」（Headless CMS）。

别被这个名字吓到，「无头」的意思就是它只提供一个内容管理的后台，但不管你的网站「前台」长啥样。这正好跟 Hugo 这种静态网站生成器是天生一对！

装上 TinaCMS 之后，它能帮你在你自己的 Hugo 网站上变出一个管理后台（就像 http://你的网域/admin 这样）。在这个后台里，你可以：

所见即所得地写作： 就像用在线文档一样编辑你的 Markdown 文章。
管理图片： 有个简易的媒体库，上传图片啥的方便多了。
直接改、直接存： 你在后台点「保存」，TinaCMS 就会自动帮你把修改的内容 commit 并 push 到你的 GitHub/GitLab 仓库，触发网站的自动部署。

是不是听起来就很香？

方案一：先在「本地」试试水 (自架模式)

如果你暂时还不想折腾「线上编辑」，只是想在自己电脑上有个更舒服的写作后台（不想天天对着 Markdown ），那可以先试试它的「本地模式」。这个模式下，所有的修改都会直接保存在你电脑上的 Git 仓库里。

开搞步骤：

老规矩使用 IDE 进到你 Hugo 站点文件夹的根目录。
用 npx 安装：（你需要先安装好 NodeJS 和 npm）

npx @tinacms/cli@latest init

安装过程中，它会问你一些问题，记得在「框架」那里选择 Hugo。

改 package.json 文件：安装完后，它会生成一个 package.json。打开它，找到 "scripts" 部分，改成这样：

"scripts": {
  "dev": "tinacms dev -c \"hugo server\"",
  "build": "tinacms build && hugo"
},

这一步是告诉 TinaCMS，在启动开发模式 npm run dev 时，顺便也把 Hugo 的本地预览 hugo server 一并跑起来。

配置 TinaCMS： 这一步最关键。找到 tina/config.ts 这个文件，它会告诉 TinaCMS 你的文章都放在哪个文件夹里。比如，我的文章放在 content/posts 文件夹里，那我就要改成这样：

// tina/config.ts
import { defineConfig } from "tinacms";

export default defineConfig({
  // ... 其他配置 ...
  schema: {
    collections: [
      {
        name: "post", // 类型叫 'post'
        label: "文章", // 后台显示的名称
        path: "content/posts", // 你的 Markdown 文件夹路径！
        fields: [
          {
            type: "string",
            name: "title",
            label: "标题",
            isTitle: true,
            required: true,
          },
          {
            type: "rich-text", // 用富文本编辑器
            name: "body",
            label: "正文",
            isBody: true,
          },
        ],
      },
    ],
  },
});

注意：这里的 path 一定要改成你自己放文章的目录！fields 里的 name 和 label 是你在后台看到的字段名称，isTitle 和 isBody 是告诉 TinaCMS 这个字段是标题和正文。

运行：

npm run dev

等它跑完，打开浏览器，访问 http://localhost:1313/admin/index.html，你就能看到 TinaCMS 的登录界面了！在本地模式下，你在这个后台做的所有修改，都会实时保存在你本地的文件里。恭喜你，你已经成功在本地为 Hugo 搭建了一个无头 CMS！

方案二：终极形态！连上 Tina Cloud

本地玩得差不多了，就该上「重头戏」了——让它连上云（Tina Cloud），实现随时随地线上编辑！

Tina Cloud 是官方提供的一个服务，它充当一个「桥樑」，让你能在网页后台安全地操作你远在 GitHub 上的仓库。

开搞步骤：

注册 Tina Cloud 帐号： 去 TinaCMS 官网注册一个帐号。
授权 GitHub： 登录后，它会引导你连接到你的 GitHub (或 GitLab) 帐号，然后选择你要管理的那个 Hugo 网站仓库。
获取 API Key： 在 Tina Cloud 的项目设置里，你会拿到一串密钥 Client ID 和 Client Secret 。把这些密钥按照官方文档的指示，复制粘贴到你本地的 tina/config.ts 配置文件里。

提示：这些是敏感信息，最好通过 Vercel/Netlify 的「环境变量」来设置，而不是直接写死在代码里再推送到 GitHub 上。

修改「网站部署」指令： 这一步很重要！以前我们部署 Hugo 网站（比如在 Vercel 或 Netlify 上），部署指令可能就是简单的 hugo。现在，因为我们加入了 TinaCMS，所以部署指令要改成 npm run build (就是我们在 package.json 里定义的那个 tinacms build && hugo)。这样，部署平台在打包你的网站时，才会先把 TinaCMS 的后台管理界面也一起打包进去。
推送代码，触发部署： 把你本地修改过的 tina/config.ts、package.json 等文件 git push 到 GitHub。

大功告成！等网站重新部署成功后，你就可以在任何地方，通过访问 https://你的域名/admin/index.html 来登录你的网站后台了！

现在试试看，在后台修改一篇文章并保存。你会发现，过一会儿，你的 GitHub 仓库就多了一个新的 commit，网站也自动开始重新构建了。完美！

实话实说：它有啥缺点？

结合我的经验，TinaCMS 虽好，但目前（特别是对于 Hugo 用户）还有些不完美的地方：

对 Hugo 不算「亲儿子」： 感觉官方的演示和功能重心都在 React 框架 (如 Next.js) 上，对 Hugo 的支持相对弱一些。
编辑器功能一般： 相比一些专门的 Markdown 编辑器，它的后台编辑功能只能算「够用」，不算强大。
本地图片加载： 在本地模式下，加载 Hugo 的本地图片资源可能会有点问题。
搜索功能弱： 后台的文章搜索功能比较拉胯。

总结

总而言之，TinaCMS 给我们这些 Hugo 静态网站的站长提供了一个非常棒的「折中方案」。

它让我们既能享受到静态网站的「快和稳」，又能在一定程度上拥有了像 WordPress 那样「随时随地在线编辑」的便利性。

如果你也受够了繁琐的本地编辑流程，或者想让不懂技术的运营伙伴也能帮你更新网站内容，那么 TinaCMS 绝对值得你花点时间折腾一下！

啥是 TinaCMS？它能干啥？

方案一：先在「本地」试试水 (自架模式)

方案二：终极形态！连上 Tina Cloud

实话实说：它有啥缺点？

总结

评论区