Skip to content
Go back

我的博客搭建之旅:前端小白与 AI 助手的实战笔记

Published:  at  07:22 PM
📝 AI提示

本文内容由本人录音记录转录后,经AI美化整理而成。

前几天,我突然萌生一个想法:给自己的博客添加一个“收藏”页面,用来展示我喜欢的专辑、书籍、游戏以及正在使用的数码产品。我觉得这个点子很有意思,于是一鼓作气,一下午就把它实现了。

借此机会,我想完整地复盘一下,我这个对前端一窍不通的小白,近期是如何使用 VS Code 配合各种 AI 助手,来创建和维护这个用 Astro 框架搭建的个人静态博客的。


第一站:与 Gemini 2.5 Pro 的初次邂逅

在搭建 Astro 的初期,我使用的是谷歌的 Gemini 2.5 Pro

它的表现相当不错,尤其是超长的上下文能力,我可以直接把 GitHub 上的 README 文件内容“喂”给它,或者直接甩给它一个文档链接。不过,我怀疑它有时并没有真正读取网页内容,因为返回的一些信息像是模型的“幻觉”,导致结果存在偏差。

总而言之,在项目前期,Gemini 主要辅助我完成了博客的初始化搭建、进行基础配置、分析日志以及查找和修复 Bug。


核心工具的演进:在 AI 编程助手中兜兜转转

博客的框架搭起来后,接下来的工作就是修改模板。虽然模板作者提供了修改指南,但文档全是英文,还夹杂着大量代码,对我这样的新手来说理解起来很有难度。只有在遇到特别棘手的问题时,我才会去查阅原始文档。

这时,一个重磅级的助手——GitHub Copilot——就出场了。

  • 初试 GPT-4
    我一开始主要使用 Copilot 中的 GPT-4 模型。它的 “Agent” 模式体验很好,我用自然语言描述需求,它就能帮我找到解决方案并修改代码。在项目初期,用它来做一些替换标题、调整页面元素等工作,效率非常高。

  • 短暂的弯路 - TRAE
    由于免费版的 Copilot 有额度限制,我开始寻找替代品,并尝试了字节跳动当时推出的 TRAE(现在的 CodeShell)。但仅仅试用了几分钟我就放弃了,感觉它的智能程度与 Copilot 相差甚远,几乎没有可比性。

  • 再次尝试 - 通义灵码
    之后,我又试用了阿里的“通义灵码”。在处理简单任务时表现尚可,但一旦遇到需要跨多个文件、理解整个项目工程的深层次问题时,“通义千问”就显得有些力不从心了。


巅峰体验:遇上改变游戏规则的 Claude 4

最终,我还是回到了 Copilot 的怀抱。

最让我惊喜的是,就在我订阅 Copilot 并使用 GPT-4 没几天,Claude 4 也发布了!很快,Copilot 也集成了 Claude 4 模型。从那时起,我便一直使用它,它的智能程度真的让我叹为观止

在处理像“新增一个功能页面”这样的完整工程任务时,它的表现堪称完美。只要我用自然语言清晰地提出需求,它就能一气呵成地完成从构建到调试(debug)的全过程,甚至还能自行迭代和优化方案。当涉及到需要关联修改多个文件,并在完成后进行测试验证时,它的工作流非常出色:它会主动提示我启动开发服务器,调用 VS Code 的终端和内置浏览器,通过检查运行日志来确保新功能完全实现。

总而言之,Claude 4 的整体体验非常惊艳


我的工作流与思考:一笔值得的投资

对于我这样的小白用户,我的主要工作方式就是与它对话、描述需求,因此每天的 Token 消耗量非常大。我几乎每天都会和它“对话”两到三个小时,不断地为我的博客增加新功能或进行优化,直到用满当天的速率限制。

最终我直接订阅了 Copilot(每月 10 美元)。我感觉即便是在试用期结束后,这笔花费也物超所值。比如,将来什么时候我想对博客进行大改动,我就可以再订阅一个月,让 Claude 4 来协助我完成。


最后一点补充:一个无伤大雅的小瑕疵

对了,Claude 4 在使用中也并非完美。它似乎无法记住我的操作环境是 Windows 的 PowerShell,默认总是生成 Linux/Bash 指令,导致我每次都需要手动纠正它。正因为如此,它在执行终端指令时,往往会先尝试错误的指令,在看到终端报错后,才会意识到我的环境并给出正确的 PowerShell 指令,等于一个操作要执行两次。

这是我目前发现的比较明显的一个瑕疵,但对我来说,影响不算太大。