skip to content
鰭狀漏斗

在本地使用 Netlify CMS

/ 閱讀時間 4 分鐘

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

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

自 2020 年 2 月開始,雖然還是測試功能,不過 Netlify CMS 也能在本地端使用了。原本後端只能是像 GithubGitlab 或是 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

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

Terminal window
cd /path/to/blog

開伺服器 netlify-cms-proxy-server

Terminal window
npx netlify-cms-proxy-server

再開 Gatsby development server:

Terminal window
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

Terminal window
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 清除快取):

Terminal window
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 同時指定 backendlocal_backend。如果 Netlify CMS 在 localhost 執行,又有開 netlify-cms-proxy-server,就用 local backend;否則使用一般的 git backend。

參考資料