如何使用無頭內容管理系統 (headless CMS) 去簡單建立你自己的博客

最近一直都想寫一個Blog出黎放低啲筆記，最主要因為學完啲野好快就會唔記得，有個地方放住嘅話就會方便睇返。點解唔用Notion戈一類筆記軟件？因為自己寫一個出黎好似型啲。

痛點

其實係早幾個月之前都有用過 node.js 去寫一個Blog嘅後台出黎，只不過用起上黎唔太方便。我都總結咗兩個導致到咁失敗嘅原因，主要係要寫出順手嘅後台資料輸入面板太麻煩，無啲開發經驗同實際使用嘅經驗都搞唔掂；其次就係，要部署同維護都唔容易。咁所以最後用咗一陣就放棄了。

所以經過咗兩個月左右嘅沉澱，我就再搵方法去寫多個Blog出黎。係爬文章嘅過程中，就發現到headless CMS正正就可以滿足到我想實現嘅功能。所以今次我就放棄咗自己做曬前後端開發，而去投靠大佬們種好嘅樹。

無頭內容管理系統

無頭內容管理系統想要改善的就是傳統內容管理系統的痛點，例如WordPress、Webflow等等的傳統CMS被詬病的原因，主要是因為它的做法是與網站捆綁了在一起。導致了儲存的資料都只能被本地的網站使用，所以就很難在其他平台上的軟件上使用這些資料。而無頭CMS就是要解決這種多平台兼容的問題。

如何實作

首先我們可以找一個無頭CMS的平台，這次我會使用 Hygraph (原名是GraphCMS)。Hygraph 很容易上手，而且免費個人用的限額也很不錯，每個月可以調用1百萬次API和100GB的流量。對於個人的博客應該是足夠有餘了。

建立資料庫模型

先註冊後，我們就可以直接建立資料庫的模型了。以我這個博客為例，每一篇文章可以有多個分類，而每一個分類也是可以有多篇文章。所以在建立了 Post 與 Category 兩個模型後，就可以建立一個多對多的關係。

本文的大概資料輸入截圖

之後在輸入文章資料的頁面就能夠選擇多個分類。其實可以看到，基本上輸入資料所有的操作都是使用圖形化界面，而且操作都很容易。

調用GraphQL API

在調用API這塊，感覺沒有使用過 GraphQL 也不會有問題，因為 GraphQL 的查詢語法都很直觀，基礎的調用甚至只需要用一個關鍵字。例如我想要查詢所有文章的資料：

query Posts {
  posts {
    id
    title
    slug
    categories {
      name
      color {
        hex
      }
    }
    content {
      html
    }
    createdAt
    bannerImage {
      url
    }
  }
}

基本上所有的語法組成都是直接對應著資料庫模型欄位的名稱。Hygraph 的平台上也提供了一個API Playground讓用戶直接選取需要的資料來組成query，所以像我這樣沒有接觸過 GraphQL 的也完全沒有問題，輕鬆上手。

在 `Next.js` 裡調用API

這裡一開始使用有個地方需要注意，首先你要在平台上找到你的API Key，讓你可以從外部查詢資料。之後還要在 Project Settings -> Public Content API 設定中初始化你API Key的權限。完成這步就可以從外部調用API啦。

在 React 上的使用 GraphQL 需要下載兩個套件。

npm i graphql graphql-request

import { request, gql } from "graphql-request"

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT

export const getPosts = async () => {
	const query = gql`
		query Posts {
			posts {
				id
				title
				slug
				categories {
					name
					slug
					color {
						hex
					}
				}
				content {
					html
				}
				createdAt
				bannerImage {
					url
				}
			}
		}
       `

	const result = await request(graphqlAPI, query)

	return result.posts
}

可以看看這篇介紹 gql`` 如何運作的文章。

其實就是把在API Playground裡的query語法放進 gql`` 裡面，再用 request 去做請求。那回傳的資料就是我們請求的 posts 的 json 了，然後應該是 request 內部返回的數據直接轉換成物件，所以我們就不用再做json解析物件的操作了。

總結

因為篇幅過長就不作過多深入的實作了，詳情可以在 Github 裡再看。無頭CMS和 Hygraph 這個平台真的讓我太驚喜了，相比起從零開發後端的CRUD操作，以及後台的界面。使用無頭CMS直接可以省略後端的開發，可以把重心放在前端頁面的界面與功能開發。再者，比起傳統CMS，無頭的可以在不同的裝置上開發，不用怕被單一平台捆綁。