魁歌AI建站完全指南

小白做网站失败的第一原因不是技术，是需求模糊。这 15 分钟会让后面每一步都快一倍。

你要做的事

1. 填三个空：① 给谁用？② 他们来做什么？③ 最重要的一项功能是什么？
2. 把答案连成一句话。例：「给朋友看的木工作品集，能翻作品照片、一键发邮件联系我。」
3. 把其余功能全部砍掉，写进「以后再说」清单。第一版只要核心那一件事。

利弊：先想清楚再做 vs 边做边改

🙋 遇到问题？卡住了？咨询作者（X）

只需要三样东西。不用装传统开发环境、不用买任何东西。

清单

1. ① 一个 AI 编程助手：网页对话版（ChatGPT / Claude / Gemini）、AI 编程编辑器（Cursor、ZCode）、终端 Agent（ZCode CLI）都行。本教程用免费额度足够。
2. ② 一个 GitHub 账号：到 github.com 用邮箱注册。它免费帮你存代码 + 免费托管网站。
3. ③ 一个现代浏览器：Chrome / Edge / Safari / Firefox，你现在用的就行。

利弊：AI 助手选哪种形态

🙋 遇到问题？卡住了？咨询作者（X）

神奇的一步：你描述，AI 写代码。关键技巧是只要一个文件——双击就能打开，永远不用「编译」「装依赖」。

你要做的事

1. 把下面的提示词模板复制给 AI，把「括号里的内容」换成你的。
2. AI 给出代码后，新建一个文件夹，把代码保存为文件名必须是 index.html（全小写）的文件：Windows 用「记事本」粘贴 → 另存为 → 保存类型选「所有文件」、编码选 UTF-8、文件名填 index.html；Mac 用「文本编辑」粘贴后先按 ⇧⌘T 转成纯文本再保存。装个免费的 VS Code 当记事本用也完全可以。
3. 不满意就直接提意见：「标题大一点」「主色换成墨绿」「加一个作品图集板块」。AI 改到你满意为止。

帮我做一个「单文件」个人网站，全部代码放在一个 index.html 里（HTML+CSS+JS 都内联，不用任何外部依赖）。

【用途】{把第 1 步那句话需求填这里，越具体越好}
【给谁看】{例如：朋友和潜在客户}
【栏目】{例如：关于我 / 作品展示 / 联系方式}
【风格】{例如：简洁温暖，米色背景，深绿主色}
【硬性要求】
1. 手机上打开也要好看（响应式）
2. 支持亮色和暗色两种主题
3. 文字内容你先按用途帮我写一版占位文案，我之后替换

利弊：为什么是单文件（以及 alternatives）

🙋 遇到问题？卡住了？咨询作者（X）

上线前先自己当第一批访客。这一步免费，还能避免翻车。

你要做的事

1. 双击 index.html，浏览器直接打开——这就是 90% 的预览。
2. 按 F12（Mac：⌘⌥I，或右键 →「检查」），再点面板左上角的手机小图标切到手机宽度看一眼。大部分访客在手机上打开你的网站。
3. 过一遍检查清单：链接都能点、图片都显示、没有残留的占位文字、错别字。

利弊：双击打开 vs 本地小服务器

🙋 遇到问题？卡住了？咨询作者（X）

GitHub 是免费的代码托管 + 版本历史，相当于「网站专用的网盘」，而且下一步它还能直接运行你的网站。

你要做的事（命令行方式）

1. 在 github.com 点 New repository，起个英文名（如 my-site），选 Public。
2. 分清两个东西：GitHub 是存代码的网站，git 是你电脑上的工具（Windows 先到 git-scm.com 下载安装 Git for Windows，一路下一步；macOS 第一次运行会自动提示安装，照做即可）。
3. 打开终端进入你的文件夹：打开终端（Windows 开始菜单搜「PowerShell」，Mac 搜索「终端」），输入 cd 加一个空格，把文件夹拖进窗口，回车。
4. 第一次用 git，先执行下面两条（换成你的名字和邮箱，以后不用再管）：

git config --global user.name "你的名字"
git config --global user.email "you@example.com"

然后在同一个窗口依次执行（把「你的用户名」和 my-site 换成你自己的）：

git init
git branch -M main
git add -A
git commit -m "我的网站第一版"
git remote add origin https://github.com/你的用户名/my-site.git
git push -u origin main

push 时弹出浏览器让你登录 GitHub、点 Authorize 是正常的授权流程，点完命令会自动继续。

完全不想碰命令行？Plan B：仓库页面点 uploading an existing file，把 index.html 拖进去，效果一样。以后更新也走这条路：仓库页 Add file → Upload files，拖入改过的同名文件覆盖，写一句说明，点 Commit changes。

利弊：代码放哪

🙋 遇到问题？卡住了？咨询作者（X）

设置里点几下，GitHub 就用它的全球服务器免费帮你运行网站，自动配好 HTTPS。

你要做的事

1. 仓库页 → Settings → 左侧 Pages。
2. Build and deployment 选 Deploy from a branch：Branch 选 main / / (root)，点 Save。
3. 等 1–10 分钟后刷新，页顶会出现绿色链接 https://你的用户名.github.io/my-site/——点开它，这就是你在互联网上的网站。

利弊：免费静态托管对比

🙋 遇到问题？卡住了？咨询作者（X）

github.io 地址能用，但自己的域名好记、显专业、跟着你走不绑定平台。这是全流程唯一花钱的步骤，完全可以以后再做。

你要做的事

1. 在注册商（Cloudflare / Namecheap / Porkbun，见下表）搜一个喜欢的名字，付款即得。
2. 在域名控制台的 DNS 解析里加记录：裸域名（如 example.com）加 4 条 A 记录，分别指向 185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153；www 加 1 条 CNAME，记录值填 你的用户名.github.io。
3. 仓库 Settings → Pages → Custom domain 填入域名保存。GitHub 会在几分钟到一小时内自动签发 HTTPS 证书，勾选 Enforce HTTPS。

利弊：要不要买 & 在哪买

🙋 遇到问题？卡住了？咨询作者（X）

没人搜得到的网站等于日记。花 30 分钟做基础 SEO，换长期免费流量。

你要做的事

1. 让 AI 帮你写「网站主题 + 关键词」的 <title>（30 字内）和 meta description（80 字内），写进 index.html 的 <head>。
2. 在 index.html 旁边加两个小文件：sitemap.xml（页面清单）和 robots.txt（告诉搜索引擎可以来抓取）。一句话让 AI 生成。
3. 到 Google Search Console 和 Bing 站长（可从 GSC 一键导入）添加网站、验证所有权、提交 sitemap，再用「网址检查」请求编入索引。

利弊：现在做 SEO vs 不做

🙋 遇到问题？卡住了？咨询作者（X）

网站是花园不是雕像。这一步给你一个每周只花几分钟的维护循环。

你要做的事

1. 装免费统计：Cloudflare Web Analytics，添加站点后把一行脚本贴到 </body> 前。无 Cookie、不用弹同意框。
2. 把网站发到目标用户在的地方：Reddit、X（Twitter）、Product Hunt、Hacker News（Show HN）、LinkedIn，以及他们聚集的 Discord 社群。写清楚它解决什么问题，附链接，发完守一小时评论区。
3. 迭代：每次修改 = 改文件 → 三条 git 命令 → 约 1 分钟自动上线。把朋友问过的问题沉淀成网站内容，网站会越来越有用。

git add -A
git commit -m "改了联系方式和两张图"
git push

🛠️ 发帖别配随手截图，做一张像样的推广图：ShareForge 几分钟做出精美的网站推广图，Product Hunt / Reddit / X / LinkedIn 尺寸一键导出——带好图的帖子点击率明显更高。

利弊：统计方案对比

🙋 遇到问题？卡住了？咨询作者（X）

上面 9 步是让你上线的最小路径。这一节是我私下维护、每个站都照着做的工作流——方法和真实踩过的坑全记在里面。现在它是你的了。

🔗 这条流程做出来的真实站点，点开看效果：TokenLens · JSON Lens · SSE Inspector · ShareForge · kuige.me（作品集全集）

武器一 · 命名公式——起名是第一个 SEO 决策

名字同时决定仓库名、子域名、title 和 H1——一次起名，四处同时受益或受损。

1. 公式 = 核心搜索词 + 可品牌化的修饰词。TokenLens、JSON Lens、SSE Inspector都是这个模式：用户搜的是 “json formatter” 这类工具词，关键词进名字，title、H1、域名、品牌词四处同时吃到匹配。
2. 控制在 2 个词、约 16 字符内。title 按「名字 — 关键词描述」拼，总长超约 60 字符会被搜索结果截断。
3. 避开两个极端：纯通用词排不过老站，纯品牌词没人搜得到。关键词 + 品牌化修饰词，两头都占。
4. 定稿前三查：搜一下是否已有同名知名产品（有就换，否则品牌词搜索永远被它压着）、仓库名是否被占、子域名是否被占。

武器二 · 写代码前，先验证依赖

别凭记忆猜 CDN 路径和接口字段。写码前逐个用 curl 验证外部资源，再用真实数据样本跑一遍解析规则——光这一条就能消掉大部分「AI 写的代码跑不通」。

1. 外部数据三级回退：每日构建的小 JSON → 直连全量接口 → 内置兜底数据。合并时逐字段覆盖（非空才覆盖），不要整条替换——在线数据常见缺字段。
2. 所有网络请求加超时（AbortController，8–15 秒）；重计算设输入上限，超限自动降级为估算，「精确 / 估算」徽标同步跟着变。
3. 多语言页面：默认语言的文案直接预填进 HTML（爬虫不执行 JS）。语言优先级：URL 参数 → localStorage → 浏览器语言。
4. 测试：先起本地服务（python3 -m http.server）再开浏览器测功能，别用 file:// 测；上线后验证要带随机参数，绕过 GitHub Pages 的 10 分钟缓存。

武器三 · 高频坑清单——每条都真实踩过

🤖 配合 AI 使用：把本页（9 步 + 秘密武器）整段丢给你的 AI 助手，让它按这套流程帮你做下一个站——这才是教程的完整用法。

🙋 遇到问题？卡住了？咨询作者（X）