从我还在读大学的时候，受到了不少国外设计师的影响，我一直希望有一个自己的个人网站，但是在那个时候，没有 AI，你想要拥有自己的个人网站，你要么选择使用像 Wix 这样的低代码平台，要么自己开发编程，从域名到部署，全都是问题。

但是好在 2026 年了，AI 搭配 Agent 能力已经非常强大，终于我可以实现自己的梦想，制作一个个人网站，这篇文章就是我制作网站的全部流程，也欢迎你继续浏览我的个人网站：https://niallspace.com/?lang=cn。

最开始我就说了一句话："我想做一个个人网站。"真的只有这一句，简单到这种程度。然后我把 Wolai 里跟自己有关的链接都丢给 Codex，我们就开始聊。

这个项目断断续续做了半个多月吧。忙的时候我每天早上九点多开始，一直做到凌晨两点多。最后主站、博客、数据后台和部署都弄好了，我跟 Codex 说的话又变得很简单："帮我部署。"

开头和结尾只有两句话，中间做的事情很多。内容要自己选，设计要自己做，页面要一遍遍看。到了服务器、OSS 和 RAM 权限这些地方，我完全不懂，只能把页面截图给 AI，它说一步我做一步。网站里具体有什么，这篇不展开介绍，我主要想把制作过程写下来。

从一句话到网站框架

我已经有很多内容了，为什么还要做网站

我的 Wolai 里已经放了很多东西，知识库、博客、做过的 Vibe Coding 项目、AI 工作流、自己做的 Skill、设计项目复盘，基本上我平时会记录的都在里面，前后有几十万字。不过 Wolai 更适合我自己看。页面可以分享，打开以后还是文档，别人从哪里开始看、接下来去哪里，我控制不了多少，个人审美和形象也很难靠一串文档链接表达。我一直很喜欢国外一些创作者的个人网站。网站里会有他的作品、文章和想法，页面本身也能看出这个人的审美。我也一直想有一个自己的个人站和博客，只是以前想到开发、服务器这些东西就没有继续。这次有 Codex，我先跟它聊了聊。最开始只说个人网站，后面慢慢聊成了一个个人集合，里面会有首页、作品、关于、工作流、博客，还有我做过的其他东西。这些内容以后要继续更新，那就需要服务器，也要做动态网站。

先让 Codex 读懂我手上的资料

方向差不多以后，我把 Wolai 链接发给 Codex。Wolai 有官方 MCP，我配置好以后，Codex 可以直接读取页面，不用把几十万字重新复制过去。它能看到我的博客、项目和复盘，至少不会只根据"我想做个人网站"这句话随便猜。Wolai 在这里就是我的资料来源，没有什么必须照着用的。换成 Notion、飞书、语雀、本地文件都可以。手上没有文档，也可以先把做过的项目发给 AI，让它接着问。资料能读以后还有一个问题，这么多东西到底放哪些。我用了 DB Skill，让它从这些内容里找跟网站有关的部分，帮我梳理网站的目的、我想展示什么、首页应该先让别人看到什么。

DB skill 获取链接：https://github.com/dontbesilent2025/dbskill

DB Skill 做筛选，Canvasight 排结构

DB Skill 处理完，我用 Canvasight 继续整理。首页、作品、关于、工作流怎么分，页面里写什么，哪些内容单独做页面，哪些先放一个入口，都在画布里排。Canvasight 处理的是结构，DB Skill 前面做的是筛选，这两个作用不太一样。画布整理完以后，我直接让 Codex 做了一个原型。挺丑的，说实话。不过网站框架基本都有了，首页、作品、关于、工作流，还有第一版文案。我把这些页面点了一遍，改入口顺序、改文案，也删掉了一些放进网站以后没什么意思的内容。那时候我没准备一次把全部内容都做成网页，很多入口还是直接跳到 Wolai。先把主站做出来再说。

Canvasight 获取链接：https://github.com/Niall-Young/Canvasight

从丑原型到正式设计

原型只用来确认内容和范围

第一个原型没有马上推翻。我先把能点的地方都点一遍，看页面有没有漏，入口顺序对不对，文案放到页面上以后还通不通。改动变少以后才进入 Figma，这样不用一边画正式设计，一边继续猜网站里该放什么。那份丑原型也把后面的工作列清楚了，哪些页面要做、哪些内容暂时外跳、哪些组件会反复出现，都能提前看到。

参考网站和亮暗两套图片

