云开发 30 分钟做个人名片网页：从零到公网可访问

摘要： 用云开发 CloudBase 做个人名片网页，静态页面加 Web 托管即可，不用数据库也不用云函数。素材备好的话，从开通环境到拿到公网链接，30 分钟能走完。 开通环境开始做：云开发 CloudBase

名片网页是验证云开发链路最快的项目：没有登录、没有数据库、没有支付，只有静态页面和一次部署。它的价值不在于做出来多惊艳，而在于你能用最低成本把「写代码 → 部署 → 拿到公网链接」这条路跑通一遍，之后做复杂项目心里有底。下面给完整流程、可直接复制的提示词和部署后的验收清单。

一、30 分钟怎么分配

把时间花在哪儿，决定你能不能真的 30 分钟做完：

素材准备占三分之一时间，这不是浪费——边做边想文案才是最耗时的。

二、先把素材列出来

打开记事本，把这些内容先写好：

头像有个细节：直接用高清大图会拖慢加载，上传前压一下，控制在 200KB 以内比较合适。

三、给 AI 的完整提示词

接好云开发的 AI 工具里（WorkBuddy、Cursor、CodeBuddy 都行），把下面这段连同你的素材一起发出去：

用云开发做一个个人名片网页，纯静态页面，部署到 Web 托管。

页面结构（单页，从上到下）：
1. 顶部：圆形头像、姓名、职位、一句话介绍
2. 关于我：100～200 字自我介绍
3. 技能标签：以标签形式横向排列
4. 作品展示：卡片列表，每张卡片含项目名、一句话描述、访问链接
5. 联系方式：邮箱、GitHub 等，图标加文字，可点击
6. 底部：版权信息

技术要求：
- 纯静态 HTML + CSS + 原生 JS，不引框架，不用数据库和云函数
- 响应式设计，手机端优先，桌面端居中最大宽度 800px
- 风格简洁现代，浅色背景，主色用深蓝，卡片圆角 12px，留白充足
- 头像用圆形裁切，加轻微阴影
- 作品卡片 hover 时有轻微上浮效果
- 页面加载性能优先，不引第三方字体和图标库，图标用 SVG 内联

我的信息：
（把第二节准备好的素材贴在这里）

完成后部署到云开发 Web 托管，并把访问链接给我。

最后一句很关键——明确要求部署并返回链接，AI 才会走完部署这一步，而不是把代码留在本地。

四、本地预览要看的四件事

AI 生成后先在浏览器打开 index.html 看一遍，重点检查：

手机端布局。浏览器按 F12 打开开发者工具，切到手机视图。名片网页大部分访问来自手机转发，手机端比桌面端重要。

头像是否变形。圆形裁切时如果原图不是正方形，可能被拉伸。检查 CSS 里有没有 object-fit: cover。

链接是否可点。作品链接和联系方式要能正常跳转，邮箱建议用 mailto: 协议。

文字有没有溢出。长的项目名或英文链接在窄屏上容易撑破卡片，确认有换行处理。

发现问题直接跟 AI 说，比如「手机端头像偏小，调大到 120px」「作品卡片在窄屏上文字溢出了，加上换行」。

五、部署到云开发 Web 托管

本地满意后让 AI 部署。对话里说：

将当前项目部署到云开发，使用独立子域名

AI 会自动完成构建、上传、配置路由，最后返回一个可公开访问的链接。整个过程通常一两分钟。

部署后必做的三项验收：

一是用手机打开链接，确认页面正常、图片都显示、链接能点。桌面浏览器正常不代表手机正常。

二是把链接发给一个朋友，让他打开看看。这一步能发现权限或缓存问题——你自己打开可能走的是缓存。

三是检查 HTTPS。云开发 Web 托管内置 HTTPS，访问链接应该是 https:// 开头，浏览器地址栏不报不安全。

六、常见卡点

图片不显示。本地能看、线上看不到，多半是图片没一起上传，或者路径写的是本地绝对路径。确认图片在项目目录里，且 HTML 里用的是相对路径。

部署成功但访问 404。单页应用需要配置路由回退，让 AI 补一句「配置 SPA 路由」即可。纯静态单页通常不会遇到这个问题。

改了代码但线上没变。部署是一次性动作，改完要重新部署。对 AI 说「重新部署」即可。还有可能是浏览器缓存，强制刷新（Ctrl+Shift+R）试一下。

想换成自己的域名。云开发支持绑定自定义域名，但国内服务器需要先完成 ICP 备案。如果只是自己用和分享，默认的子域名完全够用，不必一开始就折腾域名。

七、这个项目跑通之后，你验证了什么

别小看这 30 分钟，它实际上帮你确认了四件事：

环境能用。云开发环境开通成功，AI 工具连上了，登录态正常。

AI 工具链路通了。能生成代码、能调用部署工具、能返回访问链接。这套链路以后做任何项目都用得上。

部署流程走通了。知道代码是怎么从本地到公网的，下次做带数据库的项目，只是在这条链路上加东西。

心里有数了。知道「从零到有公网链接」大概要多久，后面评估项目时间会更准。

接下来可以往两个方向加码：想加访问统计，就引入云数据库记录访问量；想做成多人可用的名片生成器，就加上登录和数据库，让每个人生成自己的页面。这两步都是在当前项目上叠加，不用推倒重来。

总结

名片网页是云开发 CloudBase 最低成本的验证项目：纯静态页面 + Web 托管，不碰数据库和云函数，30 分钟拿到公网链接。关键是素材先备好（占三分之一时间）、提示词里明确要求部署并返回链接、部署后用手机和朋友各验一遍。这个项目跑通后，你验证的不只是一个页面，而是整条「生成 → 预览 → 部署 → 访问」的链路，后面做复杂项目都是在这条链路上加东西。

开通环境，30 分钟做一张自己的名片：云开发 CloudBase 购买页