来自 2025年的 Hello World

#AI #Web Development #Cloud Native #Windsurf

代码是 AI 写的，但文章不是

0 说在前面

0.1 动机和背景

在 ChatGPT 成熟之后，我一直在使用 Github Copilot 在工作中辅助开发,在足够多的项目代码中,我渐渐发现,需要我亲自去写的代码越来越少,更多的时间可以用于对业务的观察和思考、以及对架构和解决方案的设计和尝试。

在 Anthropic 推出 Claude Sonnet 3.5 后,Cursor 和 Windsurf 都推出了基于 Claude Sonnet 3.5/3.7 的 AI Agent 已经能满足大部分业务 PRD 文档转化成实际代码的能力。虽然 X 上的 GPT KOL 们仍然还在沉浸在使用 Agent 和 MCP 构建一个非常美观的界面来吃各大互联网大厂的桃色新闻瓜,但我相信,大部分经历过 PHP 和 jQuery 时代的全栈开发者,已经有能力通过精准的 Prompt 来控制 Sonnet 输出各种前后端代码来组合出一个非常棒的场景,暂时不管它是不是有业务场景,这都是一个非常棒的尝试。

在我十年的职业生涯中,我给每个我指导过的全栈开发者都布置过一个任务,用当下最新的技术栈来构建一个动态的博客,虽然一直以来市面上都有很多完善的解决方案,但是只有自己从编码开始,直到最后购买一个域名让博客上线,才能真正理解到背后的原理,这是对于找不到项目的初学者来说,最好的练手项目。到了今天,我想我也可以用这个题目来试验一下,以一个 Vibe Coding 的方式来构建一个动态的博客。

0.2 目标是什么

一个博客网站需要包含的东西很多,如果你经常在 Google 上搜索 Bug 时逛到了别人的网站,你会发现大部分的博客网站都包含这些：首页、关于我、作品集、文章, 可能根据作者的业务爱好,还有其他的页面比如播客、产品列表等等

其他的功能点都大同小异,我将会给出一个 TODO 列表,来显示目前的进度:

  • 博客文章列表及其筛选
  • Markdown 页面支持
  • 响应式设计
  • 深色模式支持
  • Google 搜索功能
  • SEO 优化
  • Google 分析集成
  • Logo 和网站图标
  • RSS 订阅支持
  • 多语言支持
  • About 页面

另一个目标是,在我尽可能少编写代码的情况下,最快速度完成这个网站的构建。

1 出发

1.1 请选择你的英雄

Next.js

我最近一直在用 Next.js 在我的工作中,这对于早些年经历过 PHP 流行年代的人来说,非常熟悉,这也是全栈工程师首选的框架之一。

对于我熟悉的语言和框架,我可以快速验证大模型生成的代码是否符合预期,对于不满意的结果,我可以快速修改 Prompt 或者直接修改代码来满足需求,而不是等待 AI Agent 来完成。

HeroUI (NextUI)

如果不想在样式上下功夫,也不想在CSS上浪费时间,选择一个组件库是最省事的,你可以假设大模型已经学习了 HeroUI 的样式和用法,直接让大模型帮你组装你需要的组件。

如何验证大模型已经学会了 HeroUI 的样式和用法? 你可以在 Cursor 或者 Windsurf 的 chat模式中,直接向它提问组件库文档中的内容,然后对比生成的代码是否符合预期。如果大模型回答不正确,那你可以在 Prompt 中直接粘贴文档地址、内容或者打开联网功能去搜索。

组件库：HeroUI

1.2 npm run dev

熟练的工程师可以通过 next 的 cli 来构建一个空项目,为了快速完成,我选择直接使用 HeroUI 的模版代码直接运行,在对齐部分 package.json 中的依赖版本之后,即可开始。

1.3 开始搭建博客

这里首选 Markdown 格式,可以先构建正文,再开始构建文章列表,为了列表页方便,我在 Markdown文件中增加了注释的 meta 内容,这也是大部分 Markdown 扩展的写法。

这里可以分两步进行,首先生成一些 markdown 文件：

参考 Prompt：

我需要在项目中创建一个 markdown 文件夹,来放我博客的文章,同时帮我生成一些不同内容的文件：
- 文件夹位置为 content/blog
- 仅支持标准 Markdown 语法
- 生成一些meta信息,包括
    1. title：文章标题
    2. date：文章日期,格式为 yyyy-MM-dd
    3. tags：文章标签,用逗号分隔
    4. description：文章描述
- 部分文章内容包含图片和外链等
- 需要支持代码块
- 内容不需要太长

这样就得到了一些测试的 Markdown 文件。

然后开始构建显示文章的页面

参考 Prompt：

