5元做一个作品集网站？

5 元做一个作品集网站？

Gemini + Codex + EdgeOne Pages 拆解与复刻教程

获授权视频复刻｜事实与方案分层｜适合零基础照做

核验日期：2026 年 9 月 22 日

这是一篇基于获授权抖音作品制作的“拆解 + 评测 + 复刻”教程。原视频由博主“我的天啊”发布，时长约 9 分 49 秒，分为网站设计、工具介绍、网站制作、部署上线、域名购买与绑定五段。博主在补充沟通中说明：网页由 Gemini + Codex 制作，视频由剪映制作。

重要说明：本文是在复刻视频展示的同类型网站，不代表博主的每一步操作与本文完全一致。本文的复刻方案不代表博主原始完整操作流程。 视频里没有完整公开全部提示词、全部代码和每次修改过程；因此本文按“来源画面事实、创作者披露、官方资料、复刻方案”四层组织。不能确认的内容不会冒充原教程。

一、先给结论：能不能复刻？

能，但要先把“复刻成功”定义准确。

最稳妥的预期是：先做出一个可公开访问、能展示真实项目、电脑与手机都能浏览的静态作品集；后续再决定是否增加登录、数据库、后台管理或真正的 AI 对话。

图 2：授权、博主补充披露与本文复刻目标

二、成品到底做了什么？

我在 2026 年 9 月 22 日再次打开视频中的成品域名 wujiachengportfolio.asia，网站仍可访问。页面标题为“吴嘉诚 | Wu Jiacheng - Portfolio”，内容和视频展示一致：左侧是作品集、实习经历、个人助手和关于我，中心区域以可打开的深色窗口承载内容，底部有类似系统 Dock 的导航，右侧有悬浮角色入口。

它的亮点不是“把简历贴到网页上”，而是把作品集包装成一个轻量的个人操作系统：

• 统一外壳：深蓝到青色的模糊背景、玻璃窗口、圆角和细噪点；

• 清晰入口：作品、经历、助手、关于我四个主模块始终可见；

• Bento 作品墙：卡片大小错落，但标题、分类和入口保持一致；

• 窗口化详情：项目与经历在独立面板里展开，避免首页无限拉长；

• 微交互：卡片悬停、窗口打开、光标或背景粒子增加“系统感”；

• 内容混排：项目详情可放图片、视频、PDF、二维码和说明文字。

图 3：视频中的作品卡片与实习经历窗口

复刻时不要先追动画。先把信息架构固定下来，否则 AI 很容易生成一个“视觉很满、内容很空”的模板。

图 4：建议先固定的四个一级模块与统一外壳

三、开始前准备：先把材料做成可用数据

建议新建一个项目资料文件夹，先准备以下内容：

1. 个人简介：一句定位、3—5 条能力标签、城市或求职方向；

2. 作品项目：先选 4—6 个，每个项目准备标题、分类、职责、背景、过程、结果和 3—6 张图；

3. 实习经历：公司、时间、岗位、核心任务、量化结果；

4. 关于我：教育经历、技能、获奖、联系方式；

5. 媒体资产：压缩后的 WebP/JPG 图片、MP4 视频、PDF 预览文件；

6. 可选人物资产：同一人物、同一服装与配色的一套表情或动作。

推荐先用一个数据表统一字段，例如：

项目标题：
项目分类：AIGC / 产品 / UI / 运营
一句话结果：
我的职责：
背景与问题：
解决过程：
最终结果：
封面图文件名：
详情图文件名：
外部链接：

不要上传客户机密、身份证件、内部报表、私人手机号或未获授权的字体与图片。公开网页里的媒体文件最终都会被访问者的浏览器下载，“禁止右键”只能降低误操作，不能真正防下载。

四、第一步：用 Google AI Studio 生成可运行的前端

视频中使用了 Google AI Studio 的 Build 模式：左侧输入需求，右侧显示实时预览，并可查看代码树、继续对话修改或下载项目。Google 当前官方文档说明，Build 模式可从提示词或导入的 GitHub 项目开始，默认可生成 React 前端，并支持同步 GitHub或下载 ZIP；具体按钮名称可能随版本变化。

