从零开始免费部署你的个站，只需要一个下午。以及为何你也该试试

先说结论

这篇文章记录了我用一下午时间，从零（没有 idea，没有设计稿，没有模板）搭建并部署上线个人网站 alex-huang.dev 的完整过程。

工具链：ChatGPT → Google Gemini → Claude Code → GitHub Pages。

实际用时约 4-5 小时。全程没有写设计稿，没有买模板，建站成本只有域名费 $12。

几个发现：

1. AI 工具链不替你做决策，是帮你把”模糊”快速变成”可执行”
2. GPT负责需求整理，Gemini 负责起原型，Claude Code 负责深耕，它们流水线上的不同阶段，不是竞争关系。我选择它们的原因只因为它们分别是个人认为各自领域的SOTA
3. 部署是最容易被低估的环节——留够时间

为什么我要写这篇

我刚大学毕业那年，为了找工作做了第一个个人网站。WordPress，自带模板，断断续续花了几周才上线。当时已经觉得很不容易了。

上周我突然想：现在的我，工具和经验都比那时多得多，如果重新从零开始，最快能多快？

我给自己定了一个目标：一天内，从零到上线。“零”的意思是连 idea 都没有，不知道想建什么样的网站。

这篇文章是完整的过程记录：遇到了什么，怎么解决的，哪些工具真的有用，哪些地方踩了坑。

先看最终效果

完成后的网站：alex-huang.dev

• 首页：Hero 区域 + 技能展示 + 推荐语
• 项目页：5 个 Salesforce / AI 项目的完整 case study
• 博客：可持续更新的技术文章
• 简历页：从简历数据文件自动渲染
• 部署方式：GitHub Pages + GitHub Actions（push 即发布，且免费！）
• 域名：自定义域名，HTTPS 全绑定

和当年的 WordPress 版本相比：可维护性高了几倍，速度快，费用几乎为零，更重要的是——它是我真正掌控的系统，而不是一个我只是”用着”的CMS平台。我可以自由地定义我想要的，模样，很酷炫或者低调的交互，不用怕被删除的内容，自由的部署！

环境 / 前提 / 你需要准备什么

工具账号：

• GitHub 账号（部署用，免费）
• OpenAI 账号（ChatGPT，需求整理）
• Google AI Studio 账号（Gemini，免费额度充足）
• Claude Code CLI（终端工具，需要订阅 Claude Pro）
• （所有AI工具皆有许多替代品，更简单的操作，建议选择手头上现有的，好用的工具）

本地环境：

• Node.js（v18+）
• Git
• 一个终端（macOS Terminal / WSL / iTerm 均可）
• （别被这个地方吓到了！所有东西AI都可以帮你安装）

域名：

• 可选，但推荐。.dev 域名约 $12/年，还有不少域名首年有优惠

你需要有：

• 会用 git（git add / commit / push）
• 能看懂基础 HTML/CSS（不需要会写，能辨认就够）
• 约 8 个小时不被打断的时间

整体思路

整个流程分 4 个阶段：

需求整理（0.5h）→ 原型生成（0.5-1h）→ 深度定制（1-2h）→ 部署上线（1h）
  ChatGPT          Gemini          Claude Code      GitHub Pages

• 第一步最容易被跳过，但影响最大：需求不清就动手，会在后面反复返工
• 第二步速度最快，效果最超出预期：Gemini 生成可跑代码，不是草图
• 第三步最费时，也最有价值：AI 负责写，你负责决策
• 第四步最容易被低估：部署有几个关键节点，任何一个卡住都要花时间

Step 1. 用 ChatGPT 把需求从模糊变清晰

这一步要做什么

把”我想建个网站”这种模糊目标，变成一份有技术方向、有页面结构、有设计风格的需求稿。

为什么这么做

Vibe Coding 时代，AI 确实能从很模糊的需求生成代码，但越模糊，后期返工越多。花 1 小时把需求写清楚，能为后面节省至少 4 小时。

具体操作

打开 ChatGPT，把它当产品顾问，依次聊：

聊技术选型：

我想建一个个人技术博客 + 作品集网站，要求：
- 静态部署，希望用 GitHub Pages（免费）
- 绑定自定义域名
- 支持博客功能（分类、标签、RSS）
- 不需要后端

请推荐适合的技术栈，说明优劣。

聊设计参考：

推荐 10 个设计优秀的开发者个人网站，带链接。
风格方向：极简、dark mode、现代感、信息密度适中。

从中挑 3–5 个你真的喜欢的，截图留用。

让它输出需求稿：

