这个网站，是我和 ChatGPT 一路聊出来的

最近，我把自己的个人网站搭了起来，就是你现在正在看的这个。

这次建站的过程，我觉得挺值得记录一下。从最开始的设计，到后面的开发、修改、搬运旧文章，再到发布和加上访问统计，基本都是通过和 AI 聊天完成的。

前期主要用 ChatGPT 商量方案，后面在 Codex 里让它写代码、改页面，也让它操作浏览器和处理发布。我的做法很简单：告诉它我想做什么，做完以后看一看，有问题就接着说。

网站当然也经过了不少修改。电脑上看着还行，手机上发现不对；文章搬过来了，图片和格式又需要处理。今天就顺着这几个过程，聊聊这个网站是怎么做出来的。

一、先想清楚，网站里要放什么

买下 dalithink.ing 这个域名以后，我就去问 ChatGPT：我买了一个域名，请帮我规划一下。

它给了不少建议。可以放个人介绍、文章、做过的项目，也可以加上合作方式和最近在忙什么。

这些方向都可以考虑，不过第一版还是要做点取舍。我已经发过一些文章和视频，那就先把这些内容放好，让大家能方便地找到，也能了解一下我。

所以网站先做了首页、文章、视频和关于页。展示项目、增加联系表单这些想法，后面有需要再加。

页面的样子也是慢慢聊出来的。先定一个简洁的方向，再看实际效果，调整颜色、留白和图标。比如图标不统一，就让它换成同一个图标库里的标准图标；页面上的文字不太像我平时说的话，就继续改。

还有一件事，我觉得在建站的时候就应该想好：以后怎么发新文章？

我平时就在用 Obsidian 写 Markdown，所以网站也沿用这个习惯。文章还是一个个文件，标题、日期和摘要写在文件开头，图片放在旁边的附件目录里。

技术上，用 Astro 把这些文件变成网页，Tailwind CSS 负责页面样式。对于日常写作来说，我主要关心的就是：写好文章、放好图片，网站能把它们显示出来。

这样以后更新内容，就能继续用自己熟悉的方式。网站的文章和图片单独放好，也方便和其他日常笔记分开。

二、页面做出来以后，就边看边改

有了第一版，接下来的事情就很直观了。打开页面，哪里觉得不舒服，就把哪里指出来。

比如首页一开始放了“阅读文章”和“浏览视频”两个按钮。但往下看，文章和视频已经在那里了，还挺显眼。这两个按钮放在这里，就有点重复。

于是我直接告诉它：

根据实际对话整理：

视频和文章在下面都有，这里可以链接到关于页。但不要只写“关于”两个字。以后我可能还会在那里加一个联系表单。

最后，这个位置变成了“认识一下我”。点进去，可以看到我的介绍，也能找到联系方式。

手机上需要改的地方更多。比如首页的一句话换行了，视频标题太大，显示不全，还有封面中间那个播放按钮，把图片挡住了不少。

根据实际对话整理：

首页这句话在手机上会换行，字号可以缩小一点。视频卡片的文字看不全，播放按钮也挡住了封面，都调整一下。

把这些问题告诉 Codex，它就会去改。改完以后，我再打开看看，觉得还有哪里不合适，就继续说。

菜单也是这样。先发现手机上找不到导航，就让它补上；补完以后觉得位置不顺眼，再挪到最右边。

这里有个很实际的体会：问题说得具体一些，AI 才更容易改到你想要的地方。

同样是修改页面，只说“优化一下”就很宽泛。告诉它“标题看不全”“按钮挡住了封面”“这里和下面的内容重复了”，它就知道要解决什么。

我可以直接在页面上标出位置，再补上自己的想法。Codex 改代码、做检查，我看页面、提意见，网站就这样一点点改了下来。

三、把旧文章搬过来，细节还真不少

页面有了，接下来要把内容放进去。

我以前在公众号发过一些文章。以后我希望先在自己的网站发布，再同步到公众号。但现在得反过来，先把公众号上的旧文章搬过来。

这件事，我也是先去问 Codex：有没有合适的工具，能帮我把这些文章批量搬到网站上？

讨论和试过之后，我们用到了一个叫 MagicMD 的工具。它负责把网页里的文章转成 Markdown，Codex 再写脚本，把结果整理成网站需要的样子。我把要迁移的文章链接整理好，它就可以按这份清单去处理。

真正做起来才发现，搬文章有不少细节要处理。

文字复制过来，标题、日期和封面也要跟过来。公众号页面上的一些按钮、无关链接和多余的内容，则要清理掉。否则在网站里读起来，就会很奇怪。

图片也得单独处理。我们把文章里的图片下载下来，放到网站自己的目录里，再让正文使用这些图片。搬完以后，还要打开文章看一遍，确认图片都能显示。

还有重复的问题。同一篇文章已经搬过一次，下次再执行，不能又多出一篇。如果网站里已经有同标题、同日期的文章，但正文不同，也不能直接把原来的盖掉。先保留网站里的版本，把不同的地方记录下来，再由我决定怎么处理。

