静态网站、frontend 和 backend

屏幕上有两个网站。第一个是带游戏的页面：棋盘、比分、"重来"按钮。第二个是维修店的页面，带一个"提交订单"的表单。两个都能在浏览器里打开，都是用 HTML、CSS 和 JavaScript 搭出来的，看起来都做完了。第一个一分钟就能上线：文件夹丢到托管服务上，链接就有了。第二个呢，智能体多半会停下来，问服务器放哪儿、订单存哪儿。

区别不在复杂度，也不在好不好看。区别在于访客点按钮的那一刻，该由谁来做点什么，以及事后数据该放在哪里。我们来拆解三个词 - 静态网站、frontend 和 backend - 看看数据放在哪里，以及这如何决定发布方式。最后再看看，在您说"发布"之前智能体自己会问什么，以及您该反过来问它什么。

1. 静态网站

静态网站是由现成文件组成的网站：index.html、style.css、脚本、图片、字体。服务器把它们存起来，原样发给每一个访客，什么都不计算，也不记住任何关于访客的信息。展示、计算、响应点击这些活儿，全都是访客的浏览器在他自己的电脑上完成的。

拿一个单页作品集来说。文件夹里放着 index.html（写着自我介绍和作品列表）、style.css、十来张图片，还有一小段脚本。访客打开链接，浏览器下载文件，拼出页面。点一下作品，图片放大展示；切换深色主题，颜色跟着变：这些都是浏览器里的脚本干的。服务器把文件发出去之后，就不再参与后面发生的事了 - 谁来了、点了什么，它一概不管。有了新作品，您改一下 index.html，放上新图片，把文件夹重新上传一遍；这里没有别的改动方式，改网站的是您，不是访客。

下面这些也是同样的套路：

• 演出或活动的宣传页：日期、地点、流程、路线图；"购票"按钮跳到售票网站，宣传页本身不卖任何东西；
• 产品或服务的落地页，只要上面挂的是电话和邮箱，而不是表单；
• 项目文档：几十个页面，带菜单，彼此互相链接，说到底还是文件；
• 没有评论功能的博客：每篇文章都是一个文件，发新文章的方式跟其他文件一样；
• 浏览器里的游戏。没错，游戏也算：走棋、计分、动画都是在浏览器里算的，服务器根本不管这些。

把网站的工作分成两半 - 浏览器做的那部分和服务器做的那部分 - 就能看出静态到哪里为止。这两半各有各的名字。

2. Frontend 跑在浏览器里

Frontend 是所有在访客电脑上执行的东西：浏览器拿到并在自己那边跑起来的标记、样式和脚本。这是"前端"，看得见的那一部分。（常常有人只把它叫做"排版"，但其实它是用户会接触到的整个网站部分，对静态网站来说，那就是整个网站。）

Frontend 能做的事不少：展示页面、计算游戏里的走棋、在提交前检查表单字段没留空、记住点什么留到下次访问 - 为此浏览器自带了一份存储，智能体会把它叫作 localStorage。它做不到的是共享。这份存储只活在这个浏览器、这台设备上，别处都没有。这条边界在哪儿添麻烦、在哪儿不添麻烦，两个例子就能看明白。

游戏里的最高分。一局结束，脚本把结果和之前的记录比一比，把新纪录写进浏览器存储。第二天玩家在同一台笔记本电脑的同一个浏览器里打开页面 - 记录还在。换到手机上打开 - 里面是空的，手机有自己的存储。而您作为游戏的作者，永远看不到这个记录。这没什么问题：它只对玩家自己有意义，网站照样是静态的。

维修店的订单。客户描述完需求，留下电话，点了"提交"。脚本可以检查字段有没有填，再往下它就没辙了：把订单写进浏览器存储的话，订单就留在客户的手机上，店家根本不知道。订单得让另一个人在另一台设备上看到，也就是说数据得离开客户的电脑，另一头还得有人接收并保存它。一个只由文件组成的网站，没有这样的"某人"。