我需要构建一个博客文章正文页面,满足如下要求：
- 文件夹位置为 content/blog/[slug],文件名作为URL：blog/[slug]
- 支持标准 Markdown 语法
- 文章内容样式适配 HeroUI 的 Dark 模式和切换功能
- 需要支持代码块高亮
- 需要支持图片和外链

Sonnet 在这里表现的还不错,生成的页面样式和内容都符合预期,剩下的就是调整样式和功能,比如在文章右侧添加目录显示和交互,同时添加文章的发布时间和标签。

有了文章的页面,接下来需要构建文章列表页。

参考 Prompt：

我需要构建一个博客文章列表页面,满足如下要求：
- 文件夹位置为 content/blog,列表页路由为 /blog
- 需要支持文章的筛选功能,包括日期、标签等
- 需要支持文章的目录显示和交互
- 需要支持文章的发布时间、标签和摘要显示

这里比较难以实现的是日期和标签的筛选功能,需要确保 Markdown 文件中的 meta 信息能够被正确解析。

1.4 RSS 订阅 和 SEO 优化

最简单的 RSS 订阅仅需要依赖一个 XML 文件通过 URL 访问即可,标准化的事情交给大模型再合适不过了。不过文章发布之前就生成静态的 XML 文件,可以避免重复生成,所以可以让大模型在文章发布之前运行生成 RSS 文件的方法:

"scripts": {
	"dev": "npm run rss && next dev --turbopack",
	"build": "npm run rss && next build",
	"start": "next start",
	"lint": "eslint . --ext .ts,.tsx -c .eslintrc.json --fix",
	"rss": "ts-node --project tsconfig.json scripts/generate-rss.ts"
}

当然 generate-rss.ts 的方法你可以直接让大模型帮你生成,不再需要手动编写。

SEO 优化只需要将文章的 meta 信息添加到页面的 head 标签中,同时可以添加网站的 sitemap.xml 文件,帮助搜索引擎爬虫抓取网站内容,没有人比大模型更擅长 SEO 优化了。

1.5 Google 分析集成

去 google analytics 创建一个分析账号,直接交给大模型去添加代码在项目中即可。

1.6 Google 搜索功能

当你完成了 SEO 优化之后,剩余的就交给 Google 搜索了,比起自己实现全站搜索,熟练使用搜索引擎的搜索功能的人都知道,keyword + site:域名 就可以搜索到你的网站内容,按照这个方式放大模型生成一个搜索框直接跳转即可。

1.7 About 页面

我想要同步 Github 上个人 README.md 的内容到 About 页面,你可以通过 https://raw.githubusercontent.com/[username]/[username]/main/README.md 获取内容直接用上面生成的 Markdown 转 HTML 的方法生成即可。

如果你想要复用上面渲染博客文章的方法,你可以在这之前让大模型帮你优化一下代码结构和层级,他会帮你完成归类和封装,然后你可以直接复用,封装效果比我做代码审查时候看过的代码要好很多。

1.8 i18n 支持

这是一个需要跨页面的配置,需要在项目中添加 i18n 配置文件,依次从外到里,将能看到的部分全部填充到配置文件中,分步骤替换。

对于上下文长度不够的大模型来说,先生成一个配置文件,然后再逐步替换每个页面的文本,也可以完成这个替换。

1.9 最后调整

功能性调整可以直接描述你想要的功能、当前功能错在哪里,基本上能够在一两次交互中被修复。

样式调整需要明确大模型无法感知渲染之后是什么样,可以根据上下级容器或者节点相对应的样式来描述较为有效。

2 上线

2.1 选择一个托管服务 - Vercel

Vercel 是一个非常好的托管服务,对于没有什么流量的 Next.js 项目来说,完全可以满足需求且不用支付任何费用,按照官网步骤连接到 Github 仓库完成一键部署。

2.2 选择一个域名 - Cloudflare

Cloudflare 大善人可以以几十块人民币的价格购买到域名,随即完成域名解析到 Vercel 的部署实例上即可访问。

3 总结

  • 整个过程一共不到半小时的时间,甚至比写这一篇文章的时间还要短,甚至我相信大部分人在按照这个步骤不会比我耗时更多。
  • 除了部分样式和功能动手修改了大模型无法感知的样式问题之外,其他部分都是大模型自己完成的。
  • 部署工程完全在 Vercel 上运行,部分 npm build 导致的错误将错误栈复制给大模型之后问题都得到了解决。
  • 功能性的需求大部分可以实现指哪打哪,样式如果依赖组件库也可以

下一步我会尝试来构建更复杂的前后端分离的项目

一个彩蛋：可能你想不到的是,这个网站 logo 也是大模型直接生成SVG的,抽象又神秘。