这些要求提前说清楚，后面需要重新执行的时候，心里也更有底。

搬完以后，我还清理了一批公众号里的贴图短内容。有些内容就是一张图，加上几句话，在公众号里发没什么问题，但放到网站里单独作为一篇文章，就显得太单薄了。

所以我把这些内容列出来，让 Codex 把文章和对应的图片一起清理掉。到底哪些值得留下，还是要自己看一遍。

文章里还有不少代码。读起来要清楚，复制起来也要方便，于是又让它加了代码高亮和一键复制。加完以后，发现选中的文字颜色太深，和背景混在一起看不清，再接着改。

这些小问题，用几篇占位文章不一定能看出来。真正把自己写过的内容放进去，才知道哪里还需要调整。

另外，我还调整了文件的命名方式。文件名用“日期加中文标题”，方便在 Obsidian 里找；文章的网址则单独用一小段英文来表示。这样以后改标题、改文件名，已经发出去的网址也能保持不变。

B 站的视频也做了同步。标题、简介和封面会整理到网站里，后续主要补充新发布的视频。我自己改过的内容会保留；如果暂时连不上 B 站，也可以先用已经保存好的内容生成网站。

做到这里，文章和视频就都陆续有了。以后继续更新，也有了比较省事的办法。

四、做好以后，还得让大家能打开

网站在自己电脑上能看，接下来就要发布到网上。

这个网站的做法是：把代码和文章保存到 GitHub 的私有仓库，再由 Cloudflare Pages 生成网页、发布出去。以后有修改，推送到仓库，网站就会重新构建。

如果你没接触过这些，可以把它理解成：先把修改交上去，再由托管平台把新版网站准备好，让大家通过域名访问。

这些事情也可以继续交给 Codex。我告诉它，帮我检查一下项目、整理好目录，然后提交并推送。它就会去做相应的操作，也会检查代码有没有报错。

过程中也遇到过页面打不开的情况。比如本地服务看起来已经启动了，打开网页却报错，那就让它继续查原因，重新启动，再确认能正常访问。

发布以后同样要看一眼。电脑上的预览、提交到仓库的代码、正式网站上的页面，是几个不同的地方。前面改好了，还要确认最后一步真的成功了。

发布完成以后，还要检查正式网站：新内容出来没有，文章能不能打开，图片有没有丢。这些都确认了，这一次修改才算做完。

五、加个访问统计，还顺手修了个网络问题

网站上线以后，我又想给它加一个访问统计，看看有没有人来，大家都在看什么。

于是继续告诉 Codex，帮我接上 Google Analytics，也就是谷歌的网站统计工具。

代码上的改动并不多：在网站里加上统计脚本，再填好对应的配置。但实际操作时，先遇到的问题是，Google Analytics 的管理页面打不开。

查了一下才发现，是我本地的网络设置影响了访问。有些统计相关的域名被过滤了，还有些域名解析不对。简单理解，就是有的请求被挡住了，有的请求没找到正确的地址。

既然卡在这里，那就先把网络修好。我让它继续排查，调整对应的配置，确认管理页面能正常打开，再回来完成统计的申请和设置。

之后，把统计需要的配置填好，再把网站重新发布一次，检查有没有生效。

怎么确认？可以先用 Google 提供的安装检查，看看能不能找到网站上的统计代码。然后实际访问网站，到实时报告里看一眼，是否收到了这次访问。

这次，安装检查找到了网站上的统计代码，实时报告里也出现了测试访问。

目前加上的是基础访问统计。以后如果想知道某个按钮有多少人点击，再针对这个问题补充就行。

这一段过程让我觉得很有代表性。原本只是想给网站加个功能，中途遇到网络问题，就先把网络问题解决，再回来把功能做完。整个过程，仍然可以在对话里继续。

六、这次做完，我最大的感受

回头看，做一个网站要处理的事情确实挺杂。

页面怎么摆，手机上怎么看，旧文章怎么搬，图片放哪里，做好以后怎么发布，出了问题又怎么查。以前说起 AI 编程，可能很容易只想到写代码，但这次我在这些环节里都用上了它。

我觉得最有意思的，是这些事情都可以通过聊天一步步做下去。

有想法，就先商量；做出来了，就打开看；哪里不对，就指出来继续改。需求也可以在这个过程中慢慢补充，不必一开始就把所有细节都想完。

当然，我自己做过开发，这些经验仍然有用。看它给出的方案时，我大概知道应该注意哪里。比如文章不能随便覆盖，图片要检查，代码推送了以后，还得看看网站有没有真的更新。

页面好不好看，文字像不像自己，哪些内容值得留下，也需要自己判断。AI 能帮我做很多具体的事，我也得把要求说明白，把做出来的东西看清楚。

这次实践让我对用 AI 做个人项目，多了一些实际的感受。先把最需要的部分做出来，用起来，再根据遇到的问题继续改，这样的网站也能慢慢完善。

后面我还会在这里继续发文章、放视频，记录自己感兴趣的东西。这篇文章，也算是给这次建站留一个记录。

文中对话根据实际记录整理，账号、内部地址和相关标识已作脱敏处理。