#Cms

最近一直在摸索如何在 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 这样）。在这个后台里，你可以：

1. 所见即所得地写作： 就像用在线文档一样编辑你的 Markdown 文章。

2. 管理图片： 有个简易的媒体库，上传图片啥的方便多了。

3. 直接改、直接存： 你在后台点「保存」，TinaCMS 就会自动帮你把修改的内容 commit 并 push 到你的 GitHub/GitLab 仓库，触发网站的自动部署。

   tina cms hugo

   Read more

你是否也觉得静态网站（如 Hugo , Hexo）的文章难以管理？ 是否也希望有一个漂亮的所见即所得编辑器来辅助写作？

那么，你一定要试试 「Front Matter」 来优雅地管理你的静态网站。

本文将记录我配置 vscode-front-matter 的全过程，并分享配置完成后的“丝滑”发文流程，展示它如何简化操作，提升效率。

Front Matter 的特色功能

「Front Matter」是由 Elio Struyf 开发的一款专为静态网站设计的 CMS (内容管理系统)，它以 Visual Studio Code 扩展的形式提供。

Front Matter 的设计非常灵活，支持多种主流的静态网站生成器：Hugo、Jekyll、Hexo、NextJS、Gatsby、Astro 等。

本文将以 Hugo 为例。我们知道，静态网站的源文件都是由目录和文件组成的。用户常常需要通过命令行，或者直接编辑 Markdown 文件来写作。这对于Geek来说可能不算什么，但对于习惯了 CMS 界面（例如 WordPress）的用户来说，难免会觉得繁琐。

如果能有一款 GUI 工具，或是一个前端界面来编辑 Hugo 网站就好了。

此时，只要装上 Front Matter，你的静态网站写作体验将会轻松许多。Front Matter 让你的 VS Code 仿佛“安装”了一个类似 WordPress 的后台管理界面。结合 VS Code 超强的文字编辑功能，你只需点击几个按钮，就能完成新增文章、预览网站、甚至部署网站等操作。

Front Matter 的核心特色就是图形化。它会自动读取你现有网站的文章、图片、标签、分类，并清晰地罗列在专属面板上。用户可以使用所见即所得的 Markdown 编辑器写作，并通过漂亮的界面来批量管理分类和标签。

Front Matter 甚至还会尝试给出一些 SEO 建议，或者让你调用 AI 来辅助写作。

小小的吐槽： “Front Matter”，作者真是取了个“好”名字。如果搜索时不特别注明，搜到的几乎全是关于 Markdown 语法中 “front matter”（头部元数据）的资料。(黑暗執行緒 也认为这个命名不利于 SEO)。