我是设计师，视觉这部分还是自己来。我找了很多参考，包括 xAI、Cursor、Raycast、Dia，还有一些我很喜欢的个人设计师网站。网页截图都存在 Eagle 里，设计的时候放在旁边看。我没有选一个网站完整照着做，主要看它们怎么处理排版、留白、图片和交互。素材不合适的地方，我就用 Image 2 生成。网站有亮色和暗色模式，所以图片也准备了两套，切换主题的时候换成对应素材。提示词没什么要专门展开的，缺什么就按页面需要做什么。文章后面还要从 Eagle 里挑几张参考图，放在对应设计旁边，说明最后用了哪些东西。

先把 Figma 设计系统写成代码规则

我做设计比较工程化，会先搭变量、文本样式和组件，再画具体页面。Figma 里的设计做完以后，我先让 Codex 通过 Figma MCP 生成一份 design.md。里面有亮暗模式的颜色变量、字号、行高、圆角，也有 Button、Segmented、Link、Navigation、Footer 这些组件的信息。Figma 里的东西先变成代码侧的说明，后面开发的时候 Codex 可以直接查。

项目用 React。我告诉 Codex 图标库用 React Unicons，基础组件按 shadcn/ui 那种无头组件的方式做。顺序是先组件再页面，按钮、链接、导航这些先做出来，我看过以后再继续。组件完成以后，我在 AGENTS.md 里加了一条要求：Figma MCP 读到页面以后，必须使用项目里已经做好的组件和变量，不允许临时再做一个差不多的样式。

AI 做第一个页面时写一个按钮，做第二个页面又写一个，两个单独看都没问题，放到一起会有细微差别。现在组件先固定，页面只负责组合，亮暗模式也先在组件上检查。页面还原以后我看视觉问题，Codex 改代码、跑测试，再看有没有影响其他页面。这套 Figma 到开发的流程我以前写过一篇文章：《如何 Vibe coding 自己的精致产品和网站》。这次的网站也是按变量和样式、基础组件、具体页面这个顺序做的。

把主站放到服务器上

复用已经备案的域名和阿里云服务器

我以前已经有 niallspace.com 这个域名，ICP 备案也做完了。服务器用的是当时买的阿里云 ECS，所以这次没有重新买域名，也不用再等主域名备案。

Codex 直接操作，我负责账号和权限

服务器这部分基本是 Codex 配合 Computer Use 和 Chrome 带着我做。它可以处理没有安全问题的控制台操作。碰到登录、付款、密钥和授权，我自己点。页面看不懂就截图给它，直接问这个填什么、下一步点哪里。

我的处理方式很简单。操作目标清楚，做完能检查，失败以后也容易恢复，就让 AI 直接做。涉及付款、主账号、密钥和增加权限，我自己操作。风险看不懂就先停下来截图问。主站第一次跑到服务器以后，我们再配 SSL 和 HTTPS。域名先检查解析，服务再检查能不能访问，最后检查证书。看不懂的页面和配置结果，我会发给 Codex 看。

一句指令能执行，是因为前面已经配过一次

这里很多工作最后都能变成一句指令，第一次配置的时候还是要一项项做。Codex 可以操作，也可以告诉我怎么操作，最后网站能不能访问、页面有没有问题，我自己验收。后面再部署时，不需要从阿里云控制台重新走一遍，这也是最后一句"帮我部署"能执行的前提。

主站上线以后继续加东西

先用 Plan 模式做埋点后台

主站上线以后，我先做了埋点后台。我在 Plan 模式里跟 Codex 列自己要看的数据，比如别人点了哪些作品，哪些产品和资源有人打开，联系方式有没有人用，流量从哪里来。列完再做事件和后台。现在后台会记录页面访问，CTA、作品、产品、资源和社交入口的点击，还有联系方式打开、微信或邮箱选择、复制是否成功。后台放在 stats.niallspace.com，数据存在 SQLite 里，每天会备份。隐私相关的字段也在 Plan 里一起确认了，前台不用 Cookie 或永久访客标识，不保存原始 IP、完整 User-Agent 和完整来源网址，管理员登录单独使用安全 Cookie。这些东西我自己一开始想不到，Codex 列出来以后我再确认。

主站做好以后，Wolai 跳转开始显得割裂

最早的主站里，作品、博客和工作流很多都跳到 Wolai。这样做第一版确实快，主站做好以后再点进去，页面会突然回到 Wolai，前面做的排版、图片和阅读体验也没了。后来我就把这些内容全部改成了网页，最先做的是博客。我一开始还准备给每一类内容都做一个子域名，blog.、harness.、codex.、ai.，看着挺整齐。结果发现按我当时买证书的方式，每个都要再处理一张 SSL 证书，有点小贵，嘿嘿。最后都放到 doc.niallspace.com 下面，用 /blog、/harness、/codex 和 /ai 区分。它们共用后台、数据库和 OSS，内容按类型分开。

共用一套内容后台

