# 前言：名詞定義
| 名詞 | 意思 |
|---|---|
| Decap CMS | Netlify CMS 後來停止開發了，這是接手下來的專案，也就是在這個庫管理後台首頁中間插入的 cdn 網址，所看到的 Netlify CMS2.0.0 |
| Netlify CMS | Netlify 最初提供的靜態網頁後台管理工具 |
以下按照步驟下去敘述，內含踩過的坑 Orz...
# Deploy
有時候我蠻懶的，所以我是之前逛 GitHub 時，去找這類型現成的儲藏庫，想說 fork 之類的就能得到一個 Hexo（...），Starred 了好幾個，最後實作我選了這個庫，因為它會幫我自動部署到可以為靜態網頁安裝後台管理界面的 Netlify [1]
[1]: 免費方案免費 300 分鐘 Build 時數，我自己用下來，Hexo 發單篇文章或單純調樣式每次 Deploy 大概花幾秒，如果透過本機一次要發很多篇文章推版，會花稍為久一點的時間
進到這個儲藏庫，看到 README，點那個藍色上面有寫 Deploy 字樣的按鈕就對了 xd，它會把你帶到 Netlify，請你創建一個新的 GitHub 儲藏庫去放你的 Hexo 跟管理後台相關檔案，至於部署方案跟語法，前者 Netlify 會自動偵測為 Hexo，後者是這個庫作者已經幫我們寫好 netlify.toml 。
不過之後另篇主題設置的文章會提到，如果使用 Algolia 搜尋工具，要修改部署語法。
# 初次部署失敗
原因是 Netlify 預設的啟動方式不適用本專案，請參考這篇討論的第一個回答修改 CI 啟動命令跟環境設置
# 讓 Netlify CMS (其實是 Decap CMS) 後台能夠登入
但剛剛那個庫從 Add the Netlify Identity Widget 開始其實是我們要開始手作的
一開始我以為這個庫已經處理好我該改的部分了，但在網站網址後加入 /admin 進到後台，輸入帳密並沒辦法登入，後來根據這篇討論得知：
- 電子郵件預設範本給你的網址上是有 token，但少在你的網站後方描了 /admim，但做到這步即使寫了完整網址也沒用，下方會說原因
- 配置成功的畫面應該是會出現一個驗證按鈕而非登入輸入框
- 初次登入應該要是能設定後台密碼的
點 1 肇因於 source/admin/index.html 的 head 內缺少了 Netlify 身分驗證工具，我們得手動加上它：
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> |
其實加在後台頁面首頁就夠了，有些文章會要你想辦法加在網站根目錄（這樣信箱的驗證連結應該就能作用了），但 Hexo 的首頁是渲染出來的，要加這段代碼是有點麻煩
但這樣還是不夠的，如果你是按照本文步驟建置，由於用於 deploy 的庫年份稍早，這中間 GitHub 已經把 master 分支統一改為 main，所以即使你身分驗證方面的問題處理完，這時候你想登入還是會一直跳出 git gateway 相關的錯誤，所以你要到 source/admin/config.yml 修改你的分支為 main
backend: | |
name: git-gateway | |
branch: main # 改成 main |
其他參考文章：
- Netlify 身分驗證工具官方文件
- Decap CMS 官方教你手把手搭建後台
- 記得開 F12 檢查頁面有沒有確實加上身分驗證小工具
- 缺少身分驗證工具基本上無法使用
- 如果早點看到這篇或許能少花點時間 -.-
- 這篇也是
# 怒換後台為 Static CMS
然而好不容易讓後台可以登入使用了，我發現中文輸入游標會亂跑，完全無法打字，後來發現是現行 Decap CMS 一個長期未修的 bug，其源頭是 Slate JS 某版出現了 Bug（像 Grafana 有陣子也因此出現這個 bug），根據討論加了 CSS 樣式強蓋也毫無作用，這樣怎麼用啦 = =...
很苦惱哇... 後來看到這篇文章提到可以抽換為 Static CMS，就能進行中文輸入了
以下是抽換完的 source/admin/index.html（head 那個樣式表記得加，不然頁面會爛掉 www）
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<link rel="stylesheet" href="https://unpkg.com/@staticcms/app@^2.0.0/dist/main.css" /> | |
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script> | |
<title>Content Manager</title> | |
</head> | |
<body> | |
<script src="https://unpkg.com/@staticcms/app@^2.0.0/dist/static-cms-app.js"></script> | |
<script> | |
window.CMS.init(); | |
</script> | |
</body> | |
</html> |
不過這個 Static CMS 不像 Netlify CMS (其實是 Decap CMS) 可以從富文本編輯器切換成原始碼編輯器，微可惜
另外可以在後台的 config.yml 調整語言界面，這些是 Decap CMS 有支援的語言，應該跟 Static CMS 有支援的差不多，需要到專案下方語言包查證。抽換後繁體中文還是能作用的，所以得知至少 Static CMS 也是支援繁體中文的
source/admin/index.html 抽換語言的設置：
locale: "zh_Hant" |
至於後台 Posts 的欄位設置，因為跟我想安裝的主題 Shoka 有點關係，所以之後其他篇文章再說
# 結語
到目前為止，訪問你的 https:// 專案名稱.netlify.app/ 應該就能看到你的 Hexo 還有預設的主題了，但這似乎只是開始... 因為主題安裝可能也是個大坑 `;w;，下一篇再繼續解說
