因為 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
,在裡面加入:
然後到靜態網站的資料夾:
開伺服器 netlify-cms-proxy-server
:
再開 Gatsby development server:
這樣就可以使用了,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
:
然後在 gatsby-node.js
加入:
在 config.yml
裡面加入:
這樣以後就只要開 Gatsby development server 就好了(第一次使用記得先用 gatsby clean
清除快取):
其他變化
以上介紹了讓 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。