一切的开端
多日以后面对额度用不完的Codex的那天半夜，我将会想起考试周忙里偷闲刷b站的那个下午…
好吧，也算不上忙里偷闲，毕竟也没好好复习😋
总之就是我刷到了这个视频
使用 Codex 制作的二次元个人博客,零手工这一块
看到视频里的内容，再看着我那买了以后因为赶上考试都没咋用过的Codex（😭😭😭），我心中萌生了要制作一个博客网站的想法，不过当时也只是想了一下
后来考完试放假了，假期里吃饭吃不香，睡觉睡不好。想起来前几天上课考试的时候状态还挺正常，我觉得给自己找点事做会好一点，然后就开始着手制作这个网站了
准备工作
前端基础
虽然代码都是让AI来写的，但我作为监工还是得懂一点东西的（事实证明这一点用都没有，还浪费了我不少时间），所以我先上b站找了一个速成课：3小时前端入门教程（HTML+CSS+JS），再搭配上课程配套的教程网站极客侠GeeksMan-前端入门以及菜鸟教程，顺便把网址发给Codex让它帮我整理了笔记
网页框架
框架和上面的视频选择了同款，即Astro。在着手制作自己的博客之前，我先跟着官网上的教程搭了一个demo
下面是其中的页面
哈哈，毅力哇啦！
参考网页
在完成上面的工作后，我在1.14514秒内意识到一个严重的问题：作为一个从来没学过前端也没有审美的人，用着审美同样贫乏的GPT，这活肯定是干不成的
这时聪明的你肯定会想到我之前刷到的那个视频，我也是这么想的。然后我把那个视频翻出来，发现上面既没有网址，也没有GitHub仓库地址，有种上厕所的时候确信自己带纸了，结果从兜里掏出来一看发现是砂纸的感觉
本着死马当活马医的心态，我根据视频里相关的信息在Github上搜了一下，没想到真搜到了up的主页
于是我就给仓库点了个star然后clone下来了😋
后来我发现这个网站有的设计我不是很喜欢，就去b站找到了一个用Astro开发的开源博客模板Mizuki，将这个一并列入参考对象
此外，在开发过程中，我还让ChatGPT去搜集了一些设计非常优秀的网站作为参考，不过我压根看不懂，只学到了皮毛，一并放在这里
开干！
基本工作
第一步肯定是先创建本地文件了，在配置好开发环境的前提下在控制台运行npm create astro@latest，即可选择创建的模板（注：默认用的是cmd，如果你使用的是Windows PowerShell，可能会出现指令被拦截的情况，用npm.cmd create astro@latest即可）。我创建的是空白模板。
然后就是创建Github仓库，把项目放进去
项目规划
一个好的项目肯定离不开详尽的项目计划书，而为了省力肯定会借助AI。Codex额度不抗造，所以我选择使用ChatGPT网页版来辅助工作
在网页端左侧的“项目”栏新建一个项目，即可在“来源”页面一次性把项目的背景信息全传进去，省的换窗口的时候还得再发一遍
这里我传了三个txt文件，里面是参考网站和我的博客demo的Github仓库地址，方便GPT随时读取并用作参考
然后就是紧张刺激的提示词大战AI环节了（悲）
孩子们不要学我，我不会写提示词，只能边聊边提需求，榨干自己最后一滴脑浆换来一个充满AI味的plan😭😭😭
这里提几点小技巧：
- GPT有强大的识图功能（
不像某条蓝色大肥鱼），你可以直接利用截图工具截取参考网站中你中意的部分，然后在上面进行批注，只要注释清晰可见，GPT就能理解你的意图对plan进行修改
- 想看看网站做出来什么效果，又怕做demo浪费Codex额度？你完全可以让网页端来做这件事，它可以生成简易的示例网站，包括HTML页面，CSS样式甚至简单的JS交互，支持在线预览整体效果，你也可以让它把文件打包供你下载，在本地品鉴最新最热的示例网页
- 为了节省额度，一切的规划都可以交给网页端来做，它可以根据你的需求自己生成供Codex执行的plan以及详细的提示词，只要一句话，它就可以把上述文档、截图批注和示例页面一块打包发你，之后你只需要把它放到项目目录下让Codex自己读取即可
素材搜集
像我这样没啥技术的人，只能靠搜集优秀的素材给我充满AI味的小网站撑撑门面了
图片
背景图片和默认封面都是在Pixiv里搜集的，我选用了焦茶老师的杰作。我很喜欢老师的画风，线条清晰，颜色丰富，人物神态生动。遗憾的是老师已经去世了，R.I.P.
深色模式背景
浅色模式背景
默认占位封面
我头像的出处是歌曲MEGA TSKR的封面
关于兴趣展柜部分，基本就是在网上搜集各个作品的高清海报往上放。另外，如果你想放的游戏是steam上的，可以去Steam\appcache\librarycache\游戏id（游戏id可以去SteamDB查，直接问AI也没有问题，它会帮你查好的）里面找到对应的游戏背景图和透明背景的游戏logo，再和AI说一声做成steam游戏页面那种感觉，这样做出来会好看一些
这样搞虽然好看，但后面你要是想添加非steam的游戏就有可能打破队形，逼死强迫症，用之前请谨慎考虑
至于网站logo就是八仙过海各显神通了，如果你是大佬的话可以自己设计，像我这样的小白还是最好用AI来搞。你可以让ChatGPT帮你找几个免费设计logo的网站，不过做出来的效果都挺丑的😵当然要是你的要求不高，只要简单的字母组合，让GPT直接生成svg图像的效果还是挺好的，它还可以把图像转成ico格式，一举两得
下面这个就是拿GPT生成的，效果还不错，对吧？
音乐
孩子们，考验歌品的时候到了（
想放到网站上的歌可以直接去明月浩空网免费下载mp3文件，专辑或歌曲的封面自行搜集（我是上网易云薅的）
开始生成
其实到这一步就没啥可做的了，你只需要把GPT写好的提示词发给Codex等它分阶段生成代码，然后对每阶段的成果进行验收，确认无误后commit一下，把改动push到云端，然后创建PR将该分支merge到main，接下来看着自己慢慢归零的额度无能为力，天天视奸Tibo的X账号祈祷能重置额度
网站优化
经过长时间的奋战好不容易是做完了，现在快进网站里看看吧！
相信我，除非你有前端设计的功底并且在设计阶段下足了工夫，否则用不着两分钟你就被AI味熏出来了😫
AI生成的网站往往有种不可名状的诡异感，乍一看没啥大问题，但越看越不对劲，你知道它很奇怪，但就是找不出问题具体出在哪
看着那个说不上哪里不对劲的AI网站的你be like:
然后我仔细观察了一下，发现了一些AI味的来源：
- 所有页面布局高度雷同，比如我的网站里最初全是胶囊状的圆角卡片，极易导致视觉疲劳
- 过多无意义的字符堆砌。AI相当喜欢在犄角旮旯里面塞一些没有必要的文字，显得非常多余
- 所有动画效果都是上浮。这里指的是鼠标悬停在特定卡片上时出现的动画，如果不加约束的话，AI大概率会全做成这样的
你可以像我一样把这些看起来不舒服的点总结一下发给ChatGPT，也可以把你网站的Github仓库地址发给ChatGPT让它自己来看，然后和它商讨敲定细节，最终给出网站的优化方案交给Codex执行
