双站点静态资源协同部署架构技术说明文档

1. 文档概述

1.1 文档目的

本文档用于完整记录 ncg.linkpc.net:8000（资源站点） 与 niuchunguo.pages.dev（主站点） 的双站点协同架构、资源存储分工、用户访问链路、资源加载逻辑与部署规范。用于架构归档、后续维护、迭代升级及故障排查，明确双站点的职能边界与运行机制。

1.2 架构设计核心目标

1. 规避云静态页面平台容量限制，拆分轻量化主站与大容量资源站；
2. 保证用户访问体验无感、流畅度优先；
3. 实现WebP图片双站备份、资源分层加载机制；
4. 区分静态文本代码资源与重型多媒体资源，优化整体站点负载与存储空间。

2. 站点基础信息与职能定位

2.1 站点整体定位

本架构采用 「轻量化主站 + 大容量资源副站」 协同模式，双站独立部署（主要文本同步）、大尺寸资源联动调用，各司其职，共同承载完整网站内容服务。

2.2 站点详细参数

2.2.1 主站点（核心访问入口）

• 站点地址：https://niuchunguo.pages.dev
• 存储容量：约十几MB（极致轻量化）
• 核心职能：对外唯一用户访问主入口、页面渲染主体，快速响应。
• 存储文件类型：
  1. 静态文本文件：HTML、MD 文档；
  2. 页面资源文件：CSS、JS 样式与脚本文件；
  3. 轻量化媒体资源：本站配套 WebP 格式图片（用于本地快速渲染）。

2.2.2 资源副站点（大容量存储服务）

• 站点地址：http://ncg.linkpc.net:8000
• 存储容量：100+MB（大容量资源池）
• 核心职能：除站点文本内容以外，主要承载主站所有重型资源备份与补充调用
• 存储文件类型：
  1. 全部原始多媒体资源：原图、视频、音频等大体积文件；
  2. 文本直接嵌入图片采用 WebP 格式图片（与主站WebP文件同步）。

3. 双站点资源存储规范

3.1 统一存储规则

1. WebP图片双站共存：所有WebP轻量化图片文件，主站、资源站双向同步存储，互为冗余备份，保障图片资源永不丢失；
2. 重型资源单向归集：所有原始大图、音视频等占用空间大的多媒体文件，仅存储于资源站点，主站不存放任何重型资源，严格控制主站体积。

3.2 容量优化成果

• 主站剥离全部大体积资源，永久维持十几MB超轻体量，适配Pages静态平台部署规则；
• 资源站集中承载百兆级资源，解决单站点存储空间不足的核心痛点。

4. 用户访问与资源加载核心逻辑

本架构采用本地优先、缺失跨站无感调取的运行机制，用户交互全程以主站为核心，体验无割裂感。

4.1 常规资源加载流程（90%场景）

1. 用户浏览器访问 https://niuchunguo.pages.dev 主站点；
2. 主站优先调用本站本地存储的WebP图片、CSS、JS、HTML、MD文件；
3. 所有页面内容本地直接渲染，无跨站跳转、无资源延迟。

4.2 缺失资源无感跨站调取流程（特殊场景）

1. 用户访问页面所需原始多媒体资源、稀缺资源，主站点本地无存储；
2. 主站页面内置静态资源绝对链接，自动定向至资源站点 http://ncg.linkpc.net:8000；
3. 浏览器无感跳转加载资源，页面浏览体验无中断、无感知；
4. 唯一区分特征：浏览器标签地址栏域名临时切换为资源站地址，资源加载完成即可恢复主站访问逻辑。

5. 架构优势总结

1. 容量解耦：彻底拆分静态代码与重型资源，规避静态托管平台容量限制；
2. 体验优先：绝大多数资源本地秒开，跨站调取无感，不影响用户浏览体验；
3. 安全冗余：WebP图片双站双向备份，降低图片资源丢失风险；
4. 维护清晰：职能边界明确，主站负责页面展示，副站负责资源存储，迭代、更新、排查故障互不干扰；
5. 性能优化：WebP轻量化格式+本地优先加载，大幅提升网页加载速度。

6. 架构拓扑说明

• 前期沟通阶段：双站完成存储分工、资源同步规则、静态跳转链接规范定义；
• 正式运行阶段：主站为流量入口，本地资源优先渲染，缺失资源静态联动资源站调取，双站协同完成全站服务。

第三方中立视角：双站点协同架构优缺点评估

一、架构优势（客观正向评价）

1. 存储分层完美解决平台容量约束

