domain-showcase 部署教程：赛博朋克域名展示站

前言

domain-showcase 是一个赛博朋克风格的个人域名展示主页，自带可视化后台管理系统，支持在线编辑站点内容。它同时提供了 Cloudflare Pages 和 Docker 两套部署方案，前者完全免费（Pages 配额 + KV 免费额度），后者适合已有 VPS 的用户。

• 项目地址：https://github.com/love-ztm/domain-showcase
• 开源协议：ISC
• 演示域名：oooooooooooo.cc.cd（CC 免费域名，来自 DNSHE）

功能特点

技术栈

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13

domain-showcase/
├── public/                 # 前端静态资源（部署目录）
│   ├── index.html          # 主页
│   ├── admin.html          # 管理后台
│   ├── css/                # 样式
│   └── js/                 # 脚本
├── functions/api/          # Cloudflare Pages Functions
│   └── content.js          # API: GET / PUT / PATCH /api/content
├── data/content.json       # 本地开发 / Docker 数据存储
├── server.js               # Express 服务器（Docker 用）
├── wrangler.toml           # Cloudflare 配置（含 KV 绑定）
├── Dockerfile              # Docker 构建文件
└── package.json

核心思路：前端和 API 共用一套。Cloudflare Pages 方案由 functions/api/content.js 读写 KV，Docker 方案由 server.js 读写 content.json，两端 API 接口完全一致（GET/PUT/PATCH /api/content），所以前端零改动即可切换部署方式。

准备工作

1. GitHub 账号 — 用于托管项目代码，并接入 Cloudflare Pages
2. Cloudflare 账号 — Dash Cloudflare，绑定或托管一个域名
3. Node.js 环境（可选）— 仅在创建 KV、本地调试时需要

部署方式一：GitHub + Cloudflare Pages（免费）

整体流程：推代码到 GitHub → 创建 KV 命名空间 → Cloudflare Pages 连接仓库 → 绑定 KV → 部署完成。

1. 推送项目到 GitHub

1
2
3
4
5
6
7
8
9

cd domain-showcase
git init
git add .
git commit -m "init: domain showcase"

# 在 GitHub 创建同名仓库后：
git remote add origin https://github.com/你的用户名/domain-showcase.git
git branch -M main
git push -u origin main

2. 创建 KV 命名空间

安装 wrangler CLI 并登录 Cloudflare：

1
2
3
4
5

npm install -g wrangler
wrangler login

# 创建 KV 命名空间
npx wrangler kv namespace create SITE_CONTENT

执行后会输出：

1

{binding = "SITE_CONTENT", id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}

记下这串 KV ID。

3. 确认 wrangler.toml 中的 KV ID

打开 wrangler.toml，确认 kv_namespaces 绑定的是你刚创建的 ID：

1
2
3
4
5
6
7

name = "domain-showcase"
compatibility_date = "2024-09-23"
pages_build_output_dir = "public"

[[kv_namespaces]]
binding = "SITE_CONTENT"
id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

💡 仓库里默认带了一个 KV ID，直接部署也能跑；但建议换成自己的命名空间，数据隔离更清晰、管理更方便。

4. 连接 Cloudflare Pages

1. 登录 Cloudflare Dashboard
2. 进入 Workers 和 Pages → Create application → Pages → Connect to Git
3. 授权并选择你的 GitHub 仓库
4. 配置构建设置：
   • Production branch：main
   • Build command：留空（纯静态站，无需构建）
   • Build output directory：public
5. 点击 Save and Deploy

5. 绑定 KV 到 Pages 项目

1. 进入刚才创建的 Pages 项目 → Settings → Functions → KV namespace bindings
2. 添加绑定：
   • Variable name：SITE_CONTENT（必须和代码里的绑定名一致）
   • KV namespace：选择第 2 步创建的 SITE_CONTENT
3. 保存后项目会自动重新部署（或手动再部署一次）

查看部署：Deployments 里确认最新部署状态为 Success，域名下的 Functions 部分能看到 functions/api/content。

6. 绑定自定义域名

1. 进入项目 Settings → Custom domains → Set up a custom domain
2. 输入你的域名（例如 oooooooooooo.cc.cd）
3. 如果域名在 Cloudflare DNS 托管，会自动添加 DNS 记录；否则按提示手动添加 CNAME 指向 xxx.pages.dev

7. 验证部署

1
2
3
4
5

# API 是否正常读出内容
curl https://你的域名/api/content

# 页面是否正常
curl -I https://你的域名/

返回 { "ok": true, "data": {...} } 即表示 KV 绑定成功。

部署方式二：Docker（VPS 部署）

适合已经有 VPS（如国内/海外小鸡）的用户，数据直接存在服务器的 content.json 文件里。

1. 上传项目到服务器

1
2
3
4
5

# 方式 A：通过 Git 拉取
git clone https://github.com/你的用户名/domain-showcase.git

# 方式 B：scp 上传
scp -r domain-showcase/ root@你的服务器IP:/opt/

2. 构建并运行

1
2
3
4
5
6
7
8
9
10
11
12

cd /opt/domain-showcase

# 构建镜像
docker build -t domain-showcase .

# 运行容器（挂载 data 目录，避免重建容器丢数据）
docker run -d \
  --name domain-showcase \
  --restart always \
  -p 3000:3000 \
  -v /opt/domain-showcase/data:/app/data \
  domain-showcase

⚠️ 记得挂载 -v ...:/app/data 数据卷！后台编辑的内容写入 data/content.json，不挂载的话容器重建后修改会丢失。

3. 验证

1
2
3
4
5
6
7
8
9

# 查看容器状态 / 日志
docker ps
docker logs domain-showcase

# 测试 API（应返回 ok:true 和默认内容）
curl http://localhost:3000/api/content

# 访问页面
curl -I http://localhost:3000/

4. Nginx 反向代理（可选）

通过域名访问时，在 Nginx 里反代到 3000 端口：

1
2
3
4
5
6
7
8
9
10
11
12

server {
    listen 80;
    server_name oooooooooooo.cc.cd;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

5. 配置 HTTPS（可选）

1
2

apt install certbot python3-certbot-nginx
certbot --nginx -d oooooooooooo.cc.cd

API 接口说明

Cloudflare 方案中，functions/api/content.js 内置了 DEFAULT_CONTENT：KV 里没有任何数据时，自动返回默认内容，所以首次部署页面不会空，修改前访问后台都是默认展示效果。

管理后台使用

部署完成后访问 /admin.html 即进入后台，左侧按板块切换编辑：

编辑完点击 保存，会调用 PUT /api/content 写入 KV（或 content.json），页面顶端出现「已保存 ✓」提示，刷新主页即可看到效果。

🔒 安全提醒：当前版本后台没有登录鉴权，任何能访问 /admin.html 的人都能改内容。公开部署建议在 Cloudflare 给 /admin* 路径加上 Cloudflare Access 保护，或用 Vercel/CF 等平台的访问密码功能兜底。

常见问题

Q：KV 绑定了但 API 还是返回默认内容？
A：这是正常的——KV 里还没有数据时会用内置 DEFAULT_CONTENT 兜底。去后台改一下任意板块点保存，就会写入 KV 了。

Q：后台保存后主页没变化？
A：确认保存提示「已保存 ✓」出现；Cloudflare 方案保存的是 KV，主页通过 GET /api/content 读取，无缓存问题。如果没变化，检查浏览器控制台是否有 CORS / 404 报错。

Q：Pages 构建失败？
A：这是纯静态站，Build command 必须留空，输出目录填 public。如果填了 npm run build 之类会直接失败。

Q：KV 绑定名需要注意什么？
A：绑定名必须严格是 SITE_CONTENT，与 functions/api/content.js 里的 env.SITE_CONTENT 一致，大小写也要一致。

Q：Docker 重启容器后后台改的内容没了？
A：没挂载数据卷。启动命令里加上 -v /opt/domain-showcase/data:/app/data，内容持久化在服务器的 content.json 中。

Q：怎么把 Cloudflare 方案改成 Docker 方案？
A：前端和 API 接口完全一致，把 functions/api 换成 server.js 跑起来即可，前端代码零改动；数据从 KV 迁到 content.json 即可。

小结

domain-showcase 的核心亮点是一套前端双轨部署：

• ☁️ Cloudflare Pages + KV：免服务器、免备案、全球 CDN，适合个人展示页，成本为零
• 🐳 Docker + Express：数据落在自己 VPS 的 JSON 文件里，适合已有服务器、想完全掌控数据的场景

配合免费的 CC 域名（.cc.cd 等）和 Cloudflare 免费套餐，一个赛博朋克风格的域名展示站十分钟就能上线。部署中遇到问题欢迎在评论区交流～

推荐链接

• 大佬CM博客
• 大佬周润发博客
• 大佬青云志博客