[JS/TS] 利用AI编程与GitHub+Vercel快速搭建个人网站：零成本部署实战指南

本文将通过实战演示，如何在一小时内，借助AI编程工具和免费云平台，从零开始构建并上线一个专属的个人网站。整个过程成本极低，域名可选（如文中示例花费13元），但网站托管和构建服务完全免费。

准备工具

1. AI编程工具: 文中示例使用了Google Antigravity，您也可以使用其他具备代码生成能力的人工智能助手。
2. GitHub 账号: 用于托管网站源代码。
3. （可选）自定义域名: 如需使用个性域名，需自行购买。

第一步：使用AI生成网站代码

登录您选择的AI编程工具，通过清晰的提示词指令，让其为您生成个人网站的HTML、CSS、JavaScript等前端代码。核心是描述清楚您想要的网站风格、布局和内容模块。

提示词技巧：明确的提示词是获得高质量代码的关键。您可以要求AI生成一个响应式、包含首页、关于、项目展示和联系方式的静态网站。

第二步：创建GitHub代码仓库

1. 访问 GitHub官网 注册一个账号。
2. 登录后，点击新建仓库（Repository），地址为：https://github.com/new。
3. 为仓库命名（例如 my-personal-site），选择公开（Public），无需勾选初始化README.md文件，直接创建。

第三步：配置Git并上传代码至GitHub

在获得AI生成的代码文件后，需要将其上传到刚创建的GitHub仓库。您可以请AI助手指导您完成本地的Git配置和上传操作。

基本流程如下：

1. 初始化本地仓库：在代码文件夹中打开终端，执行 git init。
2. 关联远程仓库：git remote add origin <你的GitHub仓库URL>。
3. 提交代码：

   git add .
   git commit -m "Initial commit: AI-generated personal site"
   git branch -M main
   git push -u origin main

   执行git push时，会要求输入GitHub用户名和密码（或Personal Access Token）。

第四步：使用Vercel免费部署网站

Vercel 是一个极佳的静态网站托管平台，为个人项目提供免费、快速的全球CDN部署服务，并且能无缝对接GitHub，非常适合此类云原生的部署场景。

1. 访问 Vercel 官网，使用您的GitHub账号进行授权登录。
2. 点击“New Project”导入项目，选择您刚刚上传了代码的GitHub仓库。
3. 在配置页面，Vercel会自动检测项目类型（如静态网站）。通常无需额外设置，直接点击“Deploy”即可。

部署通常在几十秒内完成。成功后，Vercel会为您分配一个 *.vercel.app 的免费二级域名。您可以通过这个域名立即访问您刚刚上线的个人网站。

第五步：（可选）绑定自定义域名

如果您购买了自定义域名（如niuptang.online），可以在Vercel项目的“Domains”设置中添加该域名，并按照指引在域名注册商处修改DNS解析记录。验证通过后，即可通过您的专属域名访问网站。

至此，一个由AI辅助编程、基于GitHub进行运维版本管理、并通过Vercel实现自动化部署的免费个人网站已全部搭建完毕。您后续对网站代码的任何更新，只需推送至GitHub仓库，Vercel便会自动触发重新部署，实现高效的持续集成与交付。