28元，从0到1搭建一个个人网站
你可能花了很多时间研究 AI，却还没有一个能展示自己的网址。
我用约 28 元的首次支出，搭起了一个放介绍、文章和作品的个人网站。代码让 Codex 写，风格自己选。这篇把从买域名到上线的过程拆开，你可以跟着做，把第一版真正发到网上。
按本文的示例预算，第一次支出约 28 元：服务器约 14 元一个月，域名首年约 14 元。网站从现成模板开始，下载、改代码和部署交给 Codex，你负责准备资料、挑选外观，再检查结果。
开始前，先认识这几样东西
这篇教程用到的东西，可以先这样理解：
- 域名：网站的地址，比如 你的名字.com。别人输入它，就能找到你的网站。
- 服务器（VPS）：一台放在网上的电脑，用来存放网站文件，让别人随时访问。
- 网站模板：已经搭好的网站起点。我们从 GitHub 这个存放代码的平台获取模板，再改成自己的内容，不用从空白页面开始。
- Codex：帮你下载模板、改内容、安装依赖、修复问题和部署网站。你提供资料、说明想要什么，再检查结果。
- Cloudflare：本教程用它管理域名解析，也就是告诉域名“网站在哪台服务器上”，并在上线后开启代理。
- React Bits：挑选背景、导航、光标和小组件的地方。网站先跑通，再从这里选喜欢的效果，让 Codex 接进去。
接下来的流程是：用 Codex 把模板改成你的网站，在电脑上预览，再放到服务器，通过域名让别人访问。
开始前，先打开能操作本地项目的 Codex，把项目目录交给它；需要安装环境或获得文件、终端权限时，按它的提示完成。
Mac 和 Windows 的建站流程相同，本文只在需要操作网页时按 computer use 能力分开写。 computer use 就是让 Codex 直接操作浏览器、点击按钮和填写页面。本文的 Mac 路线以已开启这项能力为前提，Windows 路线按自己操作网页来写；实际使用时，以你的 Codex 能力为准。
服务器和域名由你自己购买。域名设置与网页检查，有 computer use 就交给 Codex，没有就自己点。下载模板、改内容、接入动效和部署，两种系统都交给 Codex，使用同一套提示词。
我们会沿着这一条线往前走：
购买服务器和域名、接入 Cloudflare 是前期准备。真正制作网站时，顺序是 先跑通模板，再搭内容框架，然后选背景、导航、光标和小组件，最后上线。每一轮只改一组东西，出了问题也容易找到原因。
01｜准备地址和服务器
服务器用 WAP.AC 的 VPS 做示例，域名在 阿里云万网搜索。
2026 年 10 月 3 日的截图中，US 1G VPS 标价为 2 美元/月，约 14 元人民币是粗略换算。域名的 14 元也是首年示例价，挑名字时要同时看首年和续费金额。价格和库存以你下单时的页面为准。
服务器和域名，自己购买
这一步 Mac、Windows 一样，都由你自己选择方案、注册账号和完成付款。
1. 选择 VPS 套餐。 打开上面的 WAP.AC 链接，找到 US 1G VPS，核对每月价格和 1 IPv4，点击绿色的 立即订购。截图里的方案是 1 核 CPU、1GB 内存、5GB SSD，机房在美国洛杉矶。没有库存时，先比较其他方案的地区、价格和配置，再决定。
2. 填写服务器配置，保存好 root 账号和密码。 进入配置页后，按下面填写：
- 付款周期：选择月付，截图中是 2.00 USD 每月。
- 主机名：填一个英文名字，例如 my-site，不要输入中文。它是服务器的名字，不是登录账号。
- Root 密码：自己设置一个随机强密码，马上存进密码管理器，别只靠记忆。配图中的密码已遮挡，不要照抄。
- 系统模板：选择 Debian 12。
- IPv4 地址：选择 IPv4*1。
核对右侧总额和页面条款；截图中提示这款特价商品无退款。确认后点 继续，按后续页面完成订单和付款。开通后进入服务管理页，确认服务器正在运行，并保存下面几项：
- 服务器公网 IP：Codex 要连接哪台服务器。
- root 用户名：通常是 root，以服务管理页提供的信息为准。
- root 密码：刚才设置的服务器密码；如果平台另行提供初始密码，以实际开通信息为准，并及时保存。
- SSH 端口：连接服务器使用的端口，以平台配置为准，通常是22。
一定保存好 root 账号和密码。 root 是服务器的管理员账号，和登录 WAP.AC 网站的账号不是一回事。后面让 Codex 连接和部署服务器会用到这些信息，密码不要写进公开文章或项目文件。
3. 购买域名。 打开阿里云万网，输入想要的名字，选择未注册的域名，核对 首年价格、续费价格和购买年限，自己完成购买及平台要求的验证。进入 阿里云域名控制台，确认域名已经出现在列表里。
这一节的结果： 你有自己的域名和一台运行中的 VPS，并保存好了服务器 IP、root 用户名、root 密码与 SSH 端口。下一节再设置域名解析。
02｜让 Cloudflare 管理域名的解析
Cloudflare 在这里负责 DNS 和代理。DNS 可以理解成“这个域名应该去哪里找网站”的记录。先把域名接入，网站文件稍后部署。
Mac（已开启 computer use）：接入与核对交给 Codex
Windows（自行操作网页）：先到 Cloudflare，再切换到阿里云
1. 添加自己的域名。 打开 Cloudflare 控制台，登录，在 Domains 列表找到 Add domain。点击后进入添加站点页，选择连接已有域名的 Connect a domain。
在 Connect your domain 表单输入根域名，例如 example.com，不要加 https://、www 或网页路径，点 Continue。
2. 选择免费方案。 找到 Free 卡片，点击它下面的 Select plan，继续到 DNS 记录审核。
3. 检查扫描到的 DNS 记录。 新域名可能没有记录，旧域名可能扫描到 A、CNAME、MX、TXT。旧邮箱和其他服务的记录要一起迁移，自动扫描不能保证完整。确认后按页面提示继续，找到 Cloudflare 分配的两条 nameserver（NS）。
截图是作者已有域名重新接入，页面可能把同一组 NS 同时列进新值与删除提示。请以自己这次分配的 NS 为准；注册商原值已相同就只核对，别照着截图先删除。
4. 在阿里云修改 DNS 服务器。 另开阿里云控制台，在域名列表点该域名右侧的 管理。进入详情后，左侧找到 DNS 管理 → DNS修改，再点 修改DNS服务器。
填写自定义 DNS 时，两条 Cloudflare 地址分别放进对应栏位，核对拼写后点 确定，按要求完成验证，再返回查看结果。
这里修改的是注册商的 DNS 服务器，不是去“域名解析”页面添加两条 NS 记录。两者入口不同。阿里云官方操作说明也采用这条路径。
5. 回到 Cloudflare 等待激活。 按页面提示检查 NS。显示 Waiting/Pending 时，先确认注册商保存的两条值正确，再等传播；完整生效可能需要 24–48 小时。如果旧域名启用过 DNSSEC，需按注册商与 Cloudflare 接入说明处理旧 DS 与迁移，不反复删除域名重加。
6. 配置根域名 A 记录。 在 Cloudflare 进入自己的域名 → DNS → Records。已有根域名 A 记录点 Edit；没有时点 Add record：
保存后核对 IP。作者截图中的代理是橙云，因为原网站已经部署；你此时先用灰云，等第 09 节的源站 HTTPS 完成再开。
如果域名以前连过网站或邮箱，把已有记录交给 Codex 核对，不要随手删除。这里先使用根域名；需要同时支持 www 时，也一起告诉 Codex。
这一节的结果： Cloudflare 接入 Active，根域名 A 指向你的 VPS，首次部署为灰云。两条 NS 要复制自己的；示例 IP 也不能照抄。
03｜把模板交给 Codex，先跑起来
这里开始做网站。先让 rbp-portfolio 模板在电脑上打开，再一点点改成自己的。先别急着加动画。
把仓库链接和存放位置告诉 Codex，让它创建项目、准备环境并启动预览。Mac 和 Windows 都按下面做。
把 GitHub 链接交给 Codex
等它跑通，再打开预览
- 发送上面的提示词，填写项目要放的位置，并说明你使用 Mac 还是 Windows。创建文件夹、下载项目、安装和启动都由 Codex 完成。
- 等 Codex 给出本地网址，复制到浏览器地址栏打开。
- 点一下首页、关于和项目。打不开时，把错误提示或截图交给 Codex，让它继续修复。
复查时，这个模板遇到了依赖和构建问题，修复后才在本地跑通。后面的一组背景、导航、光标、文字和卡片组件也完成了本地验证；新 VPS 从零部署、Windows 实机和真实手机还未完成实测。遇到报错，把完整错误交给 Codex，修复后再继续。
这一节的结果： 模板在你的浏览器里能打开。这个本地地址还不是公开网站。
04｜给它框架，再把你自己的信息放进去
模板有了，下一步先决定访客能看到什么。首页用一句话介绍自己，项目解释你做过什么，文章展示你的思考，联系方式让别人知道如何找到你。
可以从这个框架开始：
- 首页：一句话介绍、头像和主要入口。
- 关于我：经历、技能和简介。
- 项目：作品介绍、图片与演示链接。
- 文章：文章标题、简介与链接。
- 联系：邮箱和愿意公开的社交账号。
模板没有的栏目，让 Codex 按你的资料补上。没有文章就先隐藏文章入口，联系先用邮箱或社交账号。
资料和框架一起交给 Codex
打开预览，检查自己的内容
- 整理姓名、介绍、头像、项目、文章和联系方式。可以直接粘贴给 Codex，也可以放在 我的网站资料.md 里让它读取。
- 将框架、资料和上面的提示词交给 Codex，让它完成修改并给出本地预览地址。
- 打开本地网址，先看名字和介绍，再逐项点导航。检查项目、文章的标题与链接是否属于你，原模板头像、社交账号和示例作品是否已经替换。
- 把浏览器窗口缩窄，检查导航能否操作、文字是否挤在一起。需要修改时说具体位置，例如“项目页第一张卡片说明在窄屏被截断”。
这一节的结果： 即使不增加新动画，网站也能完整介绍你。接下来才去 React Bits 选外观。
05｜先选背景，确定整个网站的气质
打开 React Bits，从 Browse Components 进入组件目录。先选背景，它对整个网站的视觉影响最大。
Micro Slats 是条带形成的波动，Aurora 是柔和的极光色带。你也可以继续看 Particles、Grid Distortion。先挑一个主背景，再调到适合自己的颜色和强度。接入时保留组件要求的作者与许可证说明，具体以 React Bits 的许可证为准。
先选效果，再交给 Codex 接入
1. 浏览背景分类。 在 React Bits 首页点 Browse Components，组件目录点 Backgrounds，也可以在搜索栏输入英文组件名。下图演示搜索栏与分类图标的位置；如果搜索栏里有示例文字，先清空，再选择你需要的分类。
2. 打开背景的 Preview。 先看效果，必要时在 Customize 调颜色、速度和强度。Micro Slats 只是示例，不是唯一选择。
下面两段是 React Bits 官方组件预览，方便先比较。真实颜色和参数可在组件页继续调。
背景 A · Micro Slats：条带波动。来源：React Bits 官方预览。
查看动效短片
背景 B · Aurora：柔和极光色带。来源：React Bits 官方预览。
查看动效短片
3. 切到 Code，把组件交给 Codex。 优先使用页面的 Copy for AI。没有这个按钮时，将安装说明、Usage、组件源码与 CSS 一起复制给 Codex。你不用理解或修改它们，只要别只复制其中一小段。官方代码接入这个模板时可能需要类型和样式适配，让 Codex 修复并检查构建，不能只以复制成功为准。
4. 粘贴到 Codex，并说明放在哪里。 模板本来就有背景效果，选了新的背景就让 Codex 替换原背景，避免两套效果叠在一起。
这一节的结果： 背景已经在你的网站里生效，文字依然清楚，页面仍能正常点击。
06｜再选导航，让访客知道往哪里走
导航负责把人带到关于、项目、文章和联系。看起来好玩，也要让人一眼知道每个入口是什么。
选一种导航，保留自己的栏目
- 回到 React Bits 目录，在 Components 分类搜索 Pill Nav、Dock 或 Card Nav，打开组件页看 Preview。
- 想先保留清楚的文字菜单，可以考虑 Pill Nav；Dock 适合少量入口，别让图标含义完全靠猜。Card Nav 适合更丰富的展开内容。
- 在 Code 页使用 Copy for AI，或复制完整代码与安装说明，交给 Codex。告诉它“用这个替换现有导航，保留我的栏目与链接”。
- 在本地网站点完每个导航项，再把窗口缩窄检查菜单。导航挡住标题、入口过小或点击错位，就反馈给 Codex 修复。
把下面的提示词和组件资料一起发给 Codex：
导航 · Dock：指针经过时图标缩放。来源：React Bits 官方预览。
查看动效短片
这一节的结果： 外观换了，原来的页面入口仍然完整可用。
07｜光标动效，挑一个就够了
光标适合增加一点反馈。它不是网站必需功能，尤其在手机上没有鼠标，不能让操作依赖这种效果。
挑一个光标效果，再检查点击
- 在 Animations 分类搜索 Target Cursor、Splash Cursor、Ghost Cursor 或 Ribbons，先在 Preview 移动鼠标观察效果。
- 选择一个，用 Copy for AI 或完整代码与安装说明交给 Codex，注明启用范围和手机降级要求。
- 在自己的本地网站移动鼠标并点击导航、卡片和联系按钮，确认效果没有拦截操作。
- 如果鼠标跟随太夸张，先减强度，或直接移除。光标给网站加分的前提是操作仍然轻松。
把下面的提示词和组件资料一起发给 Codex：
光标 · Target Cursor：围绕交互目标的反馈。来源：React Bits 官方预览。
查看动效短片
这一节的结果： 桌面交互有反馈，手机仍能直接操作。
08｜用小组件补细节，让组合有取舍
背景、导航和光标确定后，再看文字、卡片、列表与微交互。可以按用途来选，不用把整个组件库装进网站。
如果还没决定怎么搭，可以先从 Aurora 背景、文字导航、Spotlight Card 项目卡片和少量 Blur Text 开始，光标先不加。文字入口容易辨认，卡片效果集中在作品区，访客能先看清你的内容。喜欢其他效果，再逐项替换。
一次只接入一项
- 按上表选择用途，打开组件页，先看 Preview。
- 切 Code，用 Copy for AI 或完整代码与安装说明交给 Codex，并说清楚“项目卡片用 Spotlight Card”“首屏标题用 Blur Text”这样的落点。
- 让它改完一项就给本地地址，自己打开检查。没有问题后再接下一项。
- 最后统一颜色与间距。如果每个组件都用各自默认色，整站容易像几个演示页面拼在一起。
把下面的提示词和组件资料一起发给 Codex：
卡片 · Spotlight Card：指针光晕。来源：React Bits 官方预览。
查看动效短片
文字 · Blur Text：文字逐步清晰。来源：React Bits 官方预览。
查看动效短片
这一节的结果： 页面结构、内容和视觉已经完整。现在把网站放到服务器。
09｜让 Codex 把网站放到服务器
本地预览还不是公开网站。接下来把它放到 VPS，别人才能通过域名访问。
我们在自己的电脑上完成构建，再把生成的网站文件上传到 VPS，服务器负责对外提供页面。文章、作品与邮箱链接适合这个静态方案；需要登录、数据库或收件表单时，要另行接入服务。具体限制可由 Codex 参考 Next.js 静态导出说明处理。
这一节需要服务器连接信息。代码、文件上传、服务器配置和 HTTPS 证书都交给 Codex 处理；密码与私钥只通过当前工具支持的安全方式提供，不写进文章或公开项目。
把部署交给 Codex
提供连接信息，再检查正式网址
- 打开 VPS 服务管理页，找到公网 IP、系统、root 用户名和 SSH 端口，并确认已经保存好 root 密码。把这些配置及域名交给 Codex，发送上面的部署提示词。
- 按 Codex 的提示完成连接授权。由它在电脑上构建网站、上传导出文件，再配置服务器和证书；不需要在这台 1GB VPS 上编译整个项目。
- 如果需要在服务商控制台调整端口，让 Codex 先确认具体入口和要修改的项目。已开启 computer use 的 Mac 用户可让它操作网页；按本文路线使用的 Windows 用户再逐项自己点。网站通常需要开放 80、443，原有 SSH 连接端口要保留。
- 等 Codex 给出正式网址，自己在浏览器打开，确认名字、头像和作品正确，再点几个内页。
- 如果打不开，把网页错误和 Codex 的部署结果一起交回去，让它继续检查，不要自行重复修改 DNS。
这一阶段先保持灰云，用浏览器信任的证书（例如 Let’s Encrypt）检查网站。域名验证和证书申请交给 Codex，依据见 Let’s Encrypt 官方说明。普通浏览器默认不信任 Cloudflare Origin CA 证书，不适合用它做这一步的直接验收。
若当前 Codex 环境没有服务器连接能力，需要先换到能执行终端、连接服务器的环境。这一步不能只靠聊天回答完成。
这一节的结果： Codex 已验证源站 HTTPS，你也能通过自己的域名看到网站。下一节再开启 Cloudflare 代理。
10｜开启 Cloudflare 代理，完成两段 HTTPS
先让 Codex 确认服务器的 HTTPS 已完成，再开启 Cloudflare 代理。只看到 Cloudflare 的证书显示 Active，还不能说明整个网站已正常。
Mac（已开启 computer use）：切换与验收交给 Codex
Windows（自行操作网页）：按三个入口核对
1. 设置 Full (strict)。 打开 Cloudflare 的对应域名，进入 SSL/TLS → Overview，点击 Configure。
选择 Full (strict)，点 Save，回到概览确认模式。所需的服务器证书检查由 Codex 完成，具体条件见 Cloudflare 官方说明。
2. 开橙云。 进入 DNS → Records，根域名 A 记录点 Edit，将 Proxy status 设为 Proxied，点 Save。列表应显示橙云。
3. 看边缘证书，再打开网站。 进入 SSL/TLS → Edge Certificates，确认 Universal SSL / Universal 证书为 Active。仍在签发时检查接入状态并等待，参考 Universal SSL 官方说明。
这一节的结果： 源站和公开 HTTPS 都可用，Cloudflare 为橙云代理，模式为 Full (strict)。
11｜最后检查一次，以后更新也按这个顺序
网站能打开之后，花几分钟以访客的方式使用它。首页可以正常，不代表每个链接、内页和手机布局都正常。
Mac（已开启 computer use）：让 Codex 完成一次上线检查
Windows（自行操作网页）：按访客的顺序检查
- 打开正式网址，看名字、简介和头像；确认没有原作者示例信息。
- 每个导航都点一次，进入内页后刷新；输入一个不存在的地址，应得到 404。
- 点击所有项目、文章、邮箱和社交链接。联系表单如果没有接收服务，就不能把它写成已可用。
- 缩窄浏览器，再用自己的手机打开网站，检查菜单、排版、动画和点击。电脑窄窗口检查不能完全替代真实手机。
- 把发现的问题具体描述给 Codex，让它修复后再构建与上传，检查线上结果。
以后更新也是：改内容 → 本地预览 → 构建 → 上传 → 线上检查。每次修改都让 Codex 检查后再上线，保留可恢复的旧版本。
遇到问题，把“正在做哪一步、网页截图、完整报错”一起交给 Codex，让它定位并修复。
做到这里，你就有一个属于自己的地址了。
第一版可以只有一段介绍、几个作品和一个联系入口。以后写了一篇文章、做了一个项目，再把它放进去。网站不需要一次做完，它可以跟着你一起更新。
