起因是QQ群一个调侃小团体的文案,我决定用Python弄个网页玩玩(没想到这个过程踩了无数坑——Serveo有警告页、localhost.run连接被拒、Cloudflare Workers域名被阻断、Netlify风控验证……最终,我找到了最适合国内访问的稳定方案:腾讯云CloudBase。本文完整记录整个探索过程,希望能帮助遇到类似需求的朋友少走弯路。)

一、需求与初步实现

需求很简单:一个网页,打开后显示一段固定的“优化通知”文案,并且可以通过QQ分享链接,让朋友直接访问。没啥特别的,本来也感觉不应该特别难。原文如下:

您的作用太低,小团体已经复盘完了,不得不非常遗憾地通知您:

我们这边做了同段位玩家的打法和实战对比,也做了历史数据溯源回顾,在确保没有其他的干扰因素的情况下,您的作用整体上可能不太适合我们小团体了

抱歉,我们这边就先把您优化了,希望您早日找到更加契合的环境,找到更符合您的小团体,获得更好的游戏体验。也祝游戏顺利,前程似锦!

您已被优化,请勿回复。

1.1 Python本地服务器

我写了一个简单的Python脚本,使用http.server模块搭建本地网站。

# notice_site.py
from http.server import BaseHTTPRequestHandler, HTTPServer
import html

NOTICE_TEXT = """您的作用太低,小团体已经复盘完了...(省略)"""

class NoticeHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-Type', 'text/html; charset=utf-8')
        self.end_headers()
        safe_text = html.escape(NOTICE_TEXT)
        html_page = f"""<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>优化通知</title></head>
<body style="max-width:800px;margin:40px auto;padding:20px;">
    <pre style="white-space:pre-wrap;">{safe_text}</pre>
</body>
</html>

本地可以正常跑起来,但是毕竟是为了分享,只这样还不够。运行python notice_site.py后,浏览器打开http://localhost:8000即可看到效果。但问题是,这个地址只能本机访问,无法发给QQ好友。

2.1 Serveo – 最简单但有警告页

Serveo是一个老牌的SSH隧道服务,无需注册。

ssh -R 80:localhost:8000 serveo.net

它会返回一个https://xxx.serveo.net的链接。然而,访问该链接时,会先跳出一个安全警告页面,需要手动点击“Continue”才能进入真正的网站。这个页面非常影响体验,而且Serveo免费版无法消除(升级Pro需$60/年←贵死了!T_T)。放弃。

2.2 localhost.run – 无警告但连接失败

换成localhost.run:

ssh -R 80:localhost:8000 localhost.run

结果报错:Connection closed by 54.82.85.249 port 22。加上-v参数后发现是公钥认证问题:

debug1: Authentications that can continue: publickey
camiro@localhost.run: Permission denied (publickey).

解决方案是使用nokey用户名并禁用公钥认证:

ssh -o PubkeyAuthentication=no -R 80:localhost:8000 nokey@localhost.run

终于成功了,得到了一个http://xxxx.localhost.run的链接,没有警告页!但是,这个链接在国内访问有时会超时或很慢(刚分享出去就立马停掉了😡),而且电脑关机后链接就失效了。不适合长期分享。

结论:内网穿透适合临时调试,但要想稳定、永久、国内访问快,必须走静态托管。

三、静态托管尝试:GitHub Pages / Cloudflare Pages / Vercel / Netlify

因为我的页面是纯静态的(就一个HTML文件),所以可以把文件直接托管到云平台,获得一个永久链接。

3.1 GitHub Pages

需要注册GitHub,创建仓库,上传index.html,开启Pages服务。分配域名用户名.github.io。国内访问速度时快时慢,部分地区甚至打不开。

3.2 Cloudflare Pages

官方推荐,分配*.pages.dev域名。我上传了index.html,获得sidaichatv.pages.dev。但访问时出现了ERR_CONNECTION_TIMED_OUT,手机流量也同样失败。后来了解到,workers.devpages.dev域名在国内部分地区会被阻断或解析异常。

3.3 Vercel / Netlify

Vercel分配*.vercel.app,Netlify分配*.netlify.app。我尝试Netlify时,刚注册完就遇到安全验证(Please complete the security check and try again.),需要提交身份证通过Stripe验证,过程繁琐。Vercel虽然拖拽部署方便,但国内访问速度也不理想。

结论:国际大厂的静态托管在国内网络环境下并不稳定,甚至无法访问。必须选择国内服务商

(毕竟在国内看不了还做什么整活网站)

四、购买域名与实名问题

为了拥有一个稳定、好记的链接,我购买了一个域名:sidaichatv.asia。但很快发现,未实名的域名无法使用——国内注册商(阿里云、腾讯云等)要求所有域名必须完成实名认证,否则处于Serverhold状态,禁止解析。

于是我提交了身份证,等待1-2天审核通过。在此期间,我无法用这个域名绑定任何服务。理论上这个方法得到的网页连接是很稳定的,可惜审核期间只能干瞪眼...建议可能用到网页的人常备几个网页可以随时操作吧。

五、最终成功方案:腾讯云 CloudBase(云开发)

在尝试了各种国际服务失败后,我将目光转向国内云厂商。腾讯云CloudBase(云开发)提供了一个静态网站托管功能,分配xxx.tcloudbaseapp.com二级域名,国内访问速度极快,且有免费额度。

5.1 操作步骤

  1. 注册/登录腾讯云 – 完成实名认证(必须)。

  2. 进入云开发控制台 – 搜索“云开发 CloudBase”或直接访问 console.cloud.tencent.com/tcb

  3. 创建环境 – 点击“新建环境”,选择“按量计费”(有免费额度,个人网站几乎用不完)。环境名称随意,如notice-env

  4. 进入静态网站托管 – 在环境概览页面,左侧菜单选择“静态网站托管”。

  5. 上传文件 – 点击“上传文件”,将你的index.html(注意必须命名为index.html)上传。

  6. 获取默认域名 – 上传成功后,系统会自动生成一个访问域名,格式为环境ID.tcloudbaseapp.com。例如:notice-env-123abc.tcloudbaseapp.com

  7. 访问测试 – 在浏览器中打开该链接,瞬间加载,完美显示通知内容。

5.2 绑定自定义域名(可选)

如果你已经拥有实名认证的域名,可以在静态网站托管设置中绑定自定义域名。需要添加CNAME记录到腾讯云分配的域名。

5.3 免费额度说明

  • 存储空间:1GB

  • 每月CDN流量:5GB(个人分享绰绰有余)

  • 超出后按量付费(流量0.21元/GB),可设置限额避免意外扣费。

做几个网页玩玩额度完全够用,也适合想要做功能性网页的人来测试自己的网页是否可行,不用头一热去买好几个域名。

六、最终效果

https://xxx.tcloudbaseapp.com这个链接直接发送到QQ群或发给好友,点击即可打开,没有任何警告页、不会超时、不会失效。经过“热心群友”测试,打开速度很快,完美实现了“优化通知”的仪式感。

教训

面向国内用户的静态网站,一定要选择国内云厂商的托管服务。

域名必须实名认证才能使用,提前完成。

内网穿透只适合临时调试,长期分享必须使用静态托管。

不要盲目迷信国际大厂,国内访问体验往往不如本土服务。

写在最后

经过整整几个小时(大概)折腾,从Python本地服务到内网穿透,再到各大静态托管平台,最终使用腾讯云CloudBase。虽然过程曲折,但结果令人满意。希望这篇文章能帮助想快速搭建一个国内可访问的静态网站的朋友少走弯路。

如果你也遇到类似问题,不妨直接试试腾讯云CloudBase。当然,阿里云OSS+CDN、又拍云等也是不错的选择。选择国内服务,拥抱稳定,或者提前准备好购买域名的账号以及实名认证。

附录:完整的index.html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优化通知 · 小团体复盘</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: #f0f2f5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            padding: 20px;
        }
        .card {
            max-width: 700px;
            background: white;
            border-radius: 28px;
            box-shadow: 0 20px 35px -10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .header {
            background: #1e2a3a;
            padding: 20px 28px;
            color: #f7d44a;
            font-size: 1.5rem;
            font-weight: 600;
        }
        .content {
            padding: 32px 32px 40px;
            white-space: pre-wrap;
            line-height: 1.7;
            font-size: 1rem;
            color: #2c3e4e;
            border-left: 5px solid #e67e22;
            margin: 24px;
            background: #fefaf5;
        }
        .footer {
            background: #f8f9fa;
            padding: 12px;
            text-align: center;
            font-size: 0.75rem;
            color: #6c757d;
            border-top: 1px solid #e9ecef;
        }
    </style>
</head>
<body>
<div class="card">
    <div class="header">⚙️ 小团体复盘结论</div>
    <div class="content">
您的作用太低,小团体已经复盘完了,不得不非常遗憾地通知您:

我们这边做了同段位玩家的打法和实战对比,也做了历史数据溯源回顾,在确保没有其他的干扰因素的情况下,您的作用整体上可能不太适合我们小团体了

抱歉,我们这边就先把您优化了,希望您早日找到更加契合的环境,找到更符合您的小团体,获得更好的游戏体验。也祝游戏顺利,前程似锦!

您已被优化,请勿回复。
    </div>
    <div class="footer">此通知为系统自动发送 · 最终决定</div>
</div>
</body>
</html>

保存为index.html进行操作即可。

欢迎在评论区分享你的内网穿透或静态托管踩坑经历,也欢迎指教。

更多推荐