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

请协助把域名【填写】接入Cloudflare，选择Free计划。
注册商是阿里云，服务器IPv4是【填写】。
核对已有服务记录，按页面分配的两条NS接入，不重复修改一致的设置。
创建或核对根域名A记录，首次部署先用DNS only。
用电脑操作完成页面步骤，遇到登录、验证或影响已有业务的变更交给我。

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：

   • Type：A
   • Name：@，表示根域名
   • IPv4 address：自己 VPS 的公网 IPv4
   • Proxy status：首次部署先用 DNS only，也就是灰云
   • TTL：Auto 或默认值

   保存后核对 IP。作者截图中的代理是橙云，因为原网站已经部署；你此时先用灰云，等第 09 节的源站 HTTPS 完成再开。

   

   如果域名以前连过网站或邮箱，把已有记录交给 Codex 核对，不要随手删除。这里先使用根域名；需要同时支持 www 时，也一起告诉 Codex。

这一节的结果：Cloudflare 接入 Active，根域名 A 指向你的 VPS，首次部署为灰云。两条 NS 要复制自己的；示例 IP 也不能照抄。

03｜把模板交给 Codex，先跑起来

这里开始做网站。先让 rbp-portfolio 模板在电脑上打开，再一点点改成自己的。先别急着加动画。

把仓库链接和存放位置告诉 Codex，让它创建项目、准备环境并启动预览。Mac 和 Windows 都按下面做。

把 GitHub 链接交给 Codex

请下载并跑通这个个人网站模板：
https://github.com/DavidHDev/rbp-portfolio
请在【填写目录】创建项目文件夹。
帮我检查并准备环境、安装依赖、修复报错，完成类型检查与构建。
如果锁文件或依赖版本不兼容，请修复后重新验证，记录修复。
外部字体下载失败时先换用本地或系统字体，不让下载阻塞构建。
暂时保留模板布局，不加新动效。
启动本地预览，给我可以在浏览器打开的地址。

等它跑通，再打开预览

发送上面的提示词，填写项目要放的位置，并说明你使用 Mac 还是 Windows。创建文件夹、下载项目、安装和启动都由 Codex 完成。

等 Codex 给出本地网址，复制到浏览器地址栏打开。

点一下首页、关于和项目。打不开时，把错误提示或截图交给 Codex，让它继续修复。

复查时，这个模板遇到了依赖和构建问题，修复后才在本地跑通。后面的一组背景、导航、光标、文字和卡片组件也完成了本地验证；新 VPS 从零部署、Windows 实机和真实手机还未完成实测。遇到报错，把完整错误交给 Codex，修复后再继续。

这一节的结果：模板在你的浏览器里能打开。这个本地地址还不是公开网站。

04｜给它框架，再把你自己的信息放进去

模板有了，下一步先决定访客能看到什么。首页用一句话介绍自己，项目解释你做过什么，文章展示你的思考，联系方式让别人知道如何找到你。

可以从这个框架开始：

• 首页：一句话介绍、头像和主要入口。
• 关于我：经历、技能和简介。
• 项目：作品介绍、图片与演示链接。
• 文章：文章标题、简介与链接。
• 联系：邮箱和愿意公开的社交账号。

模板没有的栏目，让 Codex 按你的资料补上。没有文章就先隐藏文章入口，联系先用邮箱或社交账号。

资料和框架一起交给 Codex

请把模板改成我的个人网站，结构是：首页、关于我、项目、文章、联系。
没有文章就先隐藏文章入口，联系先用邮箱或社交链接。
我的资料：【姓名、简介、头像、项目、文章、公开联系方式】。
正式域名：【填写】；风格偏好：【填写】。
替换原作者示例资料，不编造经历，缺少的信息问我。
先完成内容、导航和手机布局，暂时不加新动效。
同步替换页面标题、分享信息、站点地图与示例域名。
补齐图标、分享图片；移除失效的资源引用，检查页面请求有没有404。
改完检查构建，给我本地预览地址。

打开预览，检查自己的内容

整理姓名、介绍、头像、项目、文章和联系方式。可以直接粘贴给 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 替换原背景，避免两套效果叠在一起。

   请把下面的React Bits组件接入【首页/整站】，替换原背景。
   按项目使用的TypeScript与样式方案适配，处理客户端组件与依赖。
   颜色与强度：【填写】；代码、依赖和报错由你处理。
   保证文字清楚、按钮能点击，手机与减少动态效果模式可降级。
   完成后检查构建，给我本地预览地址。
   【粘贴Copy for AI结果，或完整代码与安装说明】

