Netlify CMS 完整教學：讓非工程師也能更新網站內容【2025】
你的網站做好了，老闆說：「我想自己改文章內容。」你心想：難道要教他用 Git？還是給他 FTP 帳號讓他直接改檔案？
不用那麼麻煩。Netlify CMS 就是解決這個問題的工具。它給你一個像 WordPress 一樣的編輯後台，但內容還是存在 Git 裡，不需要資料庫。
這篇文章會教你從零開始設定 Netlify CMS，讓任何人都能輕鬆更新網站內容。
Netlify CMS 是什麼？
Netlify CMS 是一個開源的 Headless CMS，現在已經改名叫 Decap CMS（2023 年更名）。
什麼是 Headless CMS？
傳統 CMS（像 WordPress）把內容管理和網站前端綁在一起。Headless CMS 只管內容，不管網站長什麼樣。
Headless CMS 的運作方式：
1. 你在 CMS 後台編輯內容
2. CMS 把內容存成檔案（通常是 Markdown）
3. 你的網站框架讀取這些檔案
4. 渲染出最終頁面
Netlify CMS 的特色
Git-based：所有內容都存在 Git repo 裡，不需要資料庫。
這代表：
- 內容有完整版本控制
- 可以用 Git 還原任何修改
- 不用擔心資料庫備份
- 可以本地預覽內容
視覺化編輯器：非工程師可以用類似 Word 的介面編輯內容，不用碰 Markdown 或程式碼。
即時預覽：編輯時可以看到內容在網站上的樣子。
Netlify CMS vs Decap CMS
2023 年，Netlify 把 Netlify CMS 捐給社群，改名叫 Decap CMS。
差別：
- 名字不同
- 維護者不同（現在是社群維護）
- 功能幾乎一樣
- 安裝方式一樣
這篇文章會用「Netlify CMS」稱呼，因為大家比較熟悉這個名字。但實際設定時，可能會看到 Decap CMS 的文件。
優缺點分析
在決定用 Netlify CMS 之前，先了解它的優缺點。
優點
完全免費
- 開源軟體，不用付錢
- 不像 Contentful、Sanity 有用量限制
- 搭配 Netlify 免費方案使用，完全零成本
不需要資料庫
- 內容存在 Git，不用管理資料庫
- 網站速度更快（純靜態）
版本控制
- 每次修改都有紀錄
- 可以隨時還原到之前的版本
- 多人編輯有衝突時可以處理
跟 Netlify 完美整合
- 自動部署
- 身份驗證用 Netlify Identity
- 設定簡單
- 完整的 Netlify 功能介紹看 Netlify 完整指南
可客製化
- 可以自訂欄位類型
- 可以自訂編輯器
- 可以用 custom widgets
缺點
設定有門檻
- 需要工程師協助初始設定
- 設定檔是 YAML，容易格式錯誤
功能有限
- 沒有 WordPress 那麼多外掛
- 進階功能需要自己開發
即時預覽有限制
- 需要額外設定
- 某些框架不支援
不適合大量內容
- 內容都是檔案，數量太多會變慢
- 建議控制在幾百篇以內
團隊協作有限
- 不像專業 CMS 有權限管理
- 沒有審核流程（除非自己設定）
適合用 Netlify CMS 的情況
- 個人部落格
- 小型公司官網
- 作品集網站
- 內容不會太多（幾百篇以內）
- 有工程師可以做初始設定
不適合的情況
- 內容超過幾千篇
- 需要複雜的權限管理
- 需要審核流程
- 需要即時搜尋功能
- 沒有工程師協助
安裝與設定步驟
好，來開始設定。這裡用一個 Hugo 網站作為範例，其他框架（Gatsby、Jekyll、Eleventy）的設定類似。
步驟一：建立 Admin 資料夾
在你的網站根目錄（或 static/public 目錄）建立 admin 資料夾，裡面需要兩個檔案：
your-site/
├── admin/
│ ├── index.html
│ └── config.yml
├── content/
├── layouts/
└── ...
步驟二：建立 index.html
這個檔案載入 Netlify CMS 的介面：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<title>Content Manager</title>
</head>
<body>
<!-- 載入 Netlify CMS -->
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>
注意：現在用 decap-cms 這個套件名稱。
步驟三：建立 config.yml
這是 Netlify CMS 的設定檔，定義了可以編輯什麼內容：
backend:
name: git-gateway
branch: main # 你的主要分支
media_folder: "static/images/uploads" # 圖片上傳位置
public_folder: "/images/uploads" # 圖片在網站上的路徑
collections:
- name: "blog" # 內部名稱
label: "部落格文章" # 後台顯示的名稱
folder: "content/blog" # 文章存放位置
create: true # 允許新增文章
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # 檔名格式
fields: # 文章欄位
- {label: "標題", name: "title", widget: "string"}
- {label: "發布日期", name: "date", widget: "datetime"}
- {label: "摘要", name: "description", widget: "text"}
- {label: "內容", name: "body", widget: "markdown"}
步驟四：設定 Netlify Identity
Netlify CMS 需要身份驗證。最簡單的方式是用 Netlify Identity。
- 登入 Netlify 後台
- 選擇你的網站
- 點 Site configuration > Identity
- 點 Enable Identity
步驟五：啟用 Git Gateway
- 還是在 Identity 頁面
- 往下滾到 Services
- 點 Git Gateway 旁的 Enable
這讓 Netlify Identity 的用戶可以修改 Git repo。
步驟六：邀請用戶
- 在 Identity 頁面點 Invite users
- 輸入要邀請的 email
- 對方會收到邀請信，設定密碼後就能登入
步驟七：測試
- 部署網站到 Netlify
- 前往
https://你的網站.netlify.app/admin/ - 用邀請的帳號登入
- 應該會看到 CMS 後台
如果一切順利，你已經有一個可以運作的 CMS 了！
欄位類型與設定
Netlify CMS 支援多種欄位類型，讓你的內容結構更豐富。
基本欄位類型
fields:
# 單行文字
- label: "標題"
name: "title"
widget: "string"
# 多行文字
- label: "摘要"
name: "description"
widget: "text"
# Markdown 編輯器
- label: "內容"
name: "body"
widget: "markdown"
# 數字
- label: "閱讀時間"
name: "readingTime"
widget: "number"
value_type: "int"
min: 1
max: 60
# 布林值（開關）
- label: "是否發布"
name: "published"
widget: "boolean"
default: false
日期與時間
fields:
# 日期時間
- label: "發布時間"
name: "date"
widget: "datetime"
format: "YYYY-MM-DD HH:mm"
# 只有日期
- label: "生日"
name: "birthday"
widget: "datetime"
format: "YYYY-MM-DD"
time_format: false
選擇欄位
fields:
# 下拉選單
- label: "分類"
name: "category"
widget: "select"
options:
- { label: "技術", value: "tech" }
- { label: "生活", value: "life" }
- { label: "旅遊", value: "travel" }
# 多選
- label: "標籤"
name: "tags"
widget: "select"
multiple: true
options: ["JavaScript", "React", "Vue", "CSS"]
圖片與檔案
fields:
# 圖片
- label: "封面圖"
name: "cover"
widget: "image"
required: false
# 檔案
- label: "附件"
name: "attachment"
widget: "file"
required: false
巢狀結構
fields:
# 物件（固定欄位）
- label: "SEO 設定"
name: "seo"
widget: "object"
fields:
- { label: "Meta 標題", name: "metaTitle", widget: "string" }
- { label: "Meta 描述", name: "metaDescription", widget: "text" }
# 列表（可重複）
- label: "相關連結"
name: "links"
widget: "list"
fields:
- { label: "名稱", name: "name", widget: "string" }
- { label: "網址", name: "url", widget: "string" }
關聯其他內容
fields:
# 關聯其他 collection
- label: "作者"
name: "author"
widget: "relation"
collection: "authors"
search_fields: ["name"]
value_field: "name"
display_fields: ["name"]
進階功能與技巧
基本設定會了，來看一些進階技巧。
即時預覽設定
讓編輯時能看到內容在網站上的樣子：
# config.yml 新增
local_backend: true # 本地開發時使用
然後需要在你的框架中設定預覽模板。以 React 為例：
// admin/preview.js
import CMS from 'decap-cms-app';
// 註冊預覽模板
CMS.registerPreviewTemplate('blog', BlogPreview);
function BlogPreview({ entry }) {
return (
<article>
<h1>{entry.getIn(['data', 'title'])}</h1>
<p>{entry.getIn(['data', 'description'])}</p>
<div>{entry.getIn(['data', 'body'])}</div>
</article>
);
}
編輯流程（Editorial Workflow）
如果需要審核流程，可以啟用 Editorial Workflow：
# config.yml
publish_mode: editorial_workflow
啟用後，內容會有三個狀態：
1. Draft：草稿
2. In Review：審核中
3. Ready：準備發布
編輯者可以把內容移動到不同狀態，審核者決定何時發布。
自訂編輯器按鈕
在 Markdown 編輯器加入自訂按鈕：
CMS.registerEditorComponent({
id: "youtube",
label: "YouTube",
fields: [
{ name: "id", label: "Video ID", widget: "string" }
],
pattern: /^{{< youtube (\S+) >}}$/,
fromBlock: match => ({ id: match[1] }),
toBlock: data => `{{< youtube ${data.id} >}}`,
toPreview: data => (
`<iframe src="https://www.youtube.com/embed/${data.id}"></iframe>`
)
});
多語系設定
如果網站有多語系：
collections:
- name: "blog_en"
label: "Blog (English)"
folder: "content/en/blog"
# ... 其他設定
- name: "blog_zh"
label: "部落格（中文）"
folder: "content/zh/blog"
# ... 其他設定
或用 i18n 功能：
i18n:
structure: multiple_folders
locales: [en, zh]
default_locale: en
collections:
- name: "blog"
label: "Blog"
i18n: true
folder: "content/blog"
# ... 其他設定
本地開發
不想每次都部署才能測試 CMS？
- 安裝 local backend：
npx decap-server
- 在
config.yml啟用：
local_backend: true
- 前往
http://localhost:3000/admin/測試
常見問題解決
設定 CMS 常見的問題和解決方法。如果遇到 502 錯誤，可以參考 Netlify 502 錯誤解決指南。
登入後出現空白頁
可能原因：
1. config.yml 格式錯誤
2. Git Gateway 沒啟用
3. Identity 沒啟用
解決方法：
- 用 YAML 驗證工具檢查 config.yml
- 確認 Netlify Identity 和 Git Gateway 都啟用了
- 檢查瀏覽器 Console 的錯誤訊息
無法儲存內容
可能原因：
1. 用戶沒有 Git 寫入權限
2. Branch 保護設定
解決方法：
- 確認 Git Gateway 設定正確
- 檢查 GitHub repo 的 branch protection 設定
圖片上傳失敗
可能原因：
1. media_folder 路徑錯誤
2. Git LFS 沒設定（如果圖片很大）
解決方法：
- 確認 media_folder 是相對於 repo 根目錄的路徑
- 圖片太大的話，考慮用外部圖床
修改沒有觸發部署
可能原因：
1. 推送到錯誤的 branch
2. Netlify 沒有偵測到變更
解決方法：
- 確認 config.yml 的 branch 設定
- 手動觸發 Netlify 重新部署
中文檔名問題
如果檔名包含中文，可能會有問題：
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
# 改成
slug: "{{year}}-{{month}}-{{day}}-{{fields.slug}}"
然後加一個專門的 slug 欄位：
fields:
- label: "網址代稱"
name: "slug"
widget: "string"
常見問題 FAQ
Netlify CMS 還在維護嗎？
是的。雖然改名叫 Decap CMS，但社群持續維護中。
一定要用 Netlify 才能用 Netlify CMS 嗎？
不一定。Netlify CMS 可以跟任何 Git 平台（GitHub、GitLab、Bitbucket）搭配，部署在任何平台。只是用 Netlify Identity 最方便。如果考慮其他平台，可以看 Netlify vs Vercel 比較。
可以讓用戶自己註冊嗎？
可以，在 Identity 設定開啟 Open registration。但要小心，可能會被濫用。
內容有備份嗎？
內容都在 Git repo 裡，就是最好的備份。每個版本都有紀錄。
可以離線編輯嗎？
不行。Netlify CMS 需要網路連線才能運作。
跟 WordPress 比，哪個好？
各有優缺點。Netlify CMS 更適合需要版本控制、追求速度的技術團隊。WordPress 功能更多、生態更豐富、非技術人員更容易上手。
Netlify CMS 設定重點與適用情境整理
Netlify CMS（Decap CMS）是一個簡單但實用的內容管理工具。它讓非工程師可以用視覺化介面編輯網站內容，同時保留了 Git 版本控制的好處。
適合用 Netlify CMS 如果你：
- 想讓非技術人員更新網站
- 不想管理資料庫
- 內容量不是特別大
- 有工程師做初始設定
設定流程回顧：
1. 建立 admin/index.html 和 config.yml
2. 啟用 Netlify Identity 和 Git Gateway
3. 邀請用戶
4. 開始編輯
現在就開始設定吧！如果需要更多 Netlify 相關教學，可以看 Netlify 完整指南。
VibeFix 是專門幫助非工程師處理程式部署問題的服務。AI 幫你寫代碼，我們幫你上線。
CMS 設定遇到問題？需要協助客製化內容結構？讓 VibeFix 幫你搞定