Part1:前言
这个合集用于记录我用AI制作网站全过程,以及锻炼我回顾和梳理操作思路的能力。还有为自己增添一点成就感,方便我更好坚持下去,希望我能够圆满完成这个合集。
我最喜欢的两位榜样:Gus和Dan Koe,他们提倡的理念——“公开学习,公开写作”让我受益匪浅。
正因为我是小白,我有时会收到充满热心的指导和帮助,比如昨天在朋友圈发表的“少女心事”(里面记录了我打开网站的困难),半小时后我就幸运地收到了一位好友推送的文章还有一个操作小建议,这让我在修改代码文件上节省了几乎一半时间。
还有之前在小红书发的一个帖子,有个网友用两句话点出我这一年多错误的努力方向,我大概以后都不会重蹈覆辙了……
参考资料:
继续,给“老读者们”的几句话。
自媒体时代最好的生活方式:Build in public
可在浏览器中打开以下链接:
https://www.bilibili.com/video/BV1fw4m1k769/?spm_id_from=333.1387.favlist.content.click&vd_source=0688f87f1408adfa318fe8a69cf2ca72
。。。。。。。。。。。。。。。。。。。。。。
Part2:源头
一切始于我偶然在一本书上见到的那句话:“尝试用AI做一个网站吧!真的超级简单!完全不需要会代码!”
正为在电脑上看书没法系统地做笔记和好的笔记工具都要买月卡年卡使用而抓狂…
这太吸引人了,真那么简单?于是:
几分钟就行?
我第一时间思考用什么工具生成。
体验过似乎许多工具软件,我本能地想到:那种给我生成网站的工具需要我付费吗?需要翻墙吗?
于是我让DeepSeek提供免费的,国内可使用且不需要下载的工具,下面是大致过程(倾情跳过观看):
使用首选推荐的Sketch2Code—网站停摆,无法访问——换为v0.dev(Vercel),点进去什么都看不懂——打开豆包屏幕共享通话功能,表明我的大致需求,根据指导无脑点击——注册GitHub账号——关联账号失败——换Gitee——重复上述AI辅助注册过程——绑定邮箱,创建代码仓库
此处省略大量询问AI下一步该如何操作,点击什么等内容还有各种小麻烦(比如忘记邮箱密码)。
什么都看不懂也完全不要紧,
黄金法则:跟AI表明原始目标,需求(越准确越好)+问下一步怎么做。
例如,我几次跟AI强调了我要创建一个可以记录或上传笔记,可以阅读上传并阅读书籍的网站,并不断说:“我已经弄好了你说的……,下一步呢?”
PS:创建好代码仓库之后,我开始对AI有点上瘾,大概是被AI的智能折服。它似乎能解决所有问题…?当然要警惕完全依赖。但我先完成我的理想网站再说吧,我的目标是尝试无脑做出一个网站。
。。。。。。。。。。。。。。。。。。。。。。
Part3:开始
我有了最基础的代码仓库(我也不清楚为什么要有,后来查才懂:像Vercel这样的平台需要读取仓库里的内容才可以转换成全世界都可以访问的网站)。在实践中学习果然印象最深刻,哈哈。
这里我视为创建网站的开始。
第二次打开豆包时,我发现个小问题:
它把我之前的需求和操作过程全忘了,我们现在的交谈在它眼里是“新话题”,它完全不记得我创建了一个仓库,以及在哪里创建了一个仓库。
接下来的步骤可能不适用于已经有的仓库,我可能白白创建。询问前,我下意识把我创建的仓库尽量详细跟AI重新阐述了一遍。
这个小小的下意识的动作预防了我很多可能遇到的麻烦(当然也不妨碍新麻烦的产生)。
黄金法则2:如果你不能一次性就用AI做好一个东西,就得在第二次进行时尽量详细地跟AI明确阐述已经有的条件(你已经做好的部分),最好给它截图,那样解释最方便。
我继续询问豆包有了这个代码仓库之后我该如何创建我想要的网站,它给出6步(不完全展开)如下:
1. 明确网站需求与规划(最重要的前置步骤)2. 搭建本地开发环境3. 编写网站基础代码(从静态到动态)4. 测试与调试……
这时才想起来我连自己的需求还没完全明确…
是啊,我是想要一个方便读书的界面工具,还是一个笔记工具,还是一个作品集展示框?还是别的什么?
……都要。
我只会第一步,不管怎样。直接开始(为了方便复制粘贴需求和截图,我使用了Word进行编辑)。如:
我发送了这张图片(我删除了大部分手打的文字,理由会在下出现),按照上面的黄金法则发送:我正在写网站需求与规划,我一个人,0基础,没搞过网站和软件,不会写代码,不会任何开发性语言,只有一台电脑,有一分钱,能上网,能使用AI。我想利用AI帮我开发网站。
PS:这里有了让我有点破防的一点(我不想认为自己“傻”的)
我花了近两个小时去思考网页界面,还有思考如何向AI精确表达我的需求,编写好这页Word,AI回答我时却直接给了我更详细更完美的方案,不仅完美满足我的需求,生成完整文案,分类标签和页面结构,还把我漏掉的点全部进行补充和完善。
我纯思考和手打的文字都算,,,,,….???
黄金法则3:发现自己需要动脑产出的部分,你完全可以考虑交给AI,你只需要作为审核和帮助修改;如果你有极强的个性化要求,那就写好大概框架和注意事项,让它使用还有你喜欢的概念。
。。。。。。。。。。。。。。。。。。。。。。
Part4:过程
继续过程,下面是我一步一步不断截图不断询问,操作的大致步骤:
修改完整网页文案——截图发送给AI并按照推荐使用Notion——注册失败——使用国内网站语雀,注册——新建4个知识库,建立网站框架——创建好后按照步骤直接公开知识库,失败——转为使用网站上线了——注册失败——使用上码平台——注册失败(后来发现国内很多工具不支持个人开发网站)
事实上,均为无效操作,相当于AI带我体验不断替换方案然后不断失败的感觉,
不断替换方案,最终再次重新开始。再次给豆包提供Gitee代码仓库和完整文案,询问多次替代方案后最终使用GitHub。这次注册GitHub账号成功了,于是马上尝试将仓库同步到GitHub,嗯,结果是失败。
AI诊断:用错了,用成了镜像仓库,部分功能无法使用。(明明是昨天你亲自教我用的。。。。。)
遇到的小麻烦:
无法Fork;搜不到模板地址;AI读取需求错误发生部分连锁的小错误……
几经波折,终于完成建立四个代码文件并一键部署。初版网站制作完成,如下:
依旧存在许多问题,但我没指望第一遍做出来就很完美。
回顾这个过程,重新去看和AI的聊天记录提取信息实在困难,因为我是开了几个聊天界面进行的,它们没有顺序,此外几乎每一条AI的信息都很长,信息密度极高。
这里我边回看记录边写了5个多小时。我不知道我的大脑此刻是否是一片浆糊,写出来的是不是垃圾,但我只想先完成这篇。
。。。。。。。。。。。。。。。。。。
Part5:感受
1. 向AI精准表达需求的能力可能有所提升。
2. 大致体验了那些做项目的大佬不断试错不断失败的过程。AI可以作为助手提供解决方案,但能不能解决是另外一回事。AI不能代替我们犯错。试错这步得我们自己来。
3. 不知是不是网站功能并不复杂,AI没有生成不出来的代码。尽管曾经见过学长在做小车时因为AI写不出正确的代码而破防。
4. 我读AI信息的耐心令我自己感到惊讶,我回顾那些记录时只觉得头大。专注让人忘记一切,不只是时间,还有你一开始以为的一切:我做到一半时忘了我觉得很麻烦。
5. 解决自己觉得麻烦的问题会让大脑分泌大量多巴胺,作用效果持续很久的那种。
。。。。。。。。。。。。。。。。。。。。。。