图 5：视频中的首轮需求与预览区；个人附件名已作弱化处理

小白最容易犯的错误是只写“帮我做一个高级作品集网站”。更稳的写法要包含目标、上下文、输出和边界。下面这段不是视频原提示词的逐字抄写，而是根据成品与当前工具整理的可复刻版本：

请根据我提供的真实简历与作品资料，生成一个完整、可运行的个人作品集网站。

目标：用于求职和项目展示，风格简约高级，但不要像常见的一屏式作品集模板。

视觉方向：深蓝—青色空间背景、轻微噪点、玻璃质感窗口、Mac 桌面系统隐喻；整体克制，保证文字对比度。

页面结构：
1. 作品集：Bento Grid，支持“全部/AIGC/产品/UI/运营”筛选；
2. 项目详情：点击卡片后打开窗口，展示背景、职责、过程、结果、图片/视频/PDF；
3. 实习经历：按公司展示岗位、时间、工作和量化结果；
4. 个人助手：先做前端预设问答，不接真实模型 API；
5. 关于我：简介、教育、技能、获奖、联系方式。

技术要求：React + TypeScript + Vite；内容与组件分离；图片使用本地相对路径；桌面端和手机端都可用；尊重 prefers-reduced-motion；不要写入任何 API Key；生成后先运行并检查错误。

先给出信息架构和视觉方案，得到确认后再实现。若资料缺失，用“待补充”标记，不虚构经历与成绩。

如果你已有简历，先删除不适合公开的个人信息，再上传。图片、PDF 和视频最好统一为英文小写文件名，例如 project-a-cover.webp，避免空格、中文符号与大小写混用导致部署后路径失效。

五、第二步：筛选设计方案，不要照单全收

视频中的 Gemini 给出过生成式背景、磁吸交互、Bento Grid、动态时间轴和噪点质感等建议。这些方向与最终成品相符，但不是每一项都必须保留。

图 6：视频中的设计建议与落地后的作品墙

用下面五条做筛选：

• 首屏 3 秒内能否知道“这是谁、做什么、哪里看作品”；

• 正文与背景对比是否足够，长段落是否能读完；

• 卡片悬停时是否仍能点击，手机上是否有替代方式；

• 动画是否影响滚动、性能与内容浏览；

• 去掉特效后，内容结构是否仍然成立。

一次只改一类问题。可直接使用以下修改提示：

只修改可读性，不改页面结构：提高正文与标签对比度；深色背景下正文至少清晰可读；检查所有卡片、弹窗、按钮的 hover/focus/disabled 状态。修改后列出涉及文件，并说明如何验证。

只修改移动端：在 390px 宽度下检查侧栏、Bento 卡片、项目弹窗、视频和 PDF。不能横向溢出；触控目标要足够大；关闭按钮始终可见。修改后运行构建检查。

六、第三步：处理报错与多轮迭代

视频真实展示了运行报错，也展示了多轮改颜色、文字对比、对话气泡和文件路径的过程。这说明 AI 编程不是“一句话成片”，而是生成—检查—修复—再验收。

图 7：视频中的运行错误与后续修改报告

出现报错时，不要只说“还是不行”。复制完整错误、说明触发动作，并要求工具先定位原因：

复现步骤：打开首页 → 点击作品卡 → 关闭详情 → 再次点击时页面报错。
控制台错误：[粘贴完整错误]

请先解释根因，再做最小修改。不要重写无关组件。修改后运行现有测试与 npm run build，并告诉我验证步骤。

每一轮只验一个主题：

1. 能否运行：控制台无阻塞错误，刷新不白屏；

2. 内容是否正确：名字、经历、年份、图片与链接不串位；

3. 交互是否完整：打开、关闭、筛选、键盘焦点、返回都有效；

4. 响应式是否可用：390px、768px、1440px 三个宽度至少检查一次；

5. 性能是否可接受：压缩大图、视频不自动加载全部、动画不过量。

七、可选步骤：制作一致的人物形象

视频中出现了一组 Q 版人物动作图，但画面不足以可靠确认具体生成工具，因此本文不把某个产品名称写成事实。这个步骤也不是网站上线的必要条件。