基于我们的讨论，帮我写一份个人网站需求稿，包含：
1. 技术栈选型及原因
2. 页面结构（哪些页面，每页有什么）
3. 视觉方向（风格、色调、字体方向）
4. 核心功能列表

格式要清晰，我接下来要拿这份需求稿生成代码。

预期结果

你手里应该有一份 1–2 页的需求稿，包含：技术栈、页面列表、视觉方向、功能清单。

常见问题

Q: 需求稿要多细才够用？ A: 不用非常细。关键是”视觉方向”要具体，加几句参考案例描述，Gemini 生成的效果会好很多。其他功能性内容可以粗一些。

Q: 我不知道选什么技术栈怎么办？ A: 静态博客首选 Astro（对 Markdown 友好，生态成熟）或 Next.js（更灵活但重一些）。我选的是 Astro + astro-paper 主题作为基础。

如何验证

把需求稿读一遍，确认你能回答：

• 网站有哪几个页面？
• 整体视觉是什么感觉？（有参考案例最好）
• 用什么部署？

Step 2. 用 Google Gemini 生成网站原型

这一步要做什么

把需求稿喂给 Gemini，生成可以在本地直接跑的网站代码。

为什么选 Gemini

• 免费 Token 额度大，对这种一次性项目性价比高
• 生成完整代码的能力强，出来是可跑代码，不是伪代码
• 处理长 prompt（带完整需求稿 + 简历内容）稳定

具体操作

打开 Google AI Studio，新建一个对话，粘贴：

我需要建一个个人技术博客 + 作品集网站。

[粘贴你的需求稿]

我的简历内容如下：
[粘贴简历，或者关键信息：名字、职位、技能、项目列表]

请帮我生成完整的网站代码，技术栈：Astro + Tailwind CSS。
要求：
- 可以直接在本地运行
- dark mode 默认
- 极简现代感，带入场动效
- 按照需求稿的页面结构生成

等几分钟，Gemini 会输出完整代码。

本地运行：

# 如果 Gemini 生成的是 Astro 项目
npm install
npm run dev
# 打开 http://localhost:4321

预期结果

浏览器里能看到你的网站雏形。结构大体对，视觉方向对了。这时候大概是 60–80% 的完成度。

常见问题

Q: Gemini 生成的代码跑不起来怎么办？ A: 先看终端报错。最常见的是依赖版本问题，把报错复制给 ChatGPT 问解决方法。

Q: 效果和我想的差很多怎么办？ A: 在同一个对话里继续迭代：“把首页 Hero 区域改成这样……”。Gemini 上下文保留得比较好，不需要重新开始。

Q: 可以用 Claude 代替 Gemini 吗？ A: 可以，效果也不错。我选 Gemini 是因为这个阶段不需要读取文件系统，用网页版够了，Gemini 额度更大。

如何验证

• 本地 npm run dev 可以跑起来
• 浏览器能看到完整页面，没有白屏
• 终端没有 error（warning 可以先忽略）

Step 3. 用 Claude Code 做深度定制

这一步要做什么

在 Gemini 的基础上，做所有需要理解整个项目上下文才能完成的工作：博客功能集成、内容迁移、个性化定制、动效添加。

为什么切换到 Claude Code

Gemini 很适合”从零生成”，但处理”在已有代码上改动”时，它缺少文件系统上下文。每次改动都要手动复制粘贴代码，稍微复杂一点的需求就很容易改出 bug。

Claude Code 在本地运行，直接读写文件，理解完整项目结构。对话一开始就有全局上下文，处理”跨多文件联动修改”的任务要顺手得多。

具体操作

安装 Claude Code：

npm install -g @anthropic-ai/claude-code
claude

首次运行会要求登录 Claude Pro 账号。

在项目目录里启动：

cd your-website-folder
claude

然后用自然语言描述需求：

把这个网站改造成支持博客的形式。
博客文章用 Markdown 写，存在 src/data/blog/ 目录下。
每篇文章的 frontmatter 格式参考 Astro Content Collections。

我有这些旧文章，帮我按格式迁移进来：
[粘贴旧文章内容]

给首页加一个入场动效：
页面加载时，各个区块依次从下往上 fade in，间隔 100ms。
用纯 CSS transition 实现，不要引入新的动画库。

Claude Code 会直接读取你的文件，输出修改，你确认后它会写入。

预期结果

这一步完成后，网站应该达到 90–95% 的完成度：内容是真实的，功能是完整的，样式是你想要的。

常见问题

