利用阿里云 OSS 打造免备案企业官网

前言

最近接了一个“小私活”：给一位做实业的老板做一个极其简单的企业展示页。需求很典型：

要快： 手机点开瞬间就能看。
要省： 不想买云服务器，不想交年费。
要稳： 别动不动就因为家里断电或 DDNS 抽风打不开。
要逼格： 必须有独立域名，必须带“小绿锁”HTTPS。

在反复权衡了 DDNS+内网穿透 和 云服务器部署 后，我选择了最“优雅”的方案：阿里云 OSS 香港节点静态托管。今天就把这套“点烟级”的造火箭流程记录下来。

一、核心架构：为什么选择 OSS + 香港节点？

避开备案： 选“中国香港”节点，直接绕过 ICP 备案，域名秒解析，即刻上线。
隐藏端口： OSS 绑定自定义域名后，默认监听 80/443 端口，彻底告别 :8888 这种难看的尾巴。
极致省钱： 静态网页那点流量和存储，一个月可能也就几毛钱，充 10 块钱能用到公司倒闭。
高可用： 阿里背书，不宕机，不维护，真正的“写完即焚”。

二、避坑实录：那些让你怀疑人生的“小妖精”

在折腾过程中，我遇到了三个最经典的坑，在这里划重点：

1. 默认域名变“下载”

现象： 上传完 index.html，点击阿里云给的长链接，浏览器直接弹下载，不显示网页。 真相： 阿里云的安全策略。OSS 默认域名禁止直接预览 HTML。 解药： 必须绑定自定义域名，用你自己的域名访问就正常了。

2. SSL 证书的“捉迷藏”

现象： 证书列表全是好几千块一年的企业证书，找不到免费版。 真相： 免费版被藏在了“个人测试证书”里。 解药： 购买时选择“个人测试证书（免费）”，每个账号每年有 20 个 0 元额度。

3. 图片“碎裂”与 404

现象： 网页文字出来了，但图片全是红叉。 真相： * 大小写敏感： Linux 环境（OSS）下，pic1.jpg 和 pic1.JPG 是两个东西！

权限覆盖： Bucket 设为公共读了，但单独上传的文件有时需要再次确认权限。

三、动手实操：五分钟部署流程

1. 库房搭建（OSS 设置）

创建 Bucket，地域选 中国（香港）。
读写权限设为 公共读。
在“静态页面”菜单里，把 默认首页 设为 index.html。

2. 脸面设计（前端代码）

为了让老板满意，我设计了一套“轻奢风”模板。核心思路是：

CSS Grid： 适配手机端的海报墙布局。
Fade-in 动画： 元素交替浮现，增加高级感。
一键拨号： <a href="tel:..."> 手机点一下直接呼叫老板。

html
<style>
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .fade-in { animation: fadeInUp 1s ease forwards; }
</style>

3. 灵魂注入（域名与 HTTPS）

在 OSS 域名管理 开启“自动添加 CNAME 解析”。
申请免费证书后，直接在控制台点击 “一键部署至 OSS”。
必做： 开启“强制 HTTPS”，让所有访问都带上安全锁。

四、总结与心得

这次折腾让我意识到，很多时候我们习惯了在 HomeLab 里搞各种复杂的 Nginx 反代、FRP 穿透，但对于这种纯展示的生产环境，“简单”才是最高级的优雅。

OSS 静态托管不仅是存文件的地方，它更像是一个免维护的超级 Web 服务器。对于小微企业、个人名片、甚至是你的静态博客（如 Hexo/Hugo），这套方案几乎是目前的“版本答案”。

费用总结：

域名： 几十块/年
存储： 几分钱/月
流量： 几毛钱/GB
心情： 看到绿锁和老板转账时的愉悦，无价。

zym588's Blog 记录每一次折腾，让技术更有温度。

目录

前言

一、 核心架构：为什么选择 OSS + 香港节点？

二、 避坑实录：那些让你怀疑人生的“小妖精”