从不懂代码到自建网站

AI时代，任何人都有能力拥有自己的网站。

为什么想要开发网站？

你看到的这个网站的开发，总共用了不到一个月，目前已经处于一个基本可用的状态。在这一个月里，我也问过自己：如果只是为了写一点东西，微信公众号不可以吗？知乎不可以吗？而且不用花钱，写得好了还会有收益。当我真正把一个可以上线的版本搭起来后，我才发现，我确实想写一点东西，但是实现这个网站的过程，本身也让我感到了快乐，从一个完全没接触过网站开发的小白，到有了一个能够在互联网访问的网站，还是很有成就感的。

我是怎么一步一步搭建起这个网站的？

在AI时代，编程的入门门槛被拉到了很低的状态。只要愿意，任何人都可以用任何编程语言，编写属于自己的应用程序。但是AI不是许愿池，不可能一句话就直接变出来个网站，还是需要一些步骤的：

以上就是一个大致的开发步骤，可以看到，PRD文档贯穿了整个开发过程，设计文档、线框稿、可交互原型、本地开发，都是基于PRD文档生成的。作为人类，我们需要最终的结果可控，就需要一个贯彻到底的精确需求，这样AI才不会跑偏。这个流程也大致符合软件开发中的BDD（Behavior-Driven Development，行为驱动开发）流程。对于没有开发经验的人来说，这个流程可以在保证需求不偏离的情况下，快速上手AI开发。这里依旧需要强调的是，AI不是许愿池，需要不断地沟通，才能输出符合预期的结果。对于这个流程，每一个大步骤都可能需要很多次的审核->修改->再审核->再修改，才能有符合预期的结果。

技术栈

网站使用到的相关框架有：

1. 1. Astro：Astro 是一个现代化的 Web 框架，用于构建静态网站，是整个网站的核心框架；
2. 2. Tailwind CSS：Tailwind CSS 是一个 utility-first CSS 框架，它允许你使用类来生成用户界面，所有外形相关的样式都基于这个技术栈；
3. 3. Shiki：Shiki 是一个基于 VS Code 的语法高亮库，用来实现博客中的代码块，比如：

def hello_world():    print("Hello, World!")    returndef main():    hello_world()    returnif __name__ == "__main__":    main()

1. 4. Giscus：Giscus 是一个开源的评论系统，最下方的评论就是基于Giscus实现的；
2. 5. Cloudflare Workers：Cloudflare Workers 是 Cloudflare 的一个服务，可以免费提供 CDN 加速及 DDOS 防护，本站的博客观看次数就是基于该服务实现的；
3. 6. Vercel：Vercel 是一个基于 Next.js 的静态网站托管平台，可以免费使用。本站就是托管在Vercel上的；
4. 7. nodemailer：nodemailer 是一个 Node.js 邮件发送库，可以发送邮件，目前用于发送邮件给站长。

开发工具及模型

AI工具

简单讲一下我使用的开发工具，目前市面上主流的AI开发工具有两种，一种是IDE形式的，例如Cursor、Trae等，还有一种是Agent形式，例如Claude Code、Codex、Kimi Code等，本网站的开发主要使用了Claude Code和Trae进行开发，少量使用了Kimi Code和Codex。

关于工具的下载不多赘述，随便问问大模型就可以了解下载的方式，对于新手而言，Trae是比较容易获取和上手的一个工具，但是就实际效果来看，并不是一个很好的选择，在我的开发过程中，主要使用DeepSeek-V4-Pro作为基座模型，Trae的缓存命中率最高只有66%，但是Claude Code可以达到95%以上，如果你习惯通过API调用模型，Claude Code和Codex都是比较好的选择。推荐Trae的原因是字节目前提供了免费的模型（GLM-5.1、DeepSeek-V4-Pro等），而且不用过多配置和学习即可上手，算是入门的首选。

模型

网站开发使用的模型很多，我分阶段来讲：

• • PRD阶段：只使用了DeepSeek-V4-Pro，因为只是文档需求，不涉及其他内容，就使用了免费的网页版进行对话生成；
• • 设计阶段：同样只使用了DeepSeek-V4-Pro，因为不涉及很多的增删改查，仅需要设计文档及线框稿文档即可，这些网页版都可以满足；
• • 原型阶段：由于需要生成多个风格进行对比，一共使用了7个模型，分别是：DeepSeek-V4-Pro、GLM-5.1、GLM-5V-Turbo、Kimi-k2.6、MiniMax-2.5、MiniMax-2.7和Qwen3.6-Plus；
• • 开发阶段：前期使用了Trae内置的GLM-5.1、Kimi-k2.6和DeepSeek-V4-Pro进行开发，后期主要通过API调用DeepSeek-V4-Pro进行开发，部分debug由GPT-5.5和Kimi-k2.6完成。

当前版本已经实现的功能

基本功能

网站的基本架构：五大页面（首页、博客、作品集、关于、联系）基本功能已经全部开发完成，所有可交互组件均可正常访问：

1. 1. 首页：包含Hero组件，核心能力展示、项目展示、最新作品以及页脚
2. 2. 博客：包含博客列表、博客详情、博客分类、博客排序
3. 3. 作品集：包含作品集列表、作品集详情、作品状态
4. 4. 关于：包含个人简介、工作经历、技能展示、项目展示、联系信息、简历打印等
5. 5. 联系：包含表单、邮件发送功能

除此之外，网站增强了对P3色域的支持，支持的设备可以有更好的色彩体验

博客

实现了博客封面、分类、排序、详情、评论功能。对于博客详情页，实现了评论、目录、点赞、分享等功能

作品集

实现了作品集列表、作品集详情、作品状态功能。对于作品集详情页，实现了GitHub链接跳转、在线演示链接预留接口、项目文档跳转链接等。

未来的开发计划

目前网站的状态已经可以基本使用，但是仍有很多功能不完善，这里也暂时列一些目前想到的计划吧：

待实现的功能：

• •优化评论区样式，使博客详情页整体更加美观；
• •增加原生汉/英双语支持，以及依托AI的多语言支持；
• •增加基于AI的搜索功能
• •增强网站对HDR的支持