这一节的结果：背景已经在你的网站里生效，文字依然清楚，页面仍能正常点击。

06｜再选导航，让访客知道往哪里走

导航负责把人带到关于、项目、文章和联系。看起来好玩，也要让人一眼知道每个入口是什么。

选一种导航，保留自己的栏目

回到 React Bits 目录，在 Components 分类搜索 Pill Nav、Dock 或 Card Nav，打开组件页看 Preview。

想先保留清楚的文字菜单，可以考虑 Pill Nav；Dock 适合少量入口，别让图标含义完全靠猜。Card Nav 适合更丰富的展开内容。

在 Code 页使用 Copy for AI，或复制完整代码与安装说明，交给 Codex。告诉它「用这个替换现有导航，保留我的栏目与链接」。

在本地网站点完每个导航项，再把窗口缩窄检查菜单。导航挡住标题、入口过小或点击错位，就反馈给 Codex 修复。

把下面的提示词和组件资料一起发给 Codex：

我选了React Bits的【导航名称或链接】，请替换当前导航。
保留我的栏目与链接，不叠加两套导航。
代码和依赖由你处理，手机上也要能操作。
检查每个入口与构建，改完给我本地预览地址。

导航 · Dock：指针经过时图标缩放。来源：React Bits 官方预览。

查看动效短片

这一节的结果：外观换了，原来的页面入口仍然完整可用。

07｜光标动效，挑一个就够了

光标适合增加一点反馈。它不是网站必需功能，尤其在手机上没有鼠标，不能让操作依赖这种效果。

挑一个光标效果，再检查点击

在 Animations 分类搜索 Target Cursor、Splash Cursor、Ghost Cursor 或 Ribbons，先在 Preview 移动鼠标观察效果。

选择一个，用 Copy for AI 或完整代码与安装说明交给 Codex，注明启用范围和手机降级要求。

在自己的本地网站移动鼠标并点击导航、卡片和联系按钮，确认效果没有拦截操作。

如果鼠标跟随太夸张，先减强度，或直接移除。光标给网站加分的前提是操作仍然轻松。

把下面的提示词和组件资料一起发给 Codex：

请接入React Bits的【光标效果名称或链接】。
代码、依赖和兼容问题由你处理，效果不要挡住点击。
手机和减少动态效果模式保留普通交互。
处理目标元素标记与类型兼容，检查导航、按钮、卡片和构建，给我预览地址。

光标 · Target Cursor：围绕交互目标的反馈。来源：React Bits 官方预览。

查看动效短片

这一节的结果：桌面交互有反馈，手机仍能直接操作。

08｜用小组件补细节，让组合有取舍

背景、导航和光标确定后，再看文字、卡片、列表与微交互。可以按用途来选，不用把整个组件库装进网站。

• 背景 Backgrounds（Micro Slats、Aurora、Particles、Grid Distortion）：适合放首页主视觉或整站底层；一个主背景，避免抢正文。
• 导航 Components（Pill Nav、Dock、Card Nav）：适合放顶部或底部导航；保留清楚的栏目与手机菜单。
• 光标 Animations（Target Cursor、Splash Cursor、Ghost Cursor、Ribbons）：适合放桌面交互；通常只选一个，触屏降级。
• 文字 Text Animations（Blur Text、Split Text、Text Type、Scroll Reveal）：适合放首屏标题、少量段落入口；长正文保持稳定可读。
• 卡片与作品 Components（Spotlight Card、Tilted Card、Circular Gallery、Animated List）：适合放项目、文章、作品展示；Gallery 是作品浏览，不替代主导航。
• 微交互 Micro / Animations（Spring Check、Hold Button、Click Spark、Magnet）：适合放按钮、反馈、选择控件；先有真实功能，再加效果。

如果还没决定怎么搭，可以先从 Aurora 背景、文字导航、Spotlight Card 项目卡片和少量 Blur Text 开始，光标先不加。文字入口容易辨认，卡片效果集中在作品区，访客能先看清你的内容。喜欢其他效果，再逐项替换。