Q: Claude Code 改完以后网站跑不起来了怎么办？ A: 先跑 npm run build，把报错信息粘贴回 Claude Code：“你的修改导致了这个报错，帮我修复。” 它通常可以直接定位并修复。

Q: 它改了我不想改的地方怎么办？ A: git diff 看清楚改了什么，然后告诉它”只改 X 文件，不要动 Y”。建议每完成一个功能点就 git commit 一次，方便回退。

Q: 不懂代码，看不懂它改了什么怎么办？ A: 问它：“解释一下你刚才做了什么”。它会用人话说清楚，不需要你读代码。

如何验证

每完成一个功能块后：

npm run build   # 确认构建通过
npm run preview # 本地预览最终效果

检查：

• 博客文章列表正常显示
• 点进文章内容正常渲染
• 首页动效正常触发
• 所有页面 build 通过，无 error

Step 4. 用 GitHub Pages 部署上线

这一步要做什么

把本地代码推到 GitHub，配置自动部署，绑定自定义域名，让网站在公网上可以访问。

为什么用 GitHub Pages

• 完全免费
• 和 GitHub 仓库天然集成，push 代码自动发布
• 支持自定义域名 + HTTPS

具体操作

1. 在 GitHub 创建仓库，推送代码：

git init
git add .
git commit -m "feat: initial launch"
git remote add origin https://github.com/你的用户名/仓库名.git
git push -u origin main

2. 创建 GitHub Actions workflow：

在项目根目录创建 .github/workflows/deploy.yml：

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

3. 在 GitHub 仓库 Settings 里启用 Pages：

进入仓库 → Settings → Pages → Source，选择 GitHub Actions（不是 Branch）。

⚠️ 这一步非常容易忘。如果跳过，第一次 CI 会直接报错。

4. 绑定自定义域名（可选）：

在项目 public/ 目录创建 CNAME 文件，内容就是你的域名：

alex-huang.dev

在域名注册商处添加 DNS 记录：

然后在仓库 Settings → Pages → Custom domain 填入你的域名，勾选 Enforce HTTPS。

5. 等待 CI 跑完：

git add .github/workflows/deploy.yml public/CNAME
git commit -m "chore: add deploy workflow and custom domain"
git push

去 GitHub 仓库的 Actions 标签看状态。绿色 = 部署成功。

预期结果

• CI 跑完后，访问 https://你的用户名.github.io/仓库名 可以看到网站
• 绑了自定义域名后，DNS 传播通常需要几分钟到几小时，之后自定义域名可访问

常见问题

Q: CI 失败，报错 configure-pages 相关错误？ A: 99% 是 GitHub Pages Source 没设置成 “GitHub Actions”。去 Settings → Pages 改一下，然后重新触发 CI（可以空 commit push 或者在 Actions 里手动 Re-run）。

Q: 自定义域名配置了但访问是 404？ A: 检查顺序：(1) DNS 记录有没有保存；(2) CNAME 文件是否在 public/ 目录；(3) Settings 里 Custom domain 有没有填；(4) DNS 传播了吗（可以用 whatsmydns.net 查）。

Q: 在 WSL 里 git push 报权限错误？ A: SSH key 有 passphrase 的情况下，WSL 非交互 shell 无法输入。可以用 HTTPS + Personal Access Token（PAT）：

# 生成 PAT：GitHub → Settings → Developer settings → Personal access tokens
git remote set-url origin https://<你的PAT>@github.com/用户名/仓库名.git
git push
# push 完之后立即 strip 掉 token
git remote set-url origin https://github.com/用户名/仓库名.git

如何验证

• GitHub Actions → 对应 workflow 显示绿色
• 访问 GitHub Pages 链接可以打开
• 如果绑了域名：自定义域名可以访问，HTTPS 证书有效

我踩过的坑

坑 1：GitHub Pages Source 必须提前设置

现象：推了代码，Actions 里出现报错，workflow 里 configure-pages@v5 这一步直接失败。

原因：configure-pages action 要求仓库的 Pages Source 已经设置为 “GitHub Actions”，但 GitHub 默认不开启这个选项，需要手动去 Settings → Pages 里改。

怎么发现的：看 Actions 错误日志，有一行提示 “Pages is not enabled”。

正确做法：创建 workflow 文件之前，先去 Settings → Pages 把 Source 改好，再推代码。

坑 2：npm run preview 显示的是旧版本

现象：改了代码，npm run preview 一看，效果还是旧的，以为代码改丢了。

原因：preview 命令直接 serve dist/ 目录的内容，不会自动重新构建。如果上次 build 是旧版本，preview 就是旧版本。

正确做法：改完代码先 npm run build，再 npm run preview。

