TinaCMS：給Hugo裝個網站管理後台，線上編輯Git儲存庫

TinaCMS為一款開源的headless CMS，由Forestry CMS團隊所開發。

TinaCMS可以完全自架，只在本機執行，也可以用官方的TinaCloud服務，達成線上編輯儲存庫效果。

1. TinaCMS使用情境？
#

目前Ivon的Hugo網站是在本機撰寫markdown，再推送到Github，最後由主機託管網站完成線上建置Hugo網頁的。

這樣要撰寫文章不方便，因為我得坐在電腦前才能編輯markdown，不能隨時隨地開其他網站線上修改文章。

有沒有可能，我能夠直接線上編輯Github的Git儲存庫的程式碼呢？「github.dev」是可以做到，不過我想要更全面的編輯器，所以就試著用TinaCMS來管理。

TinaCMS的彈性很高，它會在你的Hugo網站儲存庫加上一個NodeJS套件，使之擁有網頁編輯後台，就像Wordpress那樣。

這樣你就能在網頁寫Markdown了，提供所見即所得編輯器。

還有簡易圖片資源管理器。

而TinaCMS可以設定為僅供本機存取，或者連線到Tina Cloud，隨時隨地遠端存取。

不過，跟 vscode-frontmatter-cms比起來，TinaCMS的網頁後台文章編輯功能相對弱很多，只支援單一語言網站，且無法載入Hugo本機圖片資源，搜尋功能很差勁。

感覺Hugo不是他們的優先支援項目，他們Youtube頻道示範用的是React的Live Preview功能，效果比較好。

2. 自架TinaCMS
#

自架(self-hosted)又稱Local Mode，所作的變更會儲存到本機Git儲存庫。

自架TinaCMS只能在本機使用，算是給Hugo做一個網頁後台吧。

在本機Hugo儲存庫的目錄開啟終端機，用npx安裝tinacms套件，詢問問題的時候選取Hugo

npx @tinacms/cli@latest init

編輯package.json，加入Hugo建置網站的指令

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

編輯tina/config.ts，指定Hugo文章所在的目錄

  schema: {
    collections: [
      {
        name: "post",
        label: "Posts",
        path: "content.zh-tw/posts",
        fields: [
          {
            type: "string",
            name: "title",
            label: "Title",
            isTitle: true,
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Body",
            isBody: true,
          },
        ],
      },
    ],
  },