内容系统用 Astro 做服务端渲染，React 处理交互，编辑器用 Tiptap，数据还是 SQLite。我给 Codex 的要求是几类内容共用后台、访问路径分开、继续用主站的设计，具体技术是它选的。Blog、Harness、Codex 和 AI 都在这一套系统里，发布内容时选择对应类型，前台再按路由显示。

文章导入从复制粘贴改成 Wolai API

这里面花时间比较多的是文章导入和 OSS 权限，大概弄了一个下午。最开始我想得很简单，在 Wolai 里 Cmd+A、Cmd+V，把整篇文章复制到后台，然后让 AI 做一个功能，碰到图片就自动传到 OSS。

结果图片上传失败了很多次。开始说是并发太多，我们就改并发，改完还是有问题。后来 AI 说复制出来的图片可能依赖 HTML 标签，或者拿到的是临时地址，还会碰到登录状态、跨域这些问题。具体是哪一层我现在也没有完全搞懂，反正复制粘贴这条路一直不稳定。

最后我在 Wolai 配了一个应用，拿到 API，再把它部署到服务器。现在我只需要在 Blogspace 后台贴文章链接，然后点导入。服务端会读取 Wolai 页面和下面的内容块，把正文重新组合起来，图片下载以后存到 OSS，最后生成一篇草稿。导入逻辑后来补了很多东西，同一张图片按内容复用，重复导入不会一直生成新文章，文本、标题、图片、列表、代码、表格、书签、分栏这些块也要分别转换。

导入完成以后我还是会预览一遍。Wolai 有些格式不完全是标准 Markdown，比如链接可以显示成卡片，转过来偶尔会不对。看完没问题再发布。Wolai 导入只是我自己的做法，用 Notion、飞书、语雀或者直接在后台写，导入方式都会变，没必要先换成 Wolai。

部署、权限和后续维护

代码和内容走两条发布流程

主站接着 GitHub。代码推到 main 分支以后，GitHub Actions 会自动打包，通过 SSH 上传到阿里云 ECS，再用 Docker Compose 更新服务并检查健康状态。应用只监听服务器本机端口，外部访问由 Nginx 接进来。

内容走另一条流程。我在 Blogspace 后台贴 Wolai 链接，导入以后预览，再发布。内容系统部署以前会先备份数据库，新版本健康检查失败会切回上一版。日常维护现在就是这两条路，主站有改动就推 main，文章有改动就在后台导入和发布，前面那些服务器操作不用每次重新做。

OSS 权限、密钥和备份

OSS 的 RAM 权限是在做文章导入时一起配的。我们单独建了一份凭据，只开放需要的 OSS 操作，没有使用阿里云主账号权限。密钥放在服务器配置里，不进 Git，也不出现在部署日志里。这些权限我一点都不懂，少勾了图片传不上去，多勾了又不知道放开了什么，只能一项项截图给 AI，让它告诉我应该怎么配。

埋点数据库每天做一致性备份，保留 30 个日备份和 12 个按月备份，目前还放在同一台 ECS 上。Blogspace 也会每天备份，配置以后可以上传到私有 OSS。主站有健康检查和历史发布目录，代码里还没有跟内容系统一样明确的自动恢复逻辑，这部分以后再补。

一年的费用和半个多月的时间

域名、阿里云服务器和 SSL 一年大概 300 多元。这个数字没有算 Codex、Figma、Eagle，这些是我本来就在用的订阅。时间也没有算进去，整个项目断断续续做了半个多月，忙的时候每天从早上九点多做到凌晨两点多。

很多技术我现在还是不懂。没有 Codex 的话，运维这一段我应该就不会继续做了。有了 AI 以后也要自己判断、截图、等它执行、看结果，失败了再换方案。

复盘

这个网站的很多决定都是做完上一步才出现的。原型做完以后继续改内容结构，主站做好以后把 Wolai 内容改成网页，复制粘贴一直失败以后再接 API。第一版先做出来，后面的问题才会出现。

回头看整个过程，顺序大概是：

  1. 先把自己的资料给 AI，资料多就筛，资料少就边聊边补；

  2. 整理网站结构，做一个能点的原型，再去做正式设计；

  3. 开发时把变量、组件和规则写清楚；

  4. 到了部署和权限这些地方，能让 AI 操作的让它操作，需要自己确认的就自己来。

至于资料的获取、信息梳理等等的工具，你都可以换成你自己喜欢的，Wolai、Canvasight、阿里云都只是我这次用到的东西。

我花的时间没有少，能做的事情多了很多。内容和设计是我原本会做的，开发和运维以前会直接放弃，这次靠 Codex 一点点做完。第一句话是"我想做一个个人网站"，半个多月以后，这个网站真的上线了。