建站学堂

主题

第 8 章 · 零基础到第一版：AI 时代的建站流水线 ​

本章替你解决的问题：词选好了，人卡在"我不会写代码"。这一章给你一条 AI 时代的建站流水线：做什么类型的站、零基础要准备多少技术、怎么让 AI 一次写对、几小时内部署上线。读完你应该能回答三个问题：做工具站还是内容站？AI 总返工怎么办？第一版做到什么程度就发？

8.1 先定型：工具站还是内容站 ​

动工前先过一棵决策树（来源：卡片 01-articles-2《工具站 vs 内容站的选型决策树》）：

  • 有批量生成内容的能力（现在靠 GPT 都有）→ 可以做内容站：靠文章、数据页从搜索引擎拿流量。
  • 没有 → 做工具站，再分两档：
    • 纯前端就能实现：JSON 格式化、Base64 编解码、MD5 计算这类，任何能放静态页的地方就能部署，不需要服务器；
    • 需要后端：域名 whois 批量查询、视频下载解析这类，现在用 Vercel、Cloudflare Workers 等免费 Serverless（无服务器架构：代码托管在平台、按请求运行，不用自己买机器）承载，不必买服务器养十年。

为什么社群偏爱工具站？工具站用户会上手使用、停留时间更长，而停留时长正是谷歌判断"页面满足搜索需求"的重要信号；内容站停留短、付费变现也弱（来源：卡片 01-articles-3《新人出海建站跑通闭环要多久》）。

还有一个大原则先立住：一个域名一个站一个关键词。面对已有先发优势的竞争者，你不能也拿内页去竞争，要用独立域名举全站之力专做一个词——"狮子搏兔亦用全力，何况我们还是兔子"（来源：卡片 01-articles-2《单域名单站单关键词》）。

8.2 零基础的最小技术准备：约 2 周，别碰框架 ​

哥飞给零基础者的不是"先学半年编程"，而是一条最短路径（来源：卡片 01-articles-2《零基础 2 周前端入门路径：别急着学框架》）：

  1. 跟一个 B 站 28.5 分钟的免费视频教程（bilibili.com/video/BV1Wr4y1R7Bd），只学 HTML+CSS、不教 Vue/React——这正是做出海工具站最需要的部分；
  2. 先整体看一遍教程，不操作，建立全局印象；
  3. 再跟着做一遍，工具随意（记事本+浏览器即可），不懂就搜或问 AI；
  4. 利用业余时间约 2 周学完，能徒手写网页；
  5. 补学 JS 时只看 MDN 快速入门和事件用法，够用即止；
  6. 用"能独立做出一个在线闹钟（选时间→倒计时→到点播放音乐）"检验是否入门。

两条纪律：先用原生 HTML+CSS+JS 做满 3 个网站，再考虑 jQuery/Vue——一旦碰 Vue，学习量翻好几倍，极易半途而废；别觉得大牛都用新框架，月入 25 万美元的 Levels 至今还是 PHP+jQuery（来源：卡片 01-articles-2）。

8.3 让 AI 一次做对：模板、提问、spec ​

提示词模板——哥飞验证过的可复用结构，以手机号生成站为例（来源：卡片 01-articles-3《让 GPT4 一次生成可用 SEO 页面的提示词模板》）：

  1. 角色设定："你是 SEO 专家和前端开发专家，擅长用 HTML+CSS 实现符合 SEO 要求的前端页面"；
  2. 需求背景：做什么关键词的站、为什么要给每个分类单独做页面；
  3. 页面结构逐条描述：顶部 H1 写主词、下方列国家名、每个 H2 等于"国家名+主词"、H2 下配一段描述、按钮文字与 H2 相同、点击开新页、URL 规则如 us-phone-number-generator；
  4. 收尾授权："请帮我生成页面，要求符合 SEO 规范。对于我没有提要求的地方，你可以按照你的理解去做。"

生成后用迭代方式提需求：发现漏了什么就补什么（"你漏掉了我的一个需求……"），全程可以不改一行代码，只提要求（来源：卡片 01-articles-3）。

复杂项目先让 AI 提问——功能较多的产品不要直接让 AI 写码。把需求描述给 Claude，让它有疑问就问、你来回答，回答的过程就是取舍的过程（有些现在不必做、有些干脆不做）。有人这样来回几轮，37 分钟产出一份功能设计与开发规划文档，直接进仓库（来源：卡片 05-chat2026《复杂项目先让 AI 提问再写码》）。

先写 spec 再写码——AI 编程效率的杠杆不是更强的模型，而是任务结构化。实测：边界明确、上下文完整时效率提升 55.8%；隐式约束散落各处时拖慢 19%。做法是先花 10-15 分钟写 spec（需求说明文档，把需求细节写清楚）再让 AI 动手，一次做对。反面教材：AI 两分钟生成一个注册页，却把其他用户的密码直接显示在页面上——"省下十分钟，返工几小时"（来源：卡片 02-daily-1《先写文档再写代码》）。

8.4 快速上站四步 SOP ​

