网页工具与发布：从本地到可分享链接

从“我自己能跑”到“别人也能打开”

第一节结束时，你大概率已经有了一个能在自己电脑上运行的原型。

第二节要补上的，不再是“怎么写”，而是“怎么交付”：

“它现在只在我这里能看，别人怎么打开？”

如果说 L4-1 解决的是“从想法到第一个版本”，那么 L4-2 解决的是：

从“我自己能跑”，到“别人也能打开”。

这一步很关键，因为练习可以停在本地，产品不行。

---

网页到底是什么

这一节不讲复杂前端知识，只讲够用的一层。

三个最基本的词

你不需要先学会写它们。
你只要知道，AI 后面如果跟你说：

• “我帮你改了 HTML 结构”
• “我帮你加了 CSS 样式”
• “我帮你补了 JavaScript 逻辑”

你不会完全听不懂，就够了。

本地能跑，和别人能打开，不是一回事

你在自己电脑上打开一个页面，和别人通过链接访问一个页面，中间差着一整步：

本地项目
  ↓
运行查看
  ↓
部署到托管平台
  ↓
生成链接
  ↓
别人访问

你可以把“部署”理解成：

把原来只在你自己电脑上可见的东西，放到一个别人也能访问的位置。

再往前认识两个词就够用了：

再认识一个词：托管平台

很多人第一次看到“部署到平台”时，会下意识觉得那一定很技术。

其实在这一节里，你可以先把托管平台理解成：

一个帮你把网页放到网上，并持续帮你保管和提供访问的地方。

你不用先理解服务器怎么配置、网络怎么转发。
在通识课层面，只要先知道：

• 你把项目交给它
• 它帮你生成一个可以访问的地址
• 别人以后通过这个地址打开

这个心智模型就够用了。

---

什么样的网页工具最适合起步

第一次做网页工具，不建议上来就想：

• 登录注册
• 复杂数据库
• 多角色权限
• 后台管理系统

这些都太重了。

这些网页有一个共同点：

它们解决的是很具体的问题，而且大多数情况下，用静态页面就已经足够。

“静态网页”不是低级，而是够用

很多人一听“静态网页”，就觉得不高级。

其实不是。

对大量科室内部工具来说，静态网页恰恰是非常好的起点，因为它：

• 简单
• 快
• 稳
• 容易部署
• 容易修改

如果你只是想做一个：

• 评分整合页
• 宣教页面
• 值班速查工具

静态网页完全够用。

---

一个很典型的项目：科室实用工具页

假设你想做一个“值班常用评分和速查页”。

这个页面可能包括：

• 常用评分入口
• 常见药物剂量速查
• 几个高频公式
• 一个简短的注意事项区

你可以这样和 AI 说：

帮我做一个科室内部使用的网页工具页，页面简洁、适合手机查看。上面包含三个部分：常用评分工具入口、值班常见药物剂量速查、注意事项提示。整体风格简洁，最好一个页面就能看完。

你会发现，这和上一节的逻辑完全一样：

• 目标用户是谁
• 场景是什么
• 页面包含哪些部分
• 风格是什么

只是这次结果不再只是一个小计算器，而是一个真正像“产品入口”的页面。

做网页时，最容易犯的错

1. 一上来追求太复杂

比如一开始就想：

• 做后台
• 加权限
• 存用户数据
• 多端同步

结果往往是第一版根本做不出来。

2. 只顾好看，不顾使用场景

在医疗场景里，很多时候“太花哨”反而会影响使用。

比如：

• 字太小
• 信息层级混乱
• 手机上不好点
• 输入框不清楚

3. 不考虑谁来打开

给患者看的页面，和给医生值班时看的页面，风格和结构应该完全不同。

所以网页工具这一步，实际上是在继续训练你的产品判断。

---

怎么把页面发出去

先认识两个常见平台

第一次部署，最适合新手的通常是：

• GitHub Pages
• Vercel

你现在不需要理解它们的全部区别，只要知道：

• 它们都可以帮你把页面发布出去
• 发布后会给你一个链接
• 别人可以通过这个链接访问

GitHub Pages 和 Vercel，你可以先怎么分

第一次学，不需要研究它们所有区别。
先有个很朴素的印象就够了：

对这一课的大多数起步项目来说，你只需要记住：

• 两者都能发静态网页
• 两者都能生成链接
• 两者都适合先把第一个版本发出去

后面真要长期维护、接更复杂的项目，再慢慢理解差异就行。

GitHub 到底是什么

第一次接触时，你可以先把 GitHub 粗略理解成：

一个存放项目代码和文件的地方。

它不只是“程序员社区”，对你来说更重要的是：

• 可以存项目
• 可以管理版本
• 可以接发布工具

如果还想再直白一点，你也可以把它先理解成：

项目文件的“云端文件柜 + 版本记录本”。

你每改一版，不是都散落在自己电脑某个角落，而是可以逐步留下记录。

部署到底是什么

部署不是很神秘。

在这一节里，你只需要理解成：

把项目放到一个线上可访问的位置，并生成链接。

就够了。

先别被“服务器”“云”“托管”这些词吓到。
在通识课层面，我们只讲一条能走通的路径，不追求你一下子理解全部底层。

从小白视角看，发布时到底发生了什么

你可以把整个过程想成：

我电脑里的网页
  ↓
上传到一个托管平台
  ↓
平台帮我放到网上
  ↓
生成公开链接
  ↓
别人用浏览器打开

如果这样理解，你就不会把“部署”想得过于神秘。
它本质上不是“突然成了工程师”，而是你第一次学会把自己的东西交付出去。

第一次发布前，先做一个最小检查

正式把链接发给别人之前，至少自己过一遍这五项：

1. 手机和电脑都能打开吗
2. 关键按钮都点得动吗
3. 输入异常值时会不会直接报错
4. 页面标题能不能让人一眼看懂用途
5. 页面里有没有不该公开的信息

---

页面发出去以后，你就进入“真实使用”阶段了

链接一旦发出去，你面对的问题就会从“我会不会做”变成：

• 别人打开会不会看不懂？
• 手机上排版会不会乱？
• 有人用错输入怎么办？
• 内容要改时，你会不会更新？

也就是说，产品一旦开始被别人使用，维护就开始了。

最简单的更新流程

第一次更新，你不需要记很多技术步骤。
先记住这个顺序：

具体就是：

1. 告诉 AI 你要改什么
2. 本地看效果
3. 自己测试一下关键功能
4. 没问题再重新部署

这就是最基础的发布意识。

---

第二节想让你真正跨过去的，是“交付感”

上一节给你的，是“我也能做出来”的信心。
这一节真正想给你的，是：

原来我做的东西，不只是自己看看，而是真的可以给别人用。

这是一个非常大的变化。

因为从这一刻开始，你对工具的理解就会变：

• 不是“我觉得行就行”
• 而是“别人能不能顺利用起来”

这就是产品思维继续往前走的一步。