不会写代码,也能做作品集网站:Codex 保姆级教程来了
- 2026-09-25 17:32:12
如果有人问你“能看看作品吗”，你是不是还要翻相册、找网盘，再发过去一串链接？
现在把这些内容做成一个网站，以后就能用一个网址介绍自己：你做什么、有哪些代表作、怎么联系你。
这篇我带你用 Codex 做一个简单的个人作品集网站，从准备图片、生成页面，一直讲到拿到能发给别人的网址。你不需要先学会写代码，但需要自己准备作品、登录账号，并跟着预览检查效果。
下面用“摄影师展示三个拍摄项目”举例。你是设计师、剪辑师或内容创作者，把职业、图片和项目介绍换成自己的就可以。先把这个小网站做完整，后面再添新作品。
● ● ●
第一步：准备工具，知道分别在哪里用
这次用三个工具：
准备一台电脑、可使用 Codex 的账号，以及 GitHub 和 Cloudflare 账号。账号登录由你自己完成。是否需要付费、还有多少使用额度，在各自账号页面查看。
先安装并打开 Codex。从 OpenAI 官方入门页进入桌面端下载与登录流程。如果安装后的界面提供 ChatGPT 和 Codex 选项，选择 Codex；已经在 Codex 里的读者可以继续下一步。
GitHub和 Cloudflare先注册好账号，暂时不用操作。这篇会在第六、七步带你用到它们。
完成标志：你能在 Codex 里发送消息，另外两个网站也能登录。
● ● ●
第二步：建一个文件夹，把作品放进去
在电脑桌面上新建一个文件夹，命名为 my-portfolio，意思是“我的作品集”。打开它，再建一个叫 materials 的文件夹，用来放原始材料。
按下图整理文件夹：
素材文件夹整理
个人介绍.txt 是普通文本文档。Windows 可以用记事本；Mac 可以用“文本编辑”，选择“格式 → 制作纯文本”后保存。
新建 个人介绍.txt 和各项目的 项目说明.txt，按下图的字段填写自己的真实资料。
第一版先用图片和文字。视频作品可以先放封面和可公开访问的成片链接。挑你准备公开的内容，不必把全部工作资料都放进去。
个人介绍与项目说明
最后找两三张喜欢的网页截图，放进“参考图”。记下你喜欢什么，例如“白色背景”“作品图片大”“文字少”。没有参考图也可以，后面的提示词已经给出一种简单配色。
● ● ●
第三步：让 Codex 找到这些资料
回到 Codex，使用新建项目或打开文件夹的入口，选择桌面的 my-portfolio，然后在这个项目里新建任务。这里的“项目”，就是让 Codex 围绕这个文件夹工作。官方项目入门说明
第一次可能出现文件访问提示，确认选中的是你刚建的作品集文件夹，再按界面完成授权。
在输入框粘贴下面这段。方括号里的文字要换成自己的内容，方括号本身删掉：
我想做个人作品集网站。我是［摄影师］，主要给［准备咨询拍摄的客户］看。请先读取当前项目 materials 文件夹里的个人介绍、作品说明和图片。有参考图就一起查看。先告诉我：读到了哪些文件、识别出哪三个项目、每个项目准备用哪些图片。缺少资料就列出来，不要编造我的经历和作品。先不要制作网页，等我核对。
检查它回复的作品名称和图片是否对应。正确就回复：“这些内容没问题，继续。”有错就直接指出，例如：“作品02是产品拍摄，不是人像拍摄。”
如果它说找不到文件，把完整文件夹路径发给它，并让它确认当前项目位置；不要在没读到资料时继续生成。
完成标志：Codex 能准确列出你的三组作品。
● ● ●
第四步：复制提示词，让它做出第一版
继续在同一个任务里发送下面这段。里面的网站文件名和技术要求保持原样即可：
这里有两个词需要认识：site 是放成品网页的文件夹；index.html 是网站首页文件。其他技术词可以先不研究，它们是在告诉 Codex 用一种便于后面上线的方式制作。
等它完成后，你应该能看到网页，而不只是一段代码。回到电脑文件夹，也应该多出 site，打开后能找到 index.html。
网站首页效果
如果只收到了代码，继续发：“请把代码保存为项目中的实际文件，并打开网页给我看。”
如果预览打不开，发：“本地预览打不开，请检查预览服务是否正在运行，重新启动并告诉我正确地址。”重新开机后需要再看网页，也可以这样说。
作品分类与扇形展开
● ● ●
第五步：看着网页改，一次说清一个问题
先看内容有没有错，再看好不好看。第一轮只检查名字、作品、介绍；第二轮再调图片大小、颜色和间距。
修改时，说清“哪里”和“改成什么”。例如：
只改首页顶部：我的名字再大一些，介绍控制在两行以内，下面保留“查看作品”按钮。其他区域不动，改完重新打开预览。
想做出上面的旋转画廊与分类展开动效，可以继续发：
首页做成有纵深的旋转画廊：标题在上方居中，作品卡片从中央远处向两侧逐渐放大，持续缓慢轮转，文字和浏览入口保持固定。下方设置作品分类，包含全部作品、空间影像、产品静物、创意视觉；向下滚动时，图片从叠放逐渐展开为扇形，点击分类只展示对应作品。再往下用大图介绍具体项目。手机端调整标题、卡片尺寸和间距，避免横向溢出；系统开启减少动态效果时，保持静态画廊。
如果要改作品区，可以说：
电脑上每行显示两组作品，手机上每行显示一组。图片完整显示，不要切掉人物的头和产品边缘。项目名称放在图片下面，保持现在的颜色。
支持内置浏览器批注的界面，也可以直接在有问题的地方写意见，再让 Codex 修改。浏览器预览与批注说明
接下来，让它检查手机效果：
请打开宽度为 390px 的手机预览，再检查 1440px 的电脑预览。逐项检查文字遮挡、图片变形、页面横向溢出，以及导航、作品和邮箱链接。修复发现的问题，告诉我实际检查了什么，哪些还需要我手动检查。
390px 和 1440px 是两种检查用的页面宽度，你可以直接照抄。它们用于发现排版问题，网站上线后仍要用自己的手机看一遍。
电脑与手机排版对比
你也亲自点点“查看作品”和“联系我”。邮箱链接需要设备配置邮件应用，因此页面最好同时显示邮箱文字，方便复制。
完成标志：内容正确，电脑与手机预览都看得清，关键按钮能用。
● ● ●
第六步：把网站文件保存到 GitHub
打开并登录 GitHub 新建仓库页面。你可以把“仓库”理解为专门保存这个网站文件的地方。
按下面填写：
点击 Create repository（创建仓库）。创建成功后，复制浏览器地址栏中的仓库地址，通常类似 https://github.com/你的用户名/my-portfolio。GitHub 官方说明
回到刚才的 Codex 任务，发送：
请把做好的网站保存到这个 GitHub 仓库：［粘贴仓库地址］。先检查电脑上是否已有 Git、当前项目的版本管理状态，以及是否已经登录 GitHub。缺少工具或需要登录，就给我适合当前电脑的操作步骤，每次只让我完成一个操作。只上传 site 文件夹和必要说明，排除 materials、临时文件和凭证。先给我看待上传文件清单，确认后再提交并推送到 main 分支。不要覆盖已有内容。
这里的“推送”就是把本地改动上传到 GitHub；main 是这次保存正式版本的位置。你不用自己拼命令，但登录和授权需要亲自完成。
确认文件清单后，回复“可以上传”。完成后刷新 GitHub，按下图核对文件。
仓库文件结构
● ● ●
第七步：上线，拿到可以发给别人的网址
登录 Cloudflare 控制台，按以下顺序进入：
Workers & Pages → Create application（创建应用）→ Pages → Import an existing Git repository（导入已有 Git 仓库）。
连接 GitHub，按页面提示授权访问刚才的 my-portfolio 仓库。返回 Cloudflare 后选中它，点击 Begin setup（开始设置）。如果找不到仓库，检查 GitHub 授权时有没有包含它。
设置页面里的参数按下图填写。需要输入的三项可直接复制：生产分支 main、构建命令 exit 0、输出目录 site。
上面的设置适用于第四步要求的 HTML、CSS 和 JavaScript 网站，支持图片动效。如果 Codex 使用了其他建站方式，先让它确认对应的部署设置。
上线参数填写
点击页面上的保存并部署按钮，等待成功状态，打开平台给出的 项目名.pages.dev 网址。“部署”就是把网站文件放到网上，让别人也能访问。
这个网址才是你可以发出去的作品集链接。前面预览时的 localhost 或 127.0.0.1 地址只用于本机查看。GitHub 仓库设为私有，也不代表部署后的网站是私有的。
把网址发到自己手机上，用手机流量打开，按本节最后一张图逐项检查。暂时不需要买自己的域名，先用平台提供的网址完成这次练习。
遇到问题可以这样处理：
手机验收
以后更新作品，仍回到原来的 Codex 项目：替换材料，让它修改网页，确认预览，再要求把改动上传到 GitHub 的 main 分支。Cloudflare 的 Git 集成会触发新的部署，等部署成功后再检查网页。自动部署说明
做完第一版，你就有了一个能持续更新的作品入口。今天先整理三个真实项目，把“我做过什么、我具体负责什么”写清楚，再从第三步开始。等这条流程走通，下一次增加作品就有了现成的基础。
#Codex #AI建站 #个人作品集 #作品集网站 #下班有术
