静态网站托管的N种方式

本篇为静态网站托管的多种方法。截止至2025年7月9日可行的托管方式有：Github Pages、阿里云对象储存OSS、Vercel。

Github Pages

Github Pages的全流程搭建方式在本站已经写过，详情查看：Github-Page博客搭建

阿里云对象储存OSS+CDN

本方法的前提是在阿里云购买了且备案了自己的域名。（如果在其他地方购买了域名并在阿里云部署OSS可参考）

以 阿里云OSS 为例，其他云厂商（腾讯云COS, AWS S3+CloudFront等）逻辑类似，界面略有不同

基本流程

创建Bucket → 开启静态托管 → 上传文件 → 绑定域名+HTTPS → 获取Endpoint → 解析域名

步骤1：创建与配置Bucket

创建Bucket & 开启静态托管 & 上传文件：这是基础准备工作，创建存储空间，启用其作为网站的功能，并上传内容。

【注：】阿里云要求：所有绑定至中国内地 Bucket 的域名（包括二级域名）必须完成工信部 ICP 备案。例外情况：若 Bucket 位于 海外地域（如中国香港），则绑定域名无需备案。

域名备案（内地 Bucket 必选）

阿里云OSS控制台 (https://oss.console.aliyun.com/)

海外Bucket举例：

1. 登录OSS控制台。
2. 点击“Bucket列表”，创建 Bucket，选择地域为 “中国香港” 或其他海外节点
3. 填写配置（华东举例）：
   • Bucket名称： 全局唯一，如 my-static-website 。
   • 地域： 选择离您目标用户近的区域，如 华东1（杭州） 。
   • 存储类型： 选标准存储。
   • 读写权限： 务必选 公共读 。
   • 其他选项： 如版本控制、日志等，按需开启，新手可默认。

Bucket名称最好与你的二级域名一致或相关（例如 blog-yourdomain-com）。注意： Bucket名称全局唯一。

选择与你的用户靠近的地域。

读写权限设置为公共读 (这是托管静态网站必须的)。

步骤2：开启静态托管

数据管理 → 静态页面 → 设置：
- 状态：开通
- 默认首页：index.html
- 默认404页：404.html (可选)

阿里云OSS控制台 -> 进入您刚创建的Bucket (my-static-website) -> 左侧菜单

1. 在Bucket管理页面，点击左侧菜单 “数据管理”。
2. 找到 “静态页面”选项。
3. 点击或 “设置”。
4. 选择 “静态网站” 模式 (通常有“关闭”、“默认首页”、“重定向”等选项，选 “默认首页” )。
5. 设置：
   • 默认首页： 输入 index.html (用户访问根目录时自动加载的文件)。
   • 默认404页(可选)： 输入 error.html 或 404.html (访问不存在的路径时显示的文件)。
6. 点击“保存”。

步骤3：上传文件

将你的静态网站文件（index.html, 样式表、脚本、图片等）上传到这个Bucket中。

文件管理 → 文件列表 → 上传文件

1. 点击左侧菜单 “文件管理”中的“文件列表”。
2. 点击 “上传文件”。
3. 将您本地开发好的网站文件（index.html, about.html, css/style.css, js/main.js, images/logo.png 等）拖拽到上传区域，或点击选择文件。
4. 确保文件结构正确（例如，index.html 在根目录）。
5. 点击 “上传”。

网站文件（菜品）已放入仓库（Bucket）。此时可通过OSS提供的临时Endpoint访问网站（能看到 index.html 内容），但速度慢且地址不友好。

步骤4：绑定域名+HTTPS

Bucket 配置 → 域名管理 → 绑定域名：
- 域名：`blog.yourdomain.com`
- 勾选 `自动添加CNAME记录`（域名在阿里云时）
- 勾选 `开启HTTPS` + `强制跳转HTTPS`（系统自动申请证书）

阿里云OSS控制台 -> 进入您的Bucket (my-static-website) -> 左侧菜单 “Bucket 配置” -> “域名管理”

1. 点击 “绑定域名”。
2. 输入域名： 在“域名”框中填写您已购买并准备用于网站的自定义域名，例如 www.yourdomain.com (不能带 http:// 或 /)。
3. 开启HTTPS (强烈推荐)：
   • 勾选 “自动开启HTTPS安全加速” 或类似选项。
   • 阿里云会自动为您申请并部署免费的 DigiCert DV 单域名证书 (或 Let’s Encrypt)。过程完全托管，无需手动操作证书。
4. 点击“下一步”或“确认” (这里触发关键验证！)
5. 域名所有权验证 (最重要的一步！)：
   • 阿里云会弹出一个窗口，要求您添加一条CNAME记录到您的域名DNS解析中！
   • 记录类型： CNAME
   • 主机记录： 系统自动生成的值，通常形如 _dnsauth.www (如果绑定 www.yourdomain.com) 或 _dnsauth (如果绑定根域名 yourdomain.com)。
   • 记录值： 系统自动生成的值，形如 oss-cn-hangzhou.aliyuncs.com.xxxxx.aliyuncs.com。
6. 立即操作DNS：
   • 打开一个新的浏览器标签页，登录您的域名注册商控制台 (如阿里云域名控制台、腾讯云DNSPod、Cloudflare等)。
   • 找到域名 yourdomain.com 的 DNS解析设置。
   • 添加一条 CNAME记录：
     • 主机记录： 粘贴阿里云要求的主机记录 (如 _dnsauth.www)。
     • 记录值： 粘贴阿里云提供的记录值。
     • TTL： 一般选默认或10分钟。
   • 保存这条DNS记录。
7. 回到阿里云OSS窗口：
   • 确认已添加好验证记录，点击 “验证” 或 “我已添加”。
   • **等待验证通过 (需要几分钟，DNS刷新)**。阿里云会不断检查DNS，直到找到您添加的正确验证记录。
   • (如果开启HTTPS) 证书申请自动进行： 验证通过后，阿里云会自动为 www.yourdomain.com 申请并部署SSL证书，此过程可能需要额外几分钟 (2-15分钟)。
8. 绑定成功：
   • 当验证通过且HTTPS证书部署完成（如果开启），阿里云会提示 “域名绑定成功”。
   • 此时，在“域名管理”列表里，您能看到状态为 “正常” 的域名 www.yourdomain.com，并且HTTPS状态为 “已开启”。
   • 最关键信息出现： 在这个域名旁边或详情里，您会看到阿里云为您的CDN加速生成的 CNAME地址/Endpoint！它的格式通常是：www.yourdomain.com.<随机字符>.aliyuncs.com 或 my-static-website.<随机字符>.oss-accelerate.aliyuncs.com。

步骤5：获取Endpoint

获取OSS Bucket的访问端点，即获取OSS Bucket的CNAME目标地址。

上一步（绑定域名+HTTPS成功）后自动获得。

1. 在阿里云OSS控制台 -> Bucket (my-static-website) -> “Bucket 配置” -> “域名管理”。
2. 找到状态为“正常”的已绑定域名 www.yourdomain.com。
3. 在对应的“CNAME”或“加速域名”列下，找到那个长字符串地址。它就是 Endpoint / CNAME目标地址。
4. 复制 这个完整的Endpoint地址。例如：www.yourdomain.com.w.kunlunca.com 或 my-static-website.oss-accelerate.aliyuncs.com (具体格式阿里云可能会变，认准它是CNAME值)。

• 结果： 拿到将域名流量指向阿里云CDN网络的 **关键地址 (Endpoint)**。

各区域Endpoint示例：

地域	Endpoint（地域节点）	Bucket 域名
华北1（青岛）	oss-cn-qingdao.aliyuncs.com	myblog.oss-cn-qingdao.aliyuncs.com
华东1（杭州）	oss-cn-hangzhou.aliyuncs.com	static.oss-cn-hangzhou.aliyuncs.com
华南1（深圳）	oss-cn-shenzhen.aliyuncs.com	images.oss-cn-shenzhen.aliyuncs.com
香港	oss-cn-hongkong.aliyuncs.com	cdn.oss-cn-hongkong.aliyuncs.com

重要注意事项：

1. 必须复制完整域名

   + 正确：oss-cn-beijing.aliyuncs.com
   - 错误：your-bucket （不完整）

2. 地域匹配验证

   • 在概览页的 “基本信息” 中确认Bucket所在地域
   • 确保Endpoint中的地域代码（如 cn-beijing）与实际地域一致

步骤6：解析域名

阿里云解析设置 (CNAME)

进入域名控制台，域名注册商控制台 (和之前添加验证记录是同一个地方)

• 详细步骤：

  1. 登录您的域名注册商/DNS托管商控制台 (如阿里云域名控制台、DNSPod、Cloudflare)。
  2. 进入域名 yourdomain.com 的 DNS解析设置/域名解析 页面。
  3. 添加最终的CNAME记录 ：

  在弹出的表单中填写以下关键信息：

  记录类型：最常用的是：

  • A 记录：将域名指向一个 IPv4 地址（例如服务器的IP）。这是最常用的，用于网站、服务器。

  • CNAME 记录：将域名指向另一个域名（例如，指向阿里云OSS的Bucket域名、CDN的加速域名、或腾讯云的服务器域名等）。当目标地址是域名而不是IP时使用。

  • AAAA 记录：将域名指向一个 IPv6 地址。

  • MX 记录：用于邮箱服务器解析（如果你要为 mail.yourdomain.com 设置邮件服务）。

  • 主机记录：这里填写的就是你要创建的二级域名的前缀部分！

    • 例如：要创建 blog.yourdomain.com，就填写 blog。
    • 要创建 shop.yourdomain.com，就填写 shop。
    • 要创建 www.yourdomain.com，就填写 www。
    • 特殊值：
      • @：表示直接解析主域名 yourdomain.com（本身不是二级域名，但记录类型也在这里设置）。
      • *：表示泛解析，匹配所有未单独设置的二级域名（例如 anything.yourdomain.com 都会指向这里设置的目标）。谨慎使用。

    解析线路：一般选择 “默认”。如果需要根据访问者的网络运营商（如电信、联通）或地理位置（如境外）提供不同解析结果，可以选择相应线路。免费版也提供基础线路（默认、搜索引擎、境外）。

    记录值：

    • 如果记录类型是 A，这里填写你的服务器或服务的 IPv4 地址 (例如 123.123.123.123)。
    • 如果记录类型是 CNAME，这里填写目标域名 (例如 your-bucket.oss-cn-hangzhou.aliyuncs.com 或 cdn.example.net)。注意： 目标域名后面通常需要加一个点 .，但阿里云控制台一般会自动处理或提示，按界面要求填写即可（有时不加点也可以）。
    • 如果记录类型是 AAAA，填写 IPv6 地址。
    • 如果记录类型是 MX，填写邮件服务器域名，并设置优先级。

    TTL（生存时间）：表示DNS记录在本地缓存中保留的时间。一般选择 “10分钟”（默认）即可。数值越小，更新生效越快，但对权威DNS查询压力略大；数值越大，生效越慢，但能减少查询次数。非特殊需求保持默认。

  填写完成后，点击 “确认” 按钮。

等待生效 & 测试

DNS生效： 保存最终CNAME记录后，需要等待DNS全球刷新（根据您设置的TTL，通常几分钟到几小时）。可以使用 dig www.yourdomain.com 或 nslookup www.yourdomain.com 命令查看解析结果是否变成了您的Endpoint地址。

访问测试：

• 在浏览器中输入您的自定义域名 https://www.yourdomain.com (注意是 https!)。
• 首次访问可能稍慢（CDN节点需要回源到OSS Bucket拉取文件并缓存）。
• 刷新几次后，速度应显著提升（文件已缓存在CDN边缘节点）。
• 检查浏览器地址栏是否有绿色的锁图标（HTTPS生效）。

使用以下方法检测DNS是否生效：

# Windows 命令提示符
nslookup 您的二级域名
# 示例：nslookup blog.yourdomain.com

# Linux/Mac终端
dig 您的二级域名 CNAME
# 示例：dig blog.yourdomain.com CNAME

✅ 正确响应应显示您的OSS Endpoint地址

备案与配置常见问题汇总

• Q：为什么已备案主域名下的子域名仍绑定失败？
  A：请检查主域名备案是否接入阿里云。若备案在其他服务商，需在阿里云做 「接入备案」10。
• Q：开启静态页面后访问域名仍下载文件？
  A：检查文件 Content-Type 是否为 text/html（可在 OSS 文件详情中修改）8。
• Q：HTTPS 访问提示不安全？
  A：在域名绑定页面开启 「强制 HTTPS」 并上传 SSL 证书（阿里云可申请免费证书）

Q：为什么一定要使用OSS+CDN？

CDN（内容分发网络） 是一种分布式网络架构，由分布在不同地理位置的边缘节点服务器组成，旨在通过缓存内容并将其分发到离用户最近的节点，提升内容传输速度、减少延迟并优化用户体验。CDN广泛应用于网站加速、视频流媒体、文件下载等场景。

CDN的工作原理

CDN通过将源站的内容缓存到各地的边缘节点，当用户发起请求时，系统会根据用户的地理位置、网络运营商等因素，将请求引导到最近的缓存节点。如果缓存节点已有所需内容，则直接返回；否则会从源站获取内容并缓存到节点，供后续用户访问。

以下是CDN的主要流程：

用户请求内容时，DNS解析会将请求指向最优的CDN节点。如果节点已有缓存内容，直接返回给用户。若无缓存内容，节点会向源站请求并缓存，随后返回给用户。

使用CDN的优势

提升访问速度：通过就近访问缓存节点，减少物理距离和网络延迟，显著提升页面加载速度。降低带宽成本：缓存技术减少源站的直接请求次数，从而降低带宽消耗。提高可用性：分布式架构能有效应对高流量和硬件故障，确保服务稳定。增强安全性：通过DDoS防护、TLS/SSL加密等技术，提升网站的安全性。减轻源站压力：分担源站负载，避免因流量激增导致的宕机。

CDN的典型应用场景

网站加速：静态资源（如图片、CSS、JS文件）通过CDN分发，提升加载速度。视频点播与直播：支持大文件下载、视频流媒体分发，优化用户观看体验。移动应用加速：加速APP更新包、短视频等内容的分发，提升用户访问效率。跨地域访问优化：解决不同运营商或地域间的网络互通问题，确保全球用户流畅访问。

重要术语

边缘节点：距离用户最近的缓存服务器，用于快速响应用户请求。回源率：缓存未命中时向源站请求的比例，回源率越低，CDN效率越高。命中率：用户请求直接命中缓存的比例，命中率越高，用户体验越好。

结论一：OSS 本身可以独立运行，不强制依赖 CDN

• OSS 本身是对象存储服务：它核心功能是安全、可靠、低成本地存储海量文件（图片、视频、静态网页文件等）。
• OSS 自带访问端点（Endpoint）：每个 Bucket 都有一个形如 your-bucket.oss-cn-hangzhou.aliyuncs.com 的 URL。您可以直接通过这个 URL 访问 Bucket 里的文件。
• OSS 支持静态网站托管：开启此功能后，OSS 可以自动处理 index.html, error.html 等，让 Bucket 像一个基础 Web 服务器一样工作。
• 技术上可行：如果您：
  • 对访问速度要求不高（用户能忍受几秒加载时间）。
  • 用户主要集中在一个区域（如仅国内华东用户）。
  • 流量很小（没有突发高并发）。
  • 不太在意 HTTPS 证书管理（OSS 静态托管本身不支持自定义域名 HTTPS，需搭配 CDN 或云函数等实现）。
  • 能接受 OSS 外网流出流量费用（可能比 CDN 回源流量贵）。
    那么，仅使用 OSS 部署静态网站是完全可以工作的！不需要 CDN。

结论二：但在绝大多数生产环境场景中，强烈推荐 OSS + CDN 组合！ CDN 为 OSS 带来的核心价值远超“提速”

CDN 绝不仅仅是“锦上添花”的加速器，它解决了 OSS 直接暴露给公网访问的多个关键痛点：

痛点	仅用 OSS 的问题	OSS + CDN 的解决方案
1. 访问速度慢 (全球/跨区域用户)	用户直接连接 OSS 数据中心（如杭州）。美国用户访问延迟可能高达 200-300ms+，体验极差。	CDN 边缘节点就近响应：美国用户访问美国边缘节点 (可能 < 20ms)，节点缓存命中则瞬间返回。核心价值！
2. 高并发/突发流量扛不住	OSS 虽然高可靠，但公网带宽和连接数有限。突发流量（如被分享）易导致响应变慢或超时。	CDN 海量边缘节点分散压力：请求被分散到全球数千节点，单点压力小。节点缓存扛住绝大部分请求，**保护源站 (OSS)**。
3. 成本可能更高	OSS 的外网流出流量费相对较高。用户下载越多，费用越高。	CDN 回源流量费更低：CDN 从 OSS 取数据（回源）享受更低单价。用户从 CDN 下载，CDN 流出流量费通常低于 OSS 外网流出费。大流量下显著省钱！
4. 无法自定义域名 HTTPS	OSS 静态托管原生不支持绑定自定义域名且开启 HTTPS (需额外配置，依赖其他服务)。	CDN 天然支持：一键绑定自定义域名，自动申请/部署/续费 Let’s Encrypt 证书，强制 HTTPS，提升安全与 SEO。
5. 安全风险增加	直接暴露 OSS Endpoint：

* 易被扫描、攻击。
* 源站 IP 可能被 DDoS。
* 热链接盗刷流量。 | **CDN 作为安全屏障**：
* 隐藏真实 OSS Endpoint。
* 边缘节点提供 DDoS 基础防护、WAF (需配置)。
* 支持 Referer 防盗链、URL 鉴权等，**在边缘拦截非法请求**，保护 OSS 和节省流量。 |

| 6. 功能局限 | OSS 主要功能是存储，Web 高级功能弱（如缓存策略、压缩、HTTP/2, Brotli）。 | CDN 提供丰富优化功能：灵活缓存规则、Gzip/Brotli 压缩、HTTP/2/HTTP3、页面优化、QUIC 协议等，进一步提升性能与体验。 |

总结：什么时候可以不用 CDN？什么时候强烈建议用？

• 可以不用 CDN (仅 OSS)：
  • 内部系统/工具： 仅限公司内网或特定区域访问的后台、工具页面。
  • 极低流量测试/演示环境： 访问量忽略不计，速度要求不高。
  • 纯粹的数据备份/归档： 文件不需要被频繁公网访问。
• 强烈建议搭配 CDN：
  • 面向公网用户的网站/应用： 博客、官网、H5、小程序后端、产品文档等。速度、稳定性、安全、成本、HTTPS 都至关重要！
  • 包含大量静态资源 (图片/JS/CSS/视频)： 这类文件最适合缓存，CDN 加速效果立竿见影，省流量明显。
  • 用户分布广泛 (全球/全国)： 必须靠 CDN 边缘节点解决物理延迟问题。
  • 预期有流量波动或增长： CDN 能轻松应对突发流量，避免 OSS 被打垮。
  • 重视安全与盗链防护： CDN 提供第一道防线和防盗链能力。

Vercel