Home

建置 Decap CMS

紀錄使用 Decap CMS、GitHub backend 與 Netlify Identity 建置文章後台的精簡流程。

架構

Decap CMS 是靜態網站的內容後台，能直接將文章與圖片寫入 GitHub repository 的 main branch。

  • 後台入口：/admin/
  • Decap 檔案：admin/index.html 與 admin/config.yml
  • 內容位置：依靜態網站產生器的目錄慣例設定
  • 文章圖片：可放在內容資料夾或指定的 media folder

建置流程

1. 建立 Decap 後台

在 admin/ 放入入口 HTML，載入 Decap CMS；再建立 config.yml，設定 GitHub backend、repository 與 main branch。

backend:
  name: github
  repo: owner/repository
  branch: main

設定檔可另外指定網站 Logo，並以絕對路徑載入 /admin/config.yml，避免 /admin 是否帶尾端斜線造成路徑錯誤。

2. 設定 GitHub OAuth

img1

在 GitHub 建立 OAuth App：

  • Homepage URL：https://example.com
  • Authorization callback URL：https://api.netlify.com/auth/done

img2

再將 Client ID 與 Secret 填入 Netlify 專案的 GitHub OAuth Provider。Decap 使用 GitHub OAuth 取得 repository 寫入授權。

Secret token 只會出現一次，跟 GCP SA key 一樣，需保存起來

3. Netlify 控制台

在 Netlify 控制台進入 Project configuration → Access & security → OAuth → Authentication providers，啟用 GitHub Provider，填入 GitHub OAuth App 的 Client ID 與 Client Secret，儲存後即可提供 Decap 登入授權。

img3