图 8：视频中用于悬浮助手和状态展示的一组人物资产

如果要做，先生成“标准角色图”，再扩展动作。提示词要固定年龄感、发型、服装、主色、线条和白底/透明背景。最终挑选一套风格一致的图片，导出相同画布尺寸；不要把十张风格差异很大的图直接混进网站。

八、第四步：导出代码，用 Codex 做结构化修改

视频展示了 AI Studio 的代码树与下载操作；博主在补充沟通中说明网页由 Gemini + Codex 制作。视频中间还出现并口述了腾讯 WorkBuddy 的本地文件处理界面，因此更准确的说法是：视频出现过可读取本地项目的工作助手，而本文把 Codex 作为主要代码修改路线，WorkBuddy 可作为同类替代，不把两者混为同一工具。

图 9：下载代码与修改报告；本文以博主补充披露的 Codex 为主线

解压后先让 Codex“理解项目”，再让它修改。第一条建议这样写：

请先检查这个项目的 package.json、目录结构、数据来源与静态资源路径，不要立即大改。
目标：把它整理成可维护、可构建、可部署的作品集。
请输出：
1. 当前技术栈和启动命令；
2. 可能导致构建失败或部署后 404 的位置；
3. 内容数据与 UI 组件是否分离；
4. 一个按风险排序的修改计划。
完成检查后先等我确认。

确认后分批执行：

第一批只做静态资源与内容映射：
- 检查所有图片、视频、PDF 的真实文件名与引用路径；
- 路径统一为相对路径，处理大小写问题；
- 缺失资源显示占位，不让页面崩溃；
- 不修改视觉样式。
修改后运行 npm run build，并列出改动文件和验证结果。

第二批只做可访问性和响应式：
- 所有可点击元素可用键盘聚焦；
- 弹窗打开后焦点进入，关闭后回到触发按钮；
- 图片有 alt，动画尊重 prefers-reduced-motion；
- 检查 390/768/1440px。
不要改变真实内容。完成后再次构建。

安全提醒：不要把 GitHub Personal Access Token、域名账号密码、腾讯云密钥或任何 API Key 粘贴给 AI，也不要写进前端代码。 GitHub 推荐通过网页 OAuth、Git Credential Manager 或 gh auth login 完成登录；凭据只保存在本机安全凭据存储中。

九、第五步：本地运行与验收

如果项目的 package.json 表明它是常见的 Vite/Node 项目，可以在项目目录运行：

npm install
npm run dev
npm run build

终端会给出本地预览地址，端口不一定和视频一致，以实际输出为准。npm run build 成功后，常见构建产物目录是 dist，但最终要以项目配置为准。

图 10：本地修改界面与三条基础验收命令

正式部署前逐项点击：首页、分类筛选、每张作品卡、弹窗关闭、实习经历、关于我、所有外链、视频/PDF、手机菜单。再刷新一个详情或子路径，确认不会出现 404。若使用前端路由，要按托管平台规则配置 SPA 回退。

十、第六步：部署到 EdgeOne Pages

视频给出两条路线，当前 EdgeOne Pages 官方文档也支持从 Git 仓库导入、模板创建或直接上传项目文件。

路线 A：Git 仓库自动部署（推荐）

1. 在 GitHub 新建仓库，把本地项目提交并推送；

2. 在 EdgeOne Pages 新建项目，选择“导入 Git 仓库”；

3. 授权并选择目标仓库与生产分支；

4. 如果是典型 Vite 项目，可先尝试构建命令 npm run build、输出目录 dist；若项目配置不同，以实际 package.json 为准；

5. 部署成功后打开平台预览域名，完整验收；

6. 以后向生产分支推送代码，平台可自动触发新部署。

路线 B：直接上传（适合一次性静态站）

1. 本地先执行 npm run build；

2. 确认 dist 内有 index.html 及资源文件；

3. 在 Pages 选择直接上传，上传构建产物，而不是把 node_modules 和本机缓存一起传；

4. 每次更新后重新构建并上传。

图 11：视频展示的 Git 导入与直接上传两条路线