哥飞的标准上站流程，数小时完成（来源：卡片 04-updates-2《哥飞快速上站 SOP 四步法》）：

  1. 收集资料：打开 pplx.ai 围绕核心关键词收集原始资料，指令写明"只收集整理，不总结"——拿未被 AI 污染的一手材料；
  2. 生成代码：把资料投喂给 Claude/GPT，先让它设计符合 SEO 的 H1-H6 结构，你批准后再生成 HTML/CSS/JS 三个代码块；
  3. 部署上线：把代码推上 GitHub，Vercel 一键部署；根域名加 A 记录（把域名指向服务器 IP 的解析记录）指向 76.76.21.21，www 加 CNAME 记录（把域名指向另一个域名的解析记录）指向 cname.vercel-dns.com；
  4. 提交收录：把首页提交到 GSC（Google Search Console，谷歌站长平台：提交网址、查收录与排名的官方后台），去 V2EX、Reddit、HackerNews 发帖引爬虫加速收录。

新站不贪多：用模板快速上一个首页加一两个内页，喂 AI 资料生成文案和内链结构即可（来源：卡片 04-updates-2）。

8.5 快与省：三个实战打法 ​

打法一：30 分钟模板站。 备一套趁手模板，来新词只改落地页就能上（图片都不用换），争取 30 分钟上一个落地页；一个域名十几块钱加半小时试错，没流量就立马转战下一个词、不死磕；有流量再开发完整功能——"流量驱动开发"（来源：卡片 04-updates-1《新词新站打法：30 分钟低成本上站+快速止损》）。

打法二：1-2 小时验证页。 开发工具费时间，做一个页面只要 1-2 小时。流程：发现工具大站 9% 的流量来自某关键词→找域名→GPT 生成内容和代码→手写 HTML 不用框架→层级结构完善→提交收录→有流量再回头开发真工具。选词放弃日搜一两百万的热词（打不过），找够得着、有一定流量的词（来源：卡片 01-articles-2《2 小时建站验证打法：先做页面，有流量再开发工具》）。

打法三：开源项目改站。 锁定关键词后，先去 GitHub 搜"开箱即用"且核心功能吻合的仓库，以它为基础本地化改造，再买域名部署、GSC 提交 sitemap——有群友这样上线，第二天流量数据就开始跳动。起量后马上补博客、隐私政策、服务条款页面，让站点更正规（来源：卡片 04-updates-2《GitHub 找开箱即用开源项目省去造轮子》）。

做游戏站还有个取资源的偏方：遇到 iframe 嵌入的网页游戏，用 wget2（命令行下载工具，Mac 用 brew install wget2 安装）在浏览器 DevTools 里找到 iframe 链接后下载，得到可运行的单文件 HTML，放 Cloudflare R2 或任意托管即可（来源：卡片 04-updates-2《wget2 下载 iframe 游戏为单文件 HTML》）。

担心"用纯 HTML 起步，后期加工具页、多语言要大改架构"？定论：不影响。判断标准只有一条——无论后端怎么变迁，只要返回给用户的 HTML 不变，SEO 资产就不受损；Astro 等现代框架支持直接嵌入现有 HTML。前期用最熟最快的方式上线，别被技术选型拖住（来源：卡片 02-daily-2《纯 HTML 起步不影响后期扩展》）。

最后校准对"第一版"的预期：初期要的是质量——每个页面做好了才上线，确保一上线就能接住流量；一个页面满足需求就可以上一个网站，pitchreader.com 这样的单页站月访问五六万（来源：卡片 05-chat2026《初期上站质量原则》）。

8.6 上线前的手动调优与"去 AI 味" ​

AI 生成的页面直接上线会有一股"AI 味"。先过哥飞的手动调优清单（来源：卡片 01-articles-1《GPT 生成页面的手动调优要点》）：

  1. 把 Logo 做成黑底白字圆角的文字 Logo，不必设计图片；首页 Logo 用 H1，内页用 div——一个页面只能有一个 H1，内页的 H1 要留给页面主题；
  2. 给导航加 Home 链接，每个链接加背景色圆角，用 curr 类标识当前页；
  3. 把页头做成白底、宽度通栏、内容左对齐（max-width 1000px 居中容器）；
  4. 把按钮改成白底描边样式，避免满屏色块；
  5. 给页脚加一行版权信息。

"去 AI 味"更进一步的工作流：GPT 喜欢往前端乱塞东西、把产品意图和开发思路直接标成显眼文本，这种 UI 会被用户和广告平台一眼认定为低质量。解法：禁止 GPT 私自改前端样式；先用 Gemini 生成前端雏形，再让 GPT 在其基础上迭代收拾；让 AI 模仿理想网站的视觉风格，比在提示词上死磕更有效。UI 值得投入——有站全面升级 UI 后，从月均 1 单升到 10 天 4 单（来源：卡片 02-daily-1《AI 前端去味：Gemini 打底、GPT 收尾》）。

本章要点回顾 ​

  • [ ] 能用决策树判断做工具站还是内容站，知道纯前端工具站连服务器都不用买
  • [ ] 记住零基础最短路径：约 2 周 HTML+CSS，先做满 3 个原生站再碰框架
  • [ ] 会用让 AI 一次做对的三件套：提示词模板、先让 AI 提问、先写 spec（±55.8% 效率差）
  • [ ] 能背出快速上站四步：pplx 收资料→AI 代码→Vercel 部署→GSC 提交
  • [ ] 掌握三个省钱打法：30 分钟模板站、1-2 小时验证页、开源项目改站
  • [ ] 上线前过一遍手动调优清单，学会 Gemini 打底、GPT 收尾的去味工作流

站做出来了，叫什么名字、用哪个域名、Logo 怎么来？下一章解决品牌这一关：域名优先级、几分钟的抢注窗口、SVG Logo 三件套，以及换品牌名时的 11 步安全迁移。