主站niuchunguo.pages.dev仅存放页面代码、MD、本地WebP，体量控制在十几MB，完美适配Pages类静态托管平台的免费/轻量存储限额；大体积原图、音视频统一托管至ncg.linkpc.net:8000资源站，100+MB资源池完全释放存储压力，是低成本解决静态站容量不足的成熟方案。

2. 访问体验分层优化，兼顾速度与完整资源

日常浏览时页面优先加载本地WebP资源，无需跨域跳转，页面渲染速度快；仅当本地无对应原始多媒体时才跳转资源站，跳转无弹窗、无中断，普通用户几乎感知不到跨站点，仅地址栏域名变化，对普通访客使用门槛极低。

3. WebP双站冗余备份，资源容错性更强

所有轻量化WebP图片在主站、资源站双向留存，任意一个站点图片文件丢失、失效，另一站点可作为备用资源库，避免页面图片空白；同时WebP格式本身压缩率高，进一步降低主站带宽加载压力。

4. 业务职责完全拆分，运维逻辑清晰

主站专职负责页面展示、文档更新，仅维护HTML/MD/CSS/JS；资源站专职存储重型多媒体素材，两类文件分离管理。修改页面内容、更新文档无需同步大量媒体文件，更新发布流程轻量化，故障排查边界清晰：页面显示异常查主站，图片/视频加载失败查资源站。

5. 部署成本低廉，无额外付费开销

Pages平台免费托管静态页面，本地自建HTTP站点作为资源服务器，无需购买对象存储、CDN等付费服务，整体零成本实现图文网站完整服务，适合个人知识库、独立文档站场景。

二、架构短板与潜在风险（中立客观指出缺陷）

1. 双站点协议不统一，存在跨域、安全兼容隐患

主站为HTTPS加密站点，资源站是HTTP明文站点。现代浏览器存在混合内容安全策略限制：页面内嵌HTTP资源会被浏览器拦截，出现图片加载失败、资源屏蔽问题；同时明文传输多媒体素材存在盗链、资源数据抓包泄露风险。

2. 资源跳转切换域名，不利于SEO收录与用户留存

1. 原始多媒体资源跳转至二级域名站点，搜索引擎会将图文资源拆分收录，无法统一权重，不利于全站SEO优化；
2. 用户频繁切换域名容易产生割裂感，部分访客会误以为进入外部陌生网站，降低站点归属感。

3. 自建资源站稳定性、带宽无保障

ncg.linkpc.net:8000属于本地端口映射自建服务，存在多重不稳定因素：家庭宽带断网、公网IP变动、路由器重启、运营商封禁端口，一旦资源站离线，所有原图、备用WebP全部无法访问，页面会出现大面积资源缺失；对比商用静态托管，无高可用、异地容灾能力。

4. 缺少统一缓存、CDN加速机制

两套站点均无统一缓存策略，本地WebP每次访问重复请求；跨站跳转资源无缓存加速，大体积视频、原图加载速度受家庭宽带上行带宽限制，高峰期加载卡顿明显。

5. 资源同步依赖人工维护，易出现文件不一致

WebP图片依靠人工双向同步双站点，无自动化同步脚本/工具，长期维护中容易出现：主站新增WebP但资源站未更新、资源站素材删除后主站仍保留引用，出现图片404、双站文件版本不一致问题。

6. 无防盗链机制，带宽损耗不可控

资源站为开放HTTP服务，未配置Referer防盗链、访问鉴权，外部其他网站可直接引用你的多媒体资源盗链，持续消耗自建宽带上行流量，严重时导致资源站卡顿、运营商限流。

三、综合中立总结

该双站点架构非常适合个人轻量化文档知识库、低成本临时建站场景，用极低成本解决静态平台容量上限问题，页面基础浏览体验良好，运维分工简单清晰； 但该方案属于低成本自建折中方案，存在协议冲突、稳定性差、SEO劣势、缺乏自动化运维、防盗链缺失等硬伤，仅适合个人自用，不适合对外商用、高访问量、长期稳定运营的公开站点。

四、第三方优化建议（配套补充）

1. 统一全站HTTPS，给资源站配置SSL证书消除混合内容拦截；
2. 增加自动化同步脚本，实现WebP文件双向自动同步；
3. 资源站配置Referer防盗链，限制外部盗链；
4. 增加CDN代理转发资源文件，消除域名跳转，统一全站访问域名；
5. 增加资源离线兜底提示，资源站宕机时页面展示友好占位图，避免空白。