从不懂代码到自建网站

前端开发
2026-05-26
8 分钟阅读
0 次浏览
Astro前端网站开发
从不懂代码到自建网站

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

为什么想要开发网站？

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

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

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

plaintext
graph TB
    subgraph 第一阶段_需求定义
        A1[明确需求] --> A2[AI编写PRD文档]
        A2 --> A3{审核验证}
        A3 -->|通过| D1[PRD文档]
        A3 -->|不通过| A2
    end

    subgraph 第二阶段_设计规划
        D1 --> B1[AI编写设计文档]
        B1 --> B2{审核验证}
        B2 -->|通过| D2[设计文档]
        B2 -->|不通过| B1
    end

    subgraph 第三阶段_原型设计
        D1 --> C1[AI生成线框稿]
        D2 --> C1
        C1 --> C2{审核验证}
        C2 -->|通过| D3[线框稿]
        C2 -->|不通过| C1
        
        D3 --> E1[AI生成交互原型]
        E1 --> E2{审核验证}
        E2 -->|通过| D4[可交互原型]
        E2 -->|不通过| E1
    end

    subgraph 第四阶段_开发实现
        D1 --> F1[AI生成开发代码]
        D4 --> F1
        F1 --> F2{审核验证}
        F2 -->|通过| D5[本地代码]
        F2 -->|不通过| F1
    end

在写这篇文章时，我才发现我的博客还不支持Markdown的图表功能，但是不到半个小时，我就用AI完成了这个功能的开发。

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

技术栈

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

  1. Astro：Astro 是一个现代化的 Web 框架，用于构建静态网站，是整个网站的核心框架；
  2. Tailwind CSS：Tailwind CSS 是一个 utility-first CSS 框架，它允许你使用类来生成用户界面，所有外形相关的样式都基于这个技术栈；
  3. Shiki：Shiki 是一个基于 VS Code 的语法高亮库，用来实现博客中的代码块，比如：
python
def hello_world():
    print("Hello, World!")
    return 
def main():
    hello_world()
    return 
if __name__ == "__main__":
    main()
  1. Giscus：Giscus 是一个开源的评论系统，最下方的评论就是基于Giscus实现的；
  2. Cloudflare Workers：Cloudflare Workers 是 Cloudflare 的一个服务，可以免费提供 CDN 加速及 DDOS 防护，本站的博客观看次数就是基于该服务实现的；
  3. Vercel：Vercel 是一个基于 Next.js 的静态网站托管平台，可以免费使用。本站就是托管在Vercel上的；
  4. 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等），而且不用过多配置和学习即可上手，算是入门的首选。

模型

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

当前版本已经实现的功能

基本功能

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

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

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

博客

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

作品集

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

未来的开发计划

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

待实现的功能：