這個案子的背景
客戶是一位任職於有巢氏麻吉地產的房產顧問，同時也是內容創作者。她用 AI 生成了一個前台，想找人幫她加上後台管理，這樣她之後能自己修改影片資訊、物件資料、個人介紹等內容，不用每次都找人改。
前台是純靜態 HTML + CSS + JS，資料全部寫死在 main.js 裡，沒有任何後端。我的任務是：在不動視覺設計的前提下，幫她建立一個可用的後台管理系統，部署到 Netlify，完全免費。
架構決策：怎麼設計才不容易出 bug？
後台的入口我選擇用兩個頁面而不是一個，原因很實際：
- 登入頁（/admin/index.html）：單純驗證密碼，通過才跳轉
- 後台頁（/admin/dashboard.html）：載入時先驗 token，沒有就踢回去
如果用單一頁面做「顯示/隱藏」切換，HTML 其實已經全部載進來了，邏輯也容易混在一起。兩個頁面職責分離，出問題很容易定位。
整個流程分四步
改造前台：從寫死資料改成呼叫 API
原本的 main.js 把所有影片和物件資料都硬寫在檔案裡，我把它改成啟動時先呼叫 /api/data，拿到資料後再渲染。這樣前台的視覺完全不變，只是資料來源從本地換成 API。
建立後台管理介面
後台包含四個功能區塊：個人資料、聯絡與社群連結、精選影片管理、超級A案物件管理。每個區塊都有對應的表單，影片和物件支援新增、編輯、刪除。所有修改完成後按一個「儲存所有變更」按鈕，統一送出。
後端：Netlify Functions 處理驗證和資料
寫了兩個 Function：auth.js 負責驗證密碼、回傳 JWT token；data.js 處理資料的讀取（GET，公開）和寫入（POST，需要帶 JWT）。密碼存在 Netlify 環境變數，不會出現在程式碼裡。
資料儲存：最後選了 JSONBin.io
這步踩了一個大坑（下面會說），最終用 JSONBin.io 免費方案解決。資料讀寫即時生效，不需要重新部署。
踩過的坑
public/ 資料夾。解法：進入資料夾「裡面」，把內容物上傳，不要包含外層資料夾。
MissingBlobsEnvironmentError，試了新版 context 語法也沒用。解法：放棄 Blobs，改用 JSONBin.io 免費 API，反而更穩更簡單。
jsonwebtoken 和 @netlify/blobs 需要在 functions 資料夾裡放一個獨立的 package.json，Netlify 才知道要去那裡安裝套件。根目錄的 package.json 不夠。解法：在
netlify/functions/ 裡加一個 package.json。
最終費用一覽
| 服務 | 用途 | 費用 |
|---|---|---|
| Netlify | 前台 + Functions 託管 | 免費 |
| GitHub | 程式碼版本管理 | 免費 |
| JSONBin.io | 資料儲存（每月 10,000 次讀寫） | 免費 |
| 網域 | 自訂網址（選填） | 約 NT$400–600 / 年 |
每月固定費用：NT$0。如果網站流量很大（每天超過 300 個訪客），JSONBin 才有可能需要升級，但那時候網站已經在幫客戶賺錢了。
這個方案適合誰？
做完這個案子，我覺得這套架構最適合：
- 房地產 / 保險業務員：個人品牌 + 物件展示
- 內容創作者 / YouTuber：作品集 + 社群連結整合
- 自由接案者（設計師、攝影師、講師）：作品集網站
- 小型工作室：品牌官網 + 服務介紹
共同條件是：需要自己能改內容、不想每月付平台費、內容相對固定（不需要購物車或會員系統）。
如果你也想做一個這樣的網站
我的工作室有提供這項服務，包含前台設計 + 後台管理系統 + Netlify 部署，一次交付，之後你自己能管理。歡迎直接聯絡聊聊需求。