只涉及一个访客、一台设备的事，frontend 自己就能搞定。剩下的，是另一半的工作。

3. Backend 跑在服务器上

Backend 是运行在服务器上、负责回应浏览器请求的程序。接收订单并保存它。检查登录名和密码。返回商品列表。访客关掉标签页之后它照样在工作，而且必须一直运行，就跟服务器本身一样 - 那是一台不会被关掉的电脑。

图上是同一种形状的两条路径：点击、工作、结果。区别在中间那格 - 谁做这份工作，具体做什么。上面那条，游戏走一步之后，浏览器里的 JavaScript 计算分数、保存记录、重绘棋盘，全都在访客的电脑上完成。下面那条，点一下"提交"变成一个请求，请求发到服务器，程序接收它，把订单存在自己的服务器上，再回应浏览器，最终显示在屏幕上的是它的回应。订单具体存在服务器的哪个位置 - 下一节再说。"谁做这份工作"这个问题，正是两类网站之间的分界线。

三个明显的信号，说明少不了 backend：

• 用密码登录：得有人存密码、核对密码，这活儿不能交给访客的浏览器；
• 别人也要看到的数据：评论、订单、共享列表；
• 以您的名义执行的动作：发邮件、走一笔支付、用您的密钥往别家服务里写东西。

Backend 用什么语言都行：JavaScript（这时候就是 Node.js）、Python、Java，还有十几种其他语言。对这篇文章来说，重要的不是语言，而是这个程序得在某个地方一直运行着，而这个"某个地方"不是浏览器。网站地址指向服务器上的一个位置，跟静态网站一样，只不过这个位置现在放的不是文件，而是一个实时拼出回应的程序。

4. 数据放在哪里

点击之后该由谁来做这份工作，是由数据决定的：数据放在哪儿，谁该看到它。不是网站的样子，也不是它的复杂度。一共三个地方。

在项目文件里。 页面文字、图片、游戏规则。对所有访客都一样，只有重新部署才会改变：改好文件，重新发布。

在访客的浏览器里。 设置、最高分、不想在刷新时丢掉的表单草稿。只有这个访客、在这台设备上能看到。清除网站数据时它就没了，隐私窗口里没有它，换个浏览器、换台设备也没有，您对它一无所知。

在服务器上的数据库里。 订单、评论、账号。该看到的人都能看到，您也包括在内。不管有没有人开着标签页，它都在那儿。要让数据进到这里，得有服务器上的程序接收数据并写进去。

图上是跟上一张一样的两个世界，只不过这次放的是数据，不是干活的执行者。网站文件以副本形式发到每个访客那里，所以所有人看到的页面都一样。浏览器存储是唯一没有箭头的那格：数据在里面，但离不开这台设备，您也看不到它。数据只能通过程序进入数据库，但从那之后，该看到的人都能看到。

先别管理论，问自己一个问题就行：这个人输入的东西，需要让别人看到吗？ "记住最高分" - 不需要，那就用浏览器存储，网站照样是静态的。"保存订单" - 需要，那就得有数据库，还得有程序往里写。这个问题有一个例外，跟数据无关：别家服务的密钥。如果有密钥，回答"不需要"救不了您：密钥不能放进文件里，所以要么得有服务器上的程序代您去访问那个服务，要么找个第三方中转服务替您做这件事。

还有一种中间情况。别家的服务可以替您接收订单表单：访客点"提交"，数据不进您的服务器，而是进了它们的服务器，再以邮件的形式发给您。这仍然是 backend，只不过不是您自己的。问一下智能体，它会说出具体是哪个；现在要明白的是，没有谁的程序在服务器上撑着，表单就没法用。

5. 为什么发布方式不一样

静态网站靠复制来发布：文件夹丢到托管服务上（别人的服务器，负责把您的文件发给任何来访问的人），链接就有了，要更新就再复制一遍。就这样。