一次只接入一项

按上表选择用途，打开组件页，先看 Preview。

切 Code，用 Copy for AI 或完整代码与安装说明交给 Codex，并说清楚「项目卡片用 Spotlight Card」「首屏标题用 Blur Text」这样的落点。

让它改完一项就给本地地址，自己打开检查。没有问题后再接下一项。

最后统一颜色与间距。如果每个组件都用各自默认色，整站容易像几个演示页面拼在一起。

把下面的提示词和组件资料一起发给 Codex：

请依次接入这些React Bits组件：【名称、链接、放置位置】。
一次完成一项，检查后再继续；重复效果先说明取舍。
整站统一颜色、字体与间距，代码和依赖由你处理。
完成后检查手机、链接和构建，打开预览。

卡片 · Spotlight Card：指针光晕。来源：React Bits 官方预览。

查看动效短片

文字 · Blur Text：文字逐步清晰。来源：React Bits 官方预览。

查看动效短片

这一节的结果：页面结构、内容和视觉已经完整。现在把网站放到服务器。

09｜让 Codex 把网站放到服务器

本地预览还不是公开网站。接下来把它放到 VPS，别人才能通过域名访问。

我们在自己的电脑上完成构建，再把生成的网站文件上传到 VPS，服务器负责对外提供页面。文章、作品与邮箱链接适合这个静态方案；需要登录、数据库或收件表单时，要另行接入服务。具体限制可由 Codex 参考 Next.js 静态导出说明处理。

这一节需要服务器连接信息。代码、文件上传、服务器配置和 HTTPS 证书都交给 Codex 处理；密码与私钥只通过当前工具支持的安全方式提供，不写进文章或公开项目。

把部署交给 Codex

请将当前个人网站部署到我的VPS，使用静态网站方式。
域名：【填写】；服务器IP：【填写】；系统：【填写】；SSH端口：【填写】。
先确认连接方式；需要密钥时帮我准备，并指导我完成授权，不把密码写入项目。
在本地配置静态导出，处理图片、站点地图和路由兼容，构建通过后上传导出文件。
构建器持续阻塞时先定位原因，必要时使用兼容的构建方式，不跳过类型检查。
检查现有服务，配置Nginx，保留已有业务与可恢复的旧版本。
确认域名解析到此IP、保持DNS only，并检查服务器与服务商的80、443端口。
先验证HTTP，再申请浏览器信任的HTTPS证书，配置并测试自动续期。
验证内页刷新、图片、404、公开HTTPS与源站证书，暂不切换Cloudflare代理。
给我可访问的地址，汇报实际完成和仍待处理的步骤。

提供连接信息，再检查正式网址

打开 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

源站HTTPS已经完成，请用电脑操作打开Cloudflare域名【填写】。
设置Full (strict)，将根域名A记录改为Proxied并保存。
核对Universal SSL是否Active，再检查公开网站和源站HTTPS。
有问题继续排查，不只根据证书状态判断成功。

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 完成一次上线检查

请用电脑操作检查我的正式网站【网址】。
检查页面、导航、图片、外链、HTTPS和手机布局，清理模板占位信息。
发现问题先修复再部署，并复查结果。
告诉我以后如何更新网站，汇报尚未验证的部分。

Windows（自行操作网页）：按访客的顺序检查

打开正式网址，看名字、简介和头像；确认没有原作者示例信息。

每个导航都点一次，进入内页后刷新；输入一个不存在的地址，应得到 404。

点击所有项目、文章、邮箱和社交链接。联系表单如果没有接收服务，就不能把它写成已可用。

缩窄浏览器，再用自己的手机打开网站，检查菜单、排版、动画和点击。电脑窄窗口检查不能完全替代真实手机。

把发现的问题具体描述给 Codex，让它修复后再构建与上传，检查线上结果。

以后更新也是：改内容 → 本地预览 → 构建 → 上传 → 线上检查。每次修改都让 Codex 检查后再上线，保留可恢复的旧版本。

遇到问题，把「正在做哪一步、网页截图、完整报错」一起交给 Codex，让它定位并修复。

做到这里，你就有一个属于自己的地址了。

第一版可以只有一段介绍、几个作品和一个联系入口。以后写了一篇文章、做了一个项目，再把它放进去。网站不需要一次做完，它可以跟着你一起更新。