AI建站实录03|将需求清单抛给AI,收获专属技术架构
这是一组关于借助 AI 从零打造网站的七期连载。跟随本系列,你可以依靠 AI 辅助构建一个真实运行、允许他人浏览的个人站点。
在上一期,我们借助三个核心问题,将模糊的「想建站」念头转化为可落地的需求清单。本期为第 3 篇,重点是将该清单转化为具体的技术架构。
阅毕此文,你将拥有一份详尽的技术方案——采用何种框架、内容如何撰写、怎样发布上线,皆由 AI 规划。后续一期即可着手设计工作。
关于建站,"选用何种工具"理应由你自己决断吗?
以往我确信如此。横向对比、星标数、社区热度,我皆调研过——查阅后愈发迷茫,不知作何抉择。
此后我转变了策略:把需求清单交予 AI,让其代为挑选。它选中了 Astro,并给出了一个我从未在选型评测中见过的缘由——"AI 易于理解"。
听起来颇为玄妙。但当我执意尝试 Hugo 遭遇滑铁卢后,才真切领悟这四个字的份量。
本篇,我们将完整体验把工具挑选权移交 AI 的流程。
先将上期的需求清单取出。你手头理应有类似这样一份:
给__和__看 仅做__个页面:、、 浏览者会认为: 坚决不做:__
此清单用途何在?并非供你查阅——而是供 AI 解读。
将此单交予 AI,随后它便会交付一份完备的技术方案:选用什么框架、文章如何写、怎样部署、每日需执行何操作、AI 代替你做何事。
无需研习选型,无需精通工具,无需查阅评测。你的任务仅有一项:领会 AI 提供的方案,明白它每项选择的依据。
领会之意并非让你去评判正误。在技术选型上,AI 见识过的工具远超于你,其给出的决断大概率优于你凭空臆想。
领会的目的是什么?两点:旁人质疑你方案时你能反驳,自身意图更换方案时你能权衡。
同上期类似,本期亦包含三个层层递进的解答。AI 会自宏观方向切入,逐步细化至具体工具与部署模式。
我将需求清单交予 AI,首句询问:「提供一个建站方案。」
AI 并未即刻推荐工具。它先行反问:
「你的站点期望何种'生存模式'?此点决定了后续所有抉择。」
它阐释了三种"生存之道":
· 服务器实时组装:云端租用一台全天候运行的设备(即服务器),每逢有人访问便即时拼装页面反馈。能实现动态交互,但需租赁服务器、配置数据库并定期维保。
· 纯文件直传:你撰写 Markdown 文件(常规文本辅以简易符号,如 # 代表标题、* 代表加粗),推送至 GitHub(运用 git push 指令),GitHub 自动将其转为网页。无需服务器,免费上线。
· 依附第三方平台:书写于他人平台,借用其域名与模板。操作极简,但平台更规你唯有顺从。
紧接着它直接给出定论:
「依据你的需求清单——面向读者与技术同仁,需彰显专业可信及沉淀积累——我力荐第二种,即静态站点。」
其给出三点缘由:
一、无需维护服务器,免费即能上线,省时省力。
二、文件即站点本体,AI 可洞悉全部内容。遇故障时 AI 能协助修复,若属平台或服务器故障 AI 则无从下手。
三、你的"专业、可信、有积累"依仗内容积淀,无需会员、留言、后台等动态交互。静态站足矣,且更为轻量。
此三点皆为我可印证之事实——不想维护服务器正是当前心态、AI 易读确系协作之根基、专业可信亦不仰仗会员后台。如此,接纳。
首项解答:静态站。
此处需领悟的核心词是 静态站——撰写 Markdown,机器自动转网页,全程免触服务器。
方向落定,AI 随即续言:
「静态站工具繁多——Hugo、Hexo、Jekyll、Eleventy、Next.js、Astro。依你所需,我推举 Astro。」
闻此我略感诧异。过往所闻中,Hugo 名气最盛——星标多、博主圈受众广。Astro 之名我甚觉生疏。
我请 AI 说明。其核心回应仅一句:
「你主张用 AI 协作构建。故而需择取 AI 自身最易读透的工具。」
随后它逐一评点备选工具。Hugo 主题采用 Go 模板编写,形似一串嵌套的 {{ ... }} 密码,AI 能写但人类难懂、贴靠易错,出故障亦难修。Next.js 文档浩瀚 AI 极熟,然其面向应用开发者,建博客犹如高射炮打蚊子,徒增无用配置。Astro 专为内容站而生,每页即一文件,文件上部为结构下部为样式,与"页面样貌"一一映射。AI 言改此处,你 Ctrl+F 检索即得。报错亦精准至某文件某行。
其末句令我印象尤深:
「你鲜少触及工具——日常仅写 Markdown。然但凡某日欲添深色模式按钮,抑或构建崩溃——你即刻需 AI 辅助,AI 即刻需此工具易读。」
我悟了。但内心仍微有不甘——Hugo 如此热门,能逊色几何?坦白讲即是不愿信邪。
于是我令 AI 分别以两工具演示同等需求:"为 Hero 区添一 logo,使之与深色背景自然交融,莫如贴附快递单般突兀。"
Hugo 端,AI 折腾三轮。首轮折戟于 Go 模板语法报错,次轮绊倒于主题变量名,末轮终得运行——然 logo 仍存白底生硬。AI 亦自陷僵局,告我:"此主题之 Hero 区结构嵌套颇深,意欲修改但恐波及其余页面。"
Astro 端,AI 一轮功成。径直操作:修改 Header.astro 文件、借 Python 将 logo 白底抠为透明、复刻图片至 public/images/ 路径。继而告我:"刷新视察。"
我刷新——logo 自然悬于导航栏,无突兀白块。
同等需求,Hugo 端 AI 自身亦受困,Astro 端 AI 一轮顺遂。
差异非在工具"能耐",而在 AI 借此工具能否放手施为。Hugo 供人阅读——AI 写毕需人贴、人调、人排错。Astro 亦供 AI 施为——AI 全链路包揽,人仅担当验收。仅此一别,体验天壤。
第二项解答:Astro。
此处需领悟的核心词是 AI 易读——选工具非观其热度,而视 AI 能否借此顺畅干活。此准则无需你自行评断,AI 代劳评判,然你需听懂其意。
工具敲定,AI 续陈部署之策:
「力荐 GitHub Pages + GitHub Actions,免费、自动、与 Astro 天作之合。」
我请其详述此套方案:
GitHub Pages 乃 GitHub 赠予的免费"存文件空间"。将站点文件上传,全球即可访问。分文不取,月享 100GB 流量(个人博客毕生难竭)。
GitHub Actions 系 GitHub 内置"微型机器人"。每逢 git push 之后,其自动将 Astro 项目编译为网页,再上传至 GitHub Pages。全程静默运行。
自定义域名 可予绑定。购一域名(如吾所用 keinye.com,年费数十),于 DNS 内增两行配置,片刻后键入 keinye.com 即现你的站点。
AI 所予部署逻辑如下:
1. 你撰写 Markdown 文章
2. git push 至 GitHub
3. GitHub Actions 自动运转
4. 编译为网页 → 部署至 Pages
5. keinye.com 自动更迭
看似繁复,然你仅涉足首二步——写 Markdown、git push。余下三步皆由机器执行,你无从察觉。
或有疑问:网上屡被推介的 Vercel、Netlify 等更"专业"之部署平台岂非更佳?
我将此疑抛予 AI。其答复:
「此皆可行,对静态站无差。然 GitHub Pages 具一优势:站点文件、构建脚本、部署目标皆集于 GitHub 一处。排障仅查一地,AI 协作时语境更聚。引入外部服务则徒增需你管控之项。」
察觉否—— 少一活动组件,少一故障源头,AI 协作之成本即降一档。
第三项解答:GitHub Pages + GitHub Actions + 自定义域名。
此处需领悟的核心词是 自动部署——你仅做两事:写 Markdown、git push。
三问既出,技术方案便成。我之版本呈此貌:
框架:Astro(静态站工具,AI 易读) 内容格式:Markdown(常规文本辅以简易符号) 部署:GitHub Pages + GitHub Actions 自动构建 域名:自定义域名(吾用 keinye.com)
你之版本,径直照搬亦可。或携上期需求清单询 AI,令其为你量身定制。
将此段提示词复予 AI,连同需求清单一并发出:
发毕审视 AI 所予方案。其推举或与我同(Astro + GitHub Pages),或相异——若你需求清单异于我(譬如欲建以图为主之作品集,抑或笔记型工具站),其将出具迥异方案。
无论其供何策,你皆行一事:领悟三个核心词。
· 首答属何种"生存之道"——为何此道、非彼道
· 次答系何工具——其依据何在(莫仅观名号)
· 末答乃如何部署——你日常做何事、机器做何事
既已领悟,他日若有人言"用 X 更佳"时,你自有底气——X 或许更佳,亦或不契你之需求。AI 已于其方案内替你筛阅一遭。
💡 一言概之:上期你求 AI 助你厘清所建何物。本期你求 AI 助你厘清以何而建。双单在手,下期即可着手出图设计。
📍 系列地图 ✅ 01 开篇:为何需一己之网站 ✅ 02 需求:令 AI 助你明晰:你需一类何种网站 ✅ 03 工具:凭何搭建网站 ← 你在此处 ⬜ 04 设计:令 AI 助你出设计图 ⬜ 05 实现:借 AI 将设计化作真实页面 ⬜ 06 上线:使旁人能访你之网站 ⬜ 07 复盘:踏过何坑,何以渡之
🎯 本期任务:取出上期需求清单,将其与上述提示词并交 AI,令其供你完备技术方案。观其推举之工具与部署方式若何,与本文比对——同与不同皆无妨,要旨在于你能听懂其依据。
📺 下期预告:《AI建站实录04》——令 AI 助你出 UI 设计图。