Git 路线更适合长期维护，因为版本可追溯、回滚方便，推送后可自动部署。直接上传更容易上手，但每次修改都要手动重新发布。

十一、第七步：预览、购买并绑定域名

先用平台预览域名完成验收，再购买自定义域名。这样即使域名实名或 DNS 生效较慢，也不会阻塞网站测试。

图 12：先打开预览地址，再在项目中添加自定义域名

操作顺序：

1. 在域名注册商查询想要的域名；

2. 核对首年价格、续费价格、可备案性和实名认证要求；

3. 完成注册后，在 EdgeOne Pages 项目的“域名管理”添加根域名或子域名；

4. 按控制台提示到注册商处添加所有权验证记录和 CNAME；

5. 等待 DNS 生效，再检查 HTTPS；

6. 在手机网络和不同浏览器中重新打开网站。

EdgeOne 官方文档明确说明：如果项目加速区选择“中国大陆可用区”或“全球可用区（含中国大陆）”，添加的域名应先完成 ICP 备案。只购买域名不等于已经备案，也不等于立刻能在所有区域使用。

十二、成本评测：5 元到底指什么？

视频画面中出现了 5 元、10 元、18 元等不同后缀的候选价格，博主也口述“提前买了一个 5 块钱的域名”。所以标题里的 5 元可以理解为一次促销或某后缀的首年注册示例，不能写成永久固定成本。

图 13：视频中的域名候选价格与最终上线成品

真正要核对的成本包括：

• 域名首年价与次年续费价；

• 域名实名认证、备案所需时间与条件；

• EdgeOne Pages 当前免费额度与后续政策；

• Google AI Studio 使用的模型、API 或 Cloud Run 是否产生费用；

• 大图片、视频、PDF 带来的流量和存储；

• 后续增加数据库、登录、后台或真实 AI 对话的服务费用。

因此更准确的结论是：低成本上线一个静态作品集是可行的；“永久只需 5 元”没有足够依据。

十三、最容易踩的 8 个坑

1. 把第一版当成成品：必须多轮修错误、可读性、路径和响应式；

2. 内容全写死在组件里：后续更新非常痛苦，尽量抽成数据文件；

3. 图片路径大小写不一致：Windows 本地能开，部署到 Linux 环境后可能 404；

4. 公开上传敏感文件：前端公开资源无法靠禁止右键真正保护；

5. 把令牌交给 AI：GitHub、腾讯云和模型密钥都不应进入聊天或仓库；

6. 只看电脑端：窗口式布局最容易在手机上溢出；

7. 把预设气泡当真实 AI：要接模型需要服务端代理、密钥管理、限流与费用控制；

8. 把静态网站当 CMS：视频没有展示后台，更新内容仍需修改文件并重新部署。

十四、最终验收清单

发布前逐项打勾：

☐ 首页 3 秒内能看懂个人定位；

☐ 至少 4 个真实项目，职责与结果明确；

☐ 所有图片、视频、PDF 能加载；

☐ 作品筛选、详情打开与关闭都有效；

☐ 390px、768px、1440px 三个宽度无明显溢出；

☐ 键盘可以操作主要按钮与弹窗；

☐ npm run build 成功；

☐ 仓库中没有密钥、令牌、个人隐私与 node_modules；

☐ EdgeOne 预览地址验收通过；

☐ 域名 DNS、HTTPS 与备案条件已核对；

☐ 知道下一次如何修改内容并重新发布。

做到这里，你复刻出来的就不是“看起来像”的演示页，而是一份可以持续维护、能够真正发给面试官或客户的线上作品集。

资料来源与核验边界

• 原始抖音作品：5 元做一个作品集网站？

• 视频成品网站：wujiachengportfolio.asia

• Google 官方：Google AI Studio Build mode

• OpenAI 官方：Prompting 指南

• EdgeOne 官方：项目管理、创建部署、自定义域名

• 腾讯云官方：注册新域名、单个域名续费

本文页面截图取自获授权视频，已尽量避开字幕遮挡；部分涉及个人文件名的信息已弱化。官方产品界面、价格、额度与规则会变化，实际操作以你使用当天的官方页面为准。