公众号旧文
如何用没有公网 IP 的服务器，做一个网站？
本文讲的不是利用静态托管建站，而是真的使用自己的服务器和域名。
正文开始：
之前我一直以为，想做一个网站，至少需要：
- 一台有公网 IP 的服务器
- 域名解析
- 端口开放
但实际上，即使服务器没有公网 IP，也可以上线一个网站。
而且我今天用一晚上就已经把它做出来了。
一、事情的起点
事情还要从2年前说起。
2年前的某一天，我们学校的官网，突然就无法访问了。
一直到了1年前，才恢复，但是网站改了，之前的内容都没有了。
好在我有先见之明，提前保存了历届的毕业照。
这些照片一直躺在我的电脑里，直到最近。
我有了一个很简单的想法：做一个网站，把这些毕业照放上去。
二、问题出现了：服务器没有公网IP
我的服务器是 IPv6 only + IPv4 NAT，IPv4可出站，IPv6可入站。
简单理解就是：
我的服务器能访问别人，但是别人访问不了我。
也就是说，按常规方式部署，大部分人根本打不开我的网站。
三、关键转折：Cloudflare Tunnel
我没有去折腾端口映射，也没有换服务器。
而是用了一个更简单的方案：
Cloudflare Tunnel
它的逻辑很巧妙：
服务器主动连 Cloudflare
然后由 Cloudflare 提供公网入口
于是我不再需要公网 IP，网站直接可以通过域名访问。
甚至还支持 HTTPS！
https://grad.example.xyz一年5块钱的 .xyz 域名可以看这篇：
四、而且，我没有写后端
一个网站通常会有前后端，但是我的毕业照网站不需要。
我用的是 HTML + CSS + JavaScript + 图片
也就是纯静态网站。
虽然用Github pages和Cloudflare pages也能做，但我更希望自行保存那些照片。
五、数据怎么管理？
我也没有用数据库，而是只用了一个文件：
data.json
[
{
"year": "2009",
"image": "photos/2009/xxx.jpg"
}
]六、自动化是关键
我写了一个 Python 脚本，扫描 photos/ 目录，并自动生成 data.json
这样上传图片 = 更新网站，完全不需要手动改代码。
七、上传流程简单到离谱
整个流程只有四步：
- 建目录
- 上传图片（scp）
- 生成 data.json
- 刷新网页
例如：
scp *.jpg root@100.64.0.15:/var/www/grad-site/photos/2013/ && \
ssh root@100.64.0.15 "python3 /var/www/grad-site/tools/generate_data.py"八、网站结构的进化
一开始，我是这样设计的：
首页展示所有毕业班的全部图片，但很快就发现：
太乱，太慢，找不到重点
于是我改成：
首页只显示年份，点击年份后，查看该年份所有毕业班
也就是：
index.html → 年份列表
year.html?y=2009 → 2009届
这一步，让网站从图片堆变成了结构化内容。
九、体验升级
最后我给网站加了这些功能：
- 点击放大图片
- ← → 切换
- Esc 关闭
- 图片懒加载
十、性能优化
我还第一次使用了 Cloudflare CDN
/photos/ 下的所有图片，全部缓存到全球节点。
效果：
cf-cache-status: HIT这意味着，用户访问走 CDN，几乎不消耗服务器流量，打开速度非常快。
十一、最终效果
现在这个网站，没有公网 IP 也能访问，不需要配置端口映射。
支持多年份管理，支持上传图片后自动更新
自带 CDN 加速，并且图片浏览体验完整
后记：
在当下的时代，显然我们不需要完美的条件，才开始做一个网站。
如果你也有一堆照片、资料，你也完全可以做一个属于自己的网站。
大家可以在评论区猜猜这个网站域名+服务器的成本，一个月是多少？