Backend 不一样。服务器上得装好程序语言的运行环境 - Python 或者 Node.js 本身，没有它代码就没法跑。程序得一直运行着，崩溃了还得能重启。旁边还得跑着一个数据库。访问数据库和别家服务用的密钥得放在程序能读到、但访客读不到的地方。这几块东西各自单独更新，也各有各的出错方式。

因此需要另一种托管：能运行程序，而不只是发文件的那种。这类托管通常按程序运行的时长和数据库占用的空间收费。免费方案也有，但附带的条款比这篇文章更新得还勤。

关于保密这一行，补充一句。静态网站也可能有密钥：如果您为了拿到固定链接申请过托管服务的密钥。但它跟网站文件夹分开放，不会放进文件夹里。

智能体回答里说的"搭个服务器"，听起来跟"创建一个文件"一样平常。这句话背后是表格右边整整一列，之后几乎每一行都得有人维护。

6. 静态网站发布到哪儿

既然静态网站是靠复制发布的，能用的托管平台就很多，大多数对小页面都是免费的。下面是最常见的五个。表格里会出现"仓库"这个词：暂时理解成受版本控制的项目文件夹就够了，细节以后再说。

怎么选。要展示、要讨论 - 选那种不用注册就能拿到链接的。要长期留着 - 随便哪个您注册了账号的都行。项目已经放进仓库了 - 选那种能连上仓库、每次改动自动更新的。选哪个都不影响发布出来的页面长什么样：文件是一样的。

如果网站有 backend

程序需要的托管不能只是发文件，还得能启动您的代码并让它一直跑着：它要的输入不是文件夹，而是程序，运行环境由它自己来装。上面表格里的部分服务也支持这种模式，但通常会先从两个专门为程序打造的平台入手：

免费的 backend 总要付出点代价：有的服务里程序会休眠，暂停之后第一个访客得等它醒过来；有的服务额度用完就没了。访客一多，就得开始为一直运行付费。静态网站没有这个问题：文件不会睡觉。

各家服务的条款和限额都在变，产品也常常改名、合并：比如 Cloudflare 现在就建议新项目别再放进 Pages，改放进 Workers，静态文件在那儿的发布方式是一样的。两张表里都特意没放具体数字：选之前先去看一眼价格页面。

7. 发布前该问智能体什么

智能体看一眼文件夹，通常自己就能说出项目类型。只有文件没有程序 - 会建议用静态托管，哪怕文件里有个表单没地方提交，它也不一定每次都能注意到。有 server.js 或 app.py - 会说需要服务器，并问服务器放哪儿。如果它没说，或者答得太快，您自己问一句：

看一下这个项目，告诉我这是静态网站，还是它需要服务器。
逐条列出具体是哪些地方需要服务器。
针对每一条，说说能不能不用服务器，或者往后拖一拖。

答案取决于具体项目，所以这里没有写出来。但有几件事，值得在任何回答里都留意一下。

• 听到"需要服务器"，别不看就答应。问清楚具体是什么要求服务器，能不能在浏览器里搞定，或者往后拖一拖 - 比如先发一个没有表单的版本。智能体很乐意在浏览器存储就够用的地方去搭一个 backend。
• 反过来也一样：如果数据得共享，智能体多半会说光靠静态文件不够。这不是把事情搞复杂，只是把事情叫对了名字，没什么好争的。
• 关于别家服务的密钥，智能体会问放在哪儿。回答"放进网站文件"是错的，靠谱的智能体自己就会指出这一点。这类密钥有网站文件之外的存放位置，应该由智能体自己说出来，而不是建议把密钥写进页面里。
• 部署静态文件，智能体需要一个文件夹。部署 backend，还得再问清楚数据库、运行环境和密钥。如果它什么都没问，服务器却"搭"起来了，看看它到底做了什么、做在哪儿。

"静态"和"backend"这两个词说的不是复杂度，而是地方：工作在哪儿发生，数据放在哪儿。地方定下来了，发布方式自然就有了答案。

托管平台的条款会随时间变化，请以价格页面为准。