在本地使用 Netlify CMS

因為 Gatsby Advanced Starter 最近開始支援 Netlify CMS，所以就研究了一下這個東西。原本以為只有在 Netlify 才能用，但是後來發現其實在很多種環境中都能用。

原本的使用方式是 Netlify CMS 隨著靜態網站上傳至 Netlify、Github Pages 或 Vercel（前 ZEIT、Now.sh）之類的空間，在 Netlify CMS 上對文章做的任何變更會 commit 到你設定的後端 git repository，然後這些空間就會自動更新這些內容。

自 2020 年 2 月開始，雖然還是測試功能，不過 Netlify CMS 也能在本地端使用了。原本後端只能是像 Github、Gitlab 或是 Bitbucket 在網路上的 git 服務，但是現在在 local git repository 也能用了。

這種的運作方式是我們用開發伺服器（develop server）開啓 Netlify CMS，然後用 netlify-cms-proxy-server 當作後端，讓 Netlify CMS 上做的變更可以寫入 local git repository 中。

接下來以 Gatsby 來做示範，其他 static site generator 流程大概差不多。

設定流程

首先要進行設定，修改 config.yml，在裡面加入：

backend:
  name: git-gateway

local_backend: true

然後到靜態網站的資料夾：

cd /path/to/blog

開伺服器 netlify-cms-proxy-server：

npx netlify-cms-proxy-server

再開 Gatsby development server：

gatsby develop

這樣就可以使用了，Netlify CMS 會在 http://localhost:8000/admin。

另一個方式

不過這樣還是有點麻煩，因為要下兩道指令。如果在開 Gatsby develop server 的時候就能把 netlify-cms-proxy-server 開好的話會更方便。因為 Gatsby 跟 netlify-cms-proxy-server 都是在 Node.js 執行的，官方又開放了這個功能，所以可以讓 Gatsby develop server 開 netlify-cms-proxy-server。

先裝 netlify-cms-proxy-server：

yarn add netlify-cms-proxy-server --dev
# or
npm install netlify-cms-proxy-server --save-dev

然後在 gatsby-node.js 加入：

const { registerLocalFs } = require("netlify-cms-proxy-server/dist/middlewares");

exports.onCreateDevServer = async ({ app }) => {
  await registerLocalFs(app);
};

在 config.yml 裡面加入：

backend:
  name: git-gateway

local_backend:
  url: http://localhost:8000/api/v1

這樣以後就只要開 Gatsby development server 就好了（第一次使用記得先用 gatsby clean 清除快取）：

gatsby develop

其他變化

以上介紹了讓 Netlify CMS 使用 local git repository 基本的設定方式，不過還有一些設定我沒有自己試過，就列在這邊當作參考。

Local Git Middleware

netlify-cms-proxy-server 預設使用 localFsMiddleware，在 Netlify CMS 上做出的變更會直接寫到本地的檔案中。如果想要為變更建立 git commit 的話，可以用 localGitMiddleware。如果要使用，要在啓動 netlify-cms-proxy-server 前加入環境變數 MODE=git。

Optional Local Backend

這則留言寫說只有在 Netlify CMS 在 localhost 執行時，才會尋找 netlify-cms-proxy-server。另外根據這個 pull request 所說，如果沒有開 netlify-cms-proxy-server，就算在 localhost 執行 Netlify CMS，還是會使用一般的 backend。

因此可以用這個特性，在 config.yml 同時指定 backend 與 local_backend。如果 Netlify CMS 在 localhost 執行，又有開 netlify-cms-proxy-server，就用 local backend；否則使用一般的 git backend。