网站是怎么上线的硬币 · 2026.11

网站是怎么上线的

从“服务器是什么”讲到“让 AI 帮你部署”。一共七步，一步比一步深，看到哪一步够用就可以停。

STEP 00

先有个画面：网站上线到底是在干什么

一句话：把网站的文件放到一台一直开着、连着网的电脑上，再给它一个好记的地址。

网站本身就是一堆文件：网页（HTML）、样式、图片、脚本。在你自己电脑上双击能打开，但别人打不开，因为文件在你的电脑里。“上线”就是把这堆文件放到一个别人也能访问到的地方。

拿开一家店来类比：

网站里的概念开店类比一句话解释
网站文件货品和装修用户最后看到的东西
服务器店面放文件、接待访客的那台电脑
IP 地址经纬度坐标服务器在网上的真实位置，一串数字，难记
域名店名招牌好记的名字，比如 example.com
DNS地图 App把店名翻译成坐标，告诉浏览器去哪
HTTPS店门口的保安保证路上传的内容不被偷看、不被篡改
③ 文件传回浏览器，页面显示出来
每次打开网页，背后都是这三步，通常不到一秒

后面几步，其实都在回答同一个问题：“店面”从哪来、谁来管。

STEP 01

服务器：一台不关机的电脑

服务器不是什么神秘设备，本质就是一台电脑。它和你的笔记本只差在几件事上：

理论上你的电脑也能当服务器，但合盖就断、地址不固定、人一多就扛不住。所以几乎没人自己架，都是去租。下面两步讲的是两种不同的“租法”。

STEP 02

云服务器：租一台机房里的电脑

云厂商把机房里的大机器切成很多台“虚拟电脑”，按月或按年租给你。这就是云服务器。

常见的有：国内的阿里云 ECS、腾讯云 CVM 和轻量应用服务器（轻量版更便宜、配置简单，适合个人）；海外有 AWS 的 EC2 等，阿里云、腾讯云也都有香港和海外机房可选。

租到手的是什么

一个公网 IP、一台装好系统（通常是 Linux）的空电脑，和一个登录密码。剩下的全要自己来：

  1. 远程登录进去（命令行，没有桌面）
  2. 装一个专门“对外发网页”的软件，常用的叫 nginx
  3. 把网站文件传上去
  4. 申请并配置 HTTPS 证书
  5. 之后定期更新系统、盯着别被攻击、服务挂了自己重启
类比：租了一套毛坯房

想怎么装修都行，什么软件都能装、什么程序都能一直跑；但装修、水电、物业也全归你。

它最适合：需要一直运行的程序（比如 App 的后台、聊天机器人）、自己的数据库、定时任务，或者需要特殊软件环境的项目。

要注意：一直按月计费，不用也在扣钱；如果选的是中国内地机房，又要用自己的域名对外提供网站，必须先做 ICP 备案（第 04 步细说）。

STEP 03

托管平台：只交文件，机器不用管

如果你只是想让一个网页能被别人打开，其实不需要一整台电脑。托管平台让你只交文件，服务器的事它全包了。

常见的有 Cloudflare Pages、Vercel、Netlify、GitHub Pages；国内也有类似产品，比如腾讯云的 EdgeOne Pages。

你只用做一件事

把网站文件夹交上去：敲一条命令，或者连上 GitHub 仓库让它自动拉。平台会自动：

想收表单、存数据怎么办：云函数

纯展示的页面交文件就够了。如果页面要“做点事”，比如把用户填的内容存起来，就写一小段代码交给平台，叫云函数（Cloudflare 叫 Functions / Workers，Vercel 叫 Functions）。有人请求时它才运行，跑完就停，不用一台机器一直开着。

常听到的 Serverless（无服务器）说的就是这个：不是真的没有服务器，而是服务器你看不见、也不用管。

类比：拎包入住酒店

不用装修、不用管物业，入住就能用；但不能拆墙，也不能在房间里开工厂。

限制：不适合一直运行的程序，云函数每次能用的计算时间也有限；数据要存到别处，比如平台自带的存储，或者飞书多维表格这种外部工具。

一个常见的误会

很多人会说“国内用阿里云、腾讯云，海外用 Cloudflare、Vercel”，好像它们是同一类东西，只是分国内国外。其实这里混了两件不同的事：

  • 你要管多少：租一整台机器自己管（云服务器），还是只交文件（托管平台）
  • 服务器在哪：中国内地，还是香港和海外

阿里云、腾讯云既卖云服务器，也有托管类产品；Cloudflare、Vercel 主要做托管平台。按这两件事分开看，就是下面这张图。

先选“管多少”，再选“在哪”。小型 H5 和展示页，绝大多数落在右下角
STEP 04

地址：域名、HTTPS 和备案

域名

托管平台送的子域名（xxx.pages.dev）可以直接用。想要自己的名字就去买一个域名，阿里云、腾讯云、Cloudflare 都能买，然后在 DNS 里把它“指向”你的服务器或托管平台。平台后台一般都有引导，照着填就行。

HTTPS

浏览器地址栏的小锁。托管平台自动配好；云服务器要自己申请证书，有免费的（比如 Let's Encrypt）。现在没有 HTTPS 的网站，浏览器会标“不安全”。

备案：国内特有的一步

规则只看一件事：你的域名指向的服务器在不在中国内地。

备案要实名、填资料、接审核员的核实电话、等管局审核，不是当天能办完的。如果只是做一个活动页，用海外托管平台加平台送的子域名，可以完全绕开这一步，代价是国内访问的速度和稳定性没法保证。

STEP 05

怎么选：按你要做的事对号入座

你要做的推荐理由
活动页、作品集、展示页托管平台免费、几分钟上线、不用维护
H5 要收集信息
（报名、测评结果、留言）		托管平台 + 云函数 + 飞书多维表格仍然免费；数据进团队熟悉的表格，还能推送到群
App 后台、数据库、定时任务、一直运行的程序云服务器必须有一台一直开着的机器
主要给国内用户、要稳定、要用自己的域名国内云 + 备案合规，国内访问快
商用要看条款

Vercel 的免费版（Hobby）官方写明只允许个人、非商业用途（原文：“the Hobby plan restricts users to non-commercial, personal use only”）。公司项目要么用付费版，要么换平台。其他平台的免费版也各有条款，商用前看一眼官方说明。

免费额度举例（2026 年 11 月按官方文档核对，以后可能变）：

一个内部活动 H5，一天几千人访问，这些额度都绰绰有余。

STEP 06

实战：一个真实 H5 是怎么上线的

以我们做的成长树洞 H5 为例：学生写一封信，信存进飞书多维表格，同时推送到群里。它落在上面那张图的右下角，花费 0 元。

页面负责展示，云函数负责带着密钥去干活，飞书负责存数据和通知

上线经过了这几步

  1. 写页面和云函数：一个 index.html，加一个写飞书表格的小函数。代码基本是 AI 写的。
  2. 本地预览：先在自己电脑上打开，看顺不顺手。
  3. 发预览版：上传到一个单独的预览网址，正式链接完全不受影响，可以发给别人试。
  4. 正式上线：同一条命令换成正式分支，几十秒后正式链接就是新版本。
  5. 自己验收：用手机打开，提交一封测试信，去飞书表里确认收到了。
  6. 出问题就回滚：Cloudflare 后台保留每一次上线的版本，点一下就能退回去。

真正敲的命令只有这几条

# 1. 装 Cloudflare 的命令行工具（电脑上要先装好 Node.js）
npm install -g wrangler

# 2. 登录：会弹出浏览器，用你的 Cloudflare 账号授权
wrangler login

# 3. 发预览版：会得到一个 preview.项目名.pages.dev 的网址
wrangler pages deploy ./public --project-name 项目名 --branch preview

# 4. 正式上线
wrangler pages deploy ./public --project-name 项目名 --branch main
最重要的一条：密钥不能写在页面里

飞书应用的 App Secret 这类密钥，相当于能操作你表格的钥匙。页面代码任何访客都能查看，写进去就等于公开了。正确做法是放进 Cloudflare 项目设置里的环境变量，只让云函数读取。也不要把它贴到聊天里，包括发给 AI。

另外两个坑：上传要从一个只放网站文件的干净文件夹发，不然备份、草稿也会一起传上去，别人可能访问到；交给别人用之前，至少完整走一遍“填写 → 提交 → 表里出现”。

STEP 07

结合 AI：你当产品经理，AI 当工程师

上面这些，现在基本不用自己学会每一条命令。像 Claude Code、Codex 这类能直接操作你电脑的 AI 编程助手，可以帮你写代码、敲命令、看报错、修问题。你要做的是：说清楚要什么、在关键节点把关。

交给 AI

写页面和云函数 · 写部署命令并执行 · 看报错并修复 · 解释每一步在干什么 · 查官方文档

必须你来

注册账号 · 浏览器里点授权登录 · 付费 · 备案实名 · 决定什么时候上线 · 最后亲手验收

可以直接用的开场提示词

我想做一个 H5 页面：【一句话说清楚它是干什么的，给谁用】。
用户会填写【要收集的信息】，提交后存进飞书多维表格，并推送一条消息到飞书群。

请按这个顺序带我做，每一步做完都告诉我“怎么确认这一步成功了”：
1. 先说明你打算怎么搭（用什么平台、为什么），等我确认再动手
2. 写好页面，让我在本地预览
3. 部署到 Cloudflare Pages 的预览网址
4. 我确认没问题后，再上正式网址

要求：
- 密钥只放在平台的环境变量里，不要写进页面代码，也不要让我把密钥贴给你
- 需要我登录、授权、付费的地方，停下来告诉我具体点哪里
- 遇到报错先解释原因，再修

已经有本地网页，只想让别人用

最常见的情况：网页已经在自己电脑上做好了，想发个链接给大家。在网页所在的文件夹打开 Codex（或 Claude Code），把下面这段整段发给它。你只负责四件事：登录自己的 Cloudflare 账号、自己填密钥、确认上传的文件里没有不该公开的、试过预览版再说上线。

我在这个文件夹里做了一个本地网页，想放到网上，让别人点链接就能用。请帮我部署到 Cloudflare Pages（免费）。我不懂技术，全程请用大白话告诉我你在做什么。按下面的顺序来：

1. 先检查，不要动手
   - 这个网页是纯页面（HTML、CSS、JS、图片），还是要靠后台程序（Node、Python、数据库）才能跑？
   - 代码里有没有写着密钥、token、密码、API Key（比如调用 AI 接口、飞书、数据库的那种）？
   把结论和你打算怎么部署告诉我，等我说「可以」再继续。

2. 密钥的处理
   - 不要把密钥放进要上传的文件里：传上去以后，任何人都能在浏览器里看到。
   - 把用到密钥的部分改成 Cloudflare Pages Functions（云函数），密钥放在 Cloudflare 的环境变量里。
   - 轮到填密钥时停下来，告诉我在 Cloudflare 网页后台的哪个位置、填什么名字，由我自己填。不要让我把密钥发给你，你也不要读取或显示密钥的值。
   - 如果网页需要的后台程序 Cloudflare Pages 跑不了，先停下来，告诉我原因和替代办法。

3. 准备上传
   新建一个只放网站文件的文件夹（比如 dist），只复制网页真正需要的文件进去。不要带 .env、密钥文件、备份、草稿、个人资料。把要上传的文件列给我看，我确认后再继续。

4. 先发预览版
   用 npx wrangler 部署，项目名用英文小写。需要登录 Cloudflare 时会弹出浏览器，告诉我去点授权，我点完你再继续。先发预览版，把预览链接给我。

5. 再发正式版
   我在手机和电脑上都试过预览版、说没问题后，再发正式版，把正式链接给我。

6. 最后告诉我
   - 以后改了网页，怎么一句话让你重新上线
   - 新版有问题时，怎么退回上一版

其他要求：遇到报错，先用大白话解释原因再修；需要联网、安装工具的权限，直接向我申请。

上线前的验收清单

一句心法

先让 AI 讲清楚它要做什么，你听懂了再让它做；每一步都要它告诉你怎么验证。做两三次之后，第 00 到 06 步讲的东西你自然就都懂了。

附录

名词速查

名词大白话
服务器一台 24 小时开着、连着网、别人能找到的电脑
云服务器从云厂商租来的虚拟电脑，按月付费，自己管
托管平台只交网站文件，机器、HTTPS、分发都由平台负责
云函数 / Serverless一小段代码，有人请求时才运行，不用一直开机器
部署把文件放上去、让新版本生效的这个动作
IP服务器在网上的数字地址
域名好记的网址名字
DNS把域名翻译成 IP 的“地图”
HTTPS加密传输，地址栏的小锁
ICP 备案域名指向中国内地服务器时，要先向主管部门登记
环境变量存在平台后台、代码运行时才读取的配置，用来放密钥
预览版 / 回滚先发一个测试网址试用；出问题退回上一个版本
来源

文中数字和规则的出处

2026 年 11 月 11 日核对。额度和条款会变，用之前以官方页面为准。