# 正确姿势
npm run build && npm run preview

# 不要直接用 preview 验证新改动

坑 3：下载的 SVG 文件其实是报错 XML

现象：图片在网站上不显示，检查文件，ls -lh 看到文件只有 275 bytes。

原因：某些资源 URL（比如 S3 bucket 里的文件）没有正确的访问权限，curl 下载时会返回 HTTP 200 但内容是 XML 格式的错误信息，文件名看起来正确但内容是这样：

<Error><Code>AccessDenied</Code><Message>Access Denied</Message></Error>

正确做法：下载完检查文件大小。正常 SVG 图标一般 > 3KB，PNG/JPG 更大。如果文件只有几百字节，用 cat 看一眼内容。

坑 4：外部 CDN URL 有过期时间

现象：网站上线几个月后，logo 图片突然不显示了。

原因：某些 CDN（比如 LinkedIn 的图片 URL）包含过期参数，例如 ?e=1774483200，过了时间点 URL 就失效。

正确做法：所有图片资源本地化，下载到 public/images/ 目录，引用本地路径。不要直接在代码里用外部 CDN URL。

为什么这个方案有效

工具的分工逻辑是关键。 这套流程能跑通，不是因为某一个工具特别厉害，而是每个工具用在了它最擅长的事情上：

• ChatGPT 的优势是对话式头脑风暴，帮你把模糊的想法变成结构化需求
• Gemini 的优势是长 context 代码生成，从空白到可跑原型，速度最快
• Claude Code 的优势是本地上下文 + 文件系统操作，处理跨文件的复杂改动

每个阶段的输入，都是上一个阶段的产出。流水线串起来，才有这个速度。

这个方法的边界

适合：

• 静态网站（博客、作品集、文档站）
• 个人项目，不需要后端 / 数据库
• 有一定技术背景，不怕看终端的人
• 时间有限，希望快速验证想法

不适合：

• 需要动态功能（用户系统、评论系统、数据库）
• 完全不碰代码的场景（这种情况可以看 Wix / Squarespace）
• 需要高度定制设计的商业网站（那个时间成本会更高）

可能变化的地方：

• AI 工具更新很快，Gemini / Claude 的代码生成能力还在提升
• GitHub Actions 的 workflow 格式偶尔有 breaking change，建议直接看官方文档
• 域名价格和 DNS 配置方式因注册商而异

最后给你一个可直接照抄的版本

最简步骤清单

• Step 1: ChatGPT 头脑风暴 → 输出需求稿（1h）
• Step 2: Gemini 生成代码 → 本地跑通（2h）
• Step 3: Claude Code 深度定制 → 内容完整（3-4h）
• Step 4: GitHub Pages 部署 → 上线（1h）

命令清单

# 本地开发
npm install
npm run dev           # 开发模式 http://localhost:4321
npm run build         # 构建生产版本
npm run preview       # 预览构建结果（需先 build）

# Git 操作
git init
git add .
git commit -m "feat: initial launch"
git remote add origin https://github.com/用户名/仓库名.git
git push -u origin main

# WSL 下 HTTPS push（SSH passphrase 问题的 workaround）
git remote set-url origin https://<PAT>@github.com/用户名/仓库名.git
git push
git remote set-url origin https://github.com/用户名/仓库名.git

GitHub Pages DNS 配置清单

部署前检查清单

• .github/workflows/deploy.yml 已创建并推送
• GitHub Settings → Pages → Source 已设为 “GitHub Actions”
• public/CNAME 文件内容是你的域名
• Settings → Pages → Custom domain 已填入域名
• DNS 记录已在注册商处保存
• Actions 里最新的 workflow run 是绿色

总结

最重要的 3 个结论：

1. AI 建站的瓶颈不在代码生成，在于你能不能快速做决策。需求越清晰，AI 执行越精准。
2. Gemini 起原型，Claude Code 深耕，这两者不是竞争关系，是同一流水线的两个阶段。
3. 部署不是最后 10 分钟的事。GitHub Pages 的配置、DNS 传播、HTTPS 证书，每一步都可能卡人。留够时间。

新手最该注意的 3 个坑：

1. 推代码前先在 GitHub Settings 里把 Pages Source 设好，否则第一次 CI 必然失败
2. 改完代码先 build 再 preview，不然你看到的是旧版本
3. 图片资源不要直接引用外部 CDN URL，下载到本地再用

如果只能记住一件事：

不要等一切准备好再开始。需求不完整也能开始，设计不完美也能上线。一个活着的网站，永远比一个完美的计划有价值。