把归档页面发布出去：Pages / VPS / NAS 三种方式

以你手上的归档包 html-archive（索引页 + 子目录页面）为例。三种方式发布的都是同一份文件夹，区别只在「放在谁的机器上、谁来对外提供访问」。先看总览，再挑一种照着做。

先看懂整体结构

	Cloudflare Pages	VPS	NAS
成本	免费额度足够个人用	已有 VPS 则为 0	已有 NAS 则为 0
难度	最低，网页点几下	中，要敲几条命令	低（局域网）／中（外网）
维护	无，平台托管	自己管服务器	自己管机器和网络
大陆访问	pages.dev 经常打不开或很慢	看线路，海外机普遍一般；国内机需备案	局域网最快；外网取决于你家宽带和穿透方式
适合	对外分享、自查，快速上线	长期自有站点、可控性最高	家庭内看、和原始文件放一起

① Cloudflare Pages 发布（最省事）

原理：把文件夹交给 Cloudflare 的全球静态托管，平台负责 HTTPS 证书、CDN 和可用性，你只负责上传。两种上传方式选一种即可。

方式 A：后台直接上传（推荐新手）

1. 打开 dash.cloudflare.com 登录，左侧菜单点 Workers & Pages。
2. 点 Create → 切到 Pages 标签 → 选 Upload assets（直接上传）。
3. 给项目起名，例如 my-archive。名字将决定默认网址：my-archive.pages.dev（只能用小写字母、数字和连字符）。
4. 把 html-archive 文件夹解压后的内容拖进上传区（或点选文件夹上传），点 Deploy site。
5. 等进度跑完，点给出的网址，根路径就是索引页；各页面地址形如 my-archive.pages.dev/k11-select/。

方式 B：Wrangler 命令行（适合反复更新）

# 一次性准备
npm install -g wrangler
wrangler login        # 浏览器里授权一次

# 每次发布/更新只用这一条（在归档文件夹的上一级执行）
wrangler pages deploy ./html-archive --project-name my-archive

第一次执行会自动创建项目，之后每次执行就是一次新部署，几十秒生效。新增页面后重新跑一遍即可。

可选一步：绑定自己的域名

1. 进入项目 → Custom domains → Set up a custom domain，输入如 archive.example.com。
2. 域名若托管在 Cloudflare，DNS 记录会自动添加；不在 CF 的，按提示去域名商那里加一条 CNAME 指向 my-archive.pages.dev。
3. 等几分钟证书自动签发，状态变 Active 即可用新域名访问。

可选一步：不想全公开，加一层访问验证

1. 进入 Zero Trust → Access → Applications → 新建 Self-hosted 应用，域名填你的 Pages 域名。
2. 策略（Policy）里加一条 Allow，条件选 Emails，填你自己的邮箱。之后访问先要邮箱收验证码登录，免费版够个人使用。

② VPS 发布（Caddy，一次配好长期用）

原理：VPS 上装一个轻量 Web 服务器 Caddy，把文件夹指给它。Caddy 的好处是 HTTPS 证书全自动申请和续期，不用碰 certbot。下面以 Debian / Ubuntu 为例。

动手前准备

• 一台能 SSH 登录的 VPS，记下公网 IP。
• 一个域名（或子域名），如 archive.example.com；没有域名也能先用 IP 访问，但没有 HTTPS，建议配域名。
• 服务器防火墙 / 云厂商安全组放行 80、443 端口（证书签发和访问都要用）。

步骤

1. 本机终端登录服务器：ssh root@你的服务器IP
2. 安装 Caddy（官方源，四条命令依次执行）：

   apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
   curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
   curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list
   apt update && apt install -y caddy

3. 在本机把归档文件夹传上去（在本机终端执行，不是在服务器上）：

   rsync -avz ./html-archive/ root@你的服务器IP:/var/www/html-archive/

4. 在服务器上编辑 Caddy 的配置文件 /etc/caddy/Caddyfile，写入：

   archive.example.com {
       root * /var/www/html-archive
       file_server
       encode gzip
   }

5. 去域名 DNS 处加一条 A 记录：主机名 archive → 指向 VPS 公网 IP，等解析生效（几分钟）。
6. 在服务器上重载配置：systemctl reload caddy。Caddy 会自动向 Let's Encrypt 申请证书。
7. 浏览器打开 https://archive.example.com，看到索引页即成功；单个页面是 https://archive.example.com/k11-select/ 这样的地址。

可选：加一层口令（Basic Auth）

# 在服务器上生成密码哈希，会让你输入一次密码
caddy hash-password

# 把结果填进 Caddyfile 对应站点块里：
archive.example.com {
    root * /var/www/html-archive
    file_server
    encode gzip
    basic_auth {
        core <上一步生成的哈希值>
    }
}

改完照样 systemctl reload caddy。之后访问会先弹浏览器自带的账号密码框。

以后更新

只有一条命令（本机执行），传完即生效，不用重启任何东西：

rsync -avz --delete ./html-archive/ root@你的服务器IP:/var/www/html-archive/

可以把这条命令存成一个 deploy.sh 脚本，以后双击/一行运行。已经习惯用 Nginx 的话也一样：把 server 块的 root 指向同一目录即可，证书用 certbot 签，步骤比 Caddy 多两步，其余相同。

③ NAS 发布（以群晖为例）

NAS 有三种由简到繁的玩法。只是家里看，第一种就够；想在浏览器里像个正经站点一样打开，用第二种；想从外网也能访问，再看最后的「外网访问」。

路线 1：直接当文件打开（零配置）

1. 把 html-archive 整个文件夹拷进 NAS 任意共享文件夹（如 文档/页面归档/）。
2. 电脑上用文件管理器打开里面的 index.html；手机上用 DS file 等 App 找到它、用浏览器打开。

缺点：部分手机 App 内打开会跳转或渲染不全，相对路径图片偶尔加载异常。适合临时看，不适合当长期入口。

路线 2：群晖 Web Station（局域网正经站点，推荐）

1. DSM 后台打开 套件中心，安装 Web Station（会自动带上 Apache 或 Nginx，默认即可）。
2. 安装后会出现一个名为 web 的共享文件夹。把归档内容放进去，新建子文件夹如 web/archive/，把 html-archive 里的文件放进 archive（注意同样是放「内容」，别多套一层）。
3. 同一局域网的浏览器打开 http://群晖IP/archive/，就是索引页。到这一步已经能用了。
4. 想要独立域名入口（可选）：Web Station → 网页服务门户 → 新增 → 选「基于名称的虚拟主机」，文档根目录选 web/archive，填一个域名（如你 DDNS 的子域名），之后用域名直接打开根路径。
5. 更新页面：直接往 web/archive/ 里覆盖文件即可，刷新浏览器生效，不用重启服务。

威联通（QNAP）对应的是「Web 服务器」功能（控制台里开启，网站根目录是 Web 共享文件夹），思路完全一样。极空间、绿联等新品牌 NAS 一般用下面的 Docker 路线。

路线 3：Docker / Container Manager（各品牌 NAS 通用）

1. 把归档文件夹放到 NAS 上一个固定位置，记下路径，如 /volume1/web/archive（群晖）或其他品牌对应的数据目录。
2. 打开 NAS 的 Docker 管理（群晖叫 Container Manager）→ 项目 → 新建，粘贴下面这份 compose：

services:
  web:
    image: caddy:alpine
    ports:
      - "8080:80"
    volumes:
      - /volume1/web/archive:/usr/share/caddy   # 左边改成你 NAS 上的实际路径
    restart: unless-stopped

3. 启动项目后，浏览器打开 http://NAS的IP:8080 即可。想换端口改左边的 8080。

用 nginx:alpine 也可以，把挂载目录改成 /usr/share/nginx/html，其余相同。

从外网访问 NAS 上的页面

• DDNS + 端口转发：群晖自带 DDNS（xxx.synology.me），在路由器上把外部端口转发到 NAS 的 Web Station 或 Docker 端口。再配上 DSM 的证书（控制面板 → 安全性 → 证书，用 Let's Encrypt 免费签给 DDNS 域名）。注意只转发这一个静态服务端口，别把 DSM 管理口（5000/5001）直接暴露公网。
• Cloudflare Tunnel（更推荐）：在 NAS 的 Docker 里跑一个 cloudflared 容器，把内网的 http://localhost:8080 映射到你的域名，全程不需要公网 IP、不开任何端口，Cloudflare 负责入口和 HTTPS。等于「用你现有的 CF 账号给 NAS 开个安全门」。
• QuickConnect：群晖自带、零配置，但走中转、速度慢，且对这类自定义静态站点支持一般，只适合临时救急。

怎么选：一句话建议

常见问题

打开是空白页 / 404 / 看到的是目录列表

九成是「多套了一层文件夹」：实际路径成了 /html-archive/index.html 而不是 /index.html。检查发布根目录下是否直接躺着 index.html，不是就把内容上提一层重新发布。

页面打开了，但图片不显示

图片是相对路径（如 assets/xxx.png），说明 assets 文件夹没跟着一起传，或被单独挪了位置。整体复制页面文件夹，别只拷 index.html。

更新了文件，打开还是旧版

先强制刷新（Ctrl+F5）。Pages 有 CDN 缓存，一般几分钟内全网生效；VPS/NAS 直出的话刷新即可，若还旧，检查是不是传错了目录。

想给单个页面单独的短网址

子目录名就是网址的一部分，把文件夹名起短一点即可，如 /k11/。索引页里的链接记得同步改。

以后新页面怎么加

三步：① 根目录新建文件夹放入页面；② 在索引页 index.html 里照格式加一张卡片；③ 按你选的方式重新发布/同步一次。不想手动改索引页的，跟我说一声，我生成页面时顺手把包一起更新。