【为纯静态网站添加管理后台】

📅 2026/8/2 2:07:32
【为纯静态网站添加管理后台】
管理员 普通访客 │ │ ▼ ▼ /admin/ /index.html(自己写的后台)(公开页面)│ │ │ GitHub PAT 鉴权 │ 无需登录 │ 直接调 API │ fetch 一下 ▼ ▼ GitHub API content/solutions.json(读/写文件)(GitHub 存的 JSON 文件)│ │ ▼ │ content/solutions.json ◄───────┘ │ ▼ GitHub Actions 检测到 push │ ▼ 自动部署到 Netlify │ ▼ https://finance-rpa-solutions.netlify.app我需要为一个纯静态网站添加管理后台以下是完整需求和技术约束 【目标】 - 网站已部署在 Netlify/静态托管上内容是 JSON 文件驱动 - 需要一个管理后台管理员登录后能编辑 JSON 数据保存后网站自动更新 - 普通访客不需要登录直接看公开页面 【技术方案——GitHub 仓库 API 直驱模式】 架构GitHub 仓库作为数据库 → 管理后台调 GitHub Contents API 读/写 JSON → GitHub Actions 自动部署到 Netlify 具体步骤1. 在 GitHub 仓库的content/目录下放数据 JSON 文件如solutions.json2. 公开页面(index.html)用 fetch 拉取这个 JSON动态渲染内容3. 创建admin/index.html作为管理后台单文件纯 HTMLJS不依赖任何后端4. 后台用 GitHub Personal Access Token 鉴权Token 只存浏览器 localStorage不经过服务器5. 后台登录后通过 GitHub Contents API 拉取 JSON → 提供表单和 JSON 源码双模式编辑 → 保存时 API 提交 commit6. 设置 GitHub Actions.github/workflows/deploy.yml每次 push 自动用 Netlify CLI 部署 【⚠️ 关键技术陷阱——必须注意】 - GitHub Contents API 返回的 content 是 base64 编码的**不要用 atob()**必须用 TextEncoder/TextDecoder 正确解码 UTF-8 中文 - 管理后台全部是静态文件不要引入 Node 后端、数据库、第三方 CMS - Netlify 免费版不支持 Identity OAuth不要走那套 - GitHub Token 只在管理后台登录框输入绝不硬编码在文件里 【交付物】 - 公开页面从 JSON 动态渲染 - 管理后台表单编辑 JSON 源码编辑双模式可视化增删改 - GitHub Actions 自动部署