h5链接怎么生成

上周帮朋友弄一个活动报名页，接生他问我：“你直接把链接发我就行。接生”我说这页面还没部署呢，接生哪来的接生链接。他愣了一下：“不是接生做好页面就有链接了吗？”这个误会挺常见——很多人以为H5页面做完就自带一个网址，其实那只是接生一堆躺在你电脑里的HTML文件。

要生成一个能分享出去的接生H5链接，本质上是接生把文件放到一台24小时开机的服务器上，再绑一个域名。接生下面按实际操作顺序说。接生

先得有东西可传

假设你已经写好了index.html，接生可能还有CSS、接生JS和几张图片。接生放在一个文件夹里，接生本地双击能正常打开。接生注意路径别用绝对路径比如C:\Users\...，服务器上不认。用相对路径./style.css这种。

如果页面用了Vue或React脚手架打包，那dist文件夹就是你要传的东西。别把node_modules传上去，那玩意儿几千个文件，纯属给自己找麻烦。

找个地方放

最省事的是静态托管服务。Vercel、Netlify、GitHub Pages，注册完把文件夹拖进去，几十秒后它就给你一个类似https://xxx.vercel.app的链接。这个链接已经能用了，发给别人就能打开。

我去年给一个奶茶店做集点卡页面，用的就是Vercel。从拖拽到拿到链接不到两分钟。缺点是域名带平台后缀，看着不够正式。想用自己域名就得往下走。

域名和服务器

去阿里云或腾讯云买台最便宜的轻量服务器，一年几十块。再买个域名，.com大概六七十一年，.cn更便宜。买完域名要做实名认证，然后解析到服务器IP。

服务器上装个Nginx，把文件扔进/var/www/html。Nginx配置里server_name填你的域名。重启Nginx，浏览器输入域名就能看到页面。这时候链接就是https://你的域名.com。

有个坑：国内服务器绑域名必须备案，不然80和443端口会被拦。备案流程大概7到20天，要拍幕布照片、填一堆表。急着上线就选香港或新加坡节点，不用备案，但访问速度慢一点。

HTTPS不是可选项

现在微信里打开http链接会弹安全提示，用户直接吓跑。用Let's Encrypt的certbot，一行命令自动配好SSL证书，免费。Nginx里加个301跳转，把http全转到https。这步不做，链接发出去效果打对折。

短链接和参数

原始链接太长，比如https://example.com/activity/2024/summer/index.html?user=123。用短链服务压成https://s.example.com/x7Kp2。自己搭的话用YOURLS，或者直接用微博短链、缩我这类第三方。

参数别乱加。?后面的user=123这种，前端用URLSearchParams读出来就行。但别把敏感信息放参数里，比如手机号，别人改一下就能看别人数据。

测试再发

生成链接后，用手机4G网络打开一次，别只连WiFi测。微信内打开一次，看有没有被屏蔽。iOS和安卓各试一台。我见过页面在Chrome正常，在微信里白屏——因为用了微信不支持的JS语法。

最后，链接别直接扔群里。先发给自己文件传输助手，点开确认没问题再往外发。不然几百人点开看到404，场面很难收场。

整个流程走一遍，快的话半小时，慢的话备案那步卡住。技术本身不复杂，麻烦的是琐碎环节。找个周末下午，边喝咖啡边弄，比赶deadline时手忙脚乱强。