从零搭建个人网站全流程分享(Namecheap + Cloudflare + Vercel + AI 生成)

查看 15|回复 1
作者:qianfuzi13   
最近用 AI 工具 + 静态部署搭了个小站,过程中整理了一份从零开始的部署流程,分享给同样想建站的朋友。如果有疏漏欢迎指正,也欢迎交流优化建议~

网站地址放在文末,纯技术分享,无商业推广 😄

一、域名注册( Namecheap )
  • 注册平台:Namecheap(全球知名,价格透明,常有新人优惠)

  • 注册提示:
  • 支持国内邮箱注册,如未收到验证码请检查垃圾邮件
  • 查询心仪域名是否可注册
  • 支付建议选 PayPal (支持绑定银联卡),注册周期按需选择(我选的 1 年)


    二、DNS 解析( Cloudflare )
    虽然 Namecheap 自带 DNS ,但更推荐用 Cloudflare ,优势明显:
    ✅ 全球 CDN 加速,尤其服务器在海外时提升显著
    ✅ 免费套餐含自动缓存、静态资源优化
    ✅ 支持自动 HTTPS 、Brotli 压缩等实用功能
    🔗 控制台: https://dash.cloudflare.com (支持简体中文,可用 Google 账号快捷登录)
    配置步骤:
    [ol]
  • 左侧菜单 → 域 → 添加站点 → 输入域名 → 选择 Free 计划
  • 系统会自动同步旧域名的解析记录(新域名则跳过)
  • 复制 Cloudflare 分配的 Nameserver 地址
  • 回到 Namecheap:Domain List → Manage → Nameservers → 粘贴保存

  • 返回 Cloudflare 点击 完成,并开启以下优化:
  • Automatic HTTPS Rewrites
  • Always Use HTTPS
  • Brotli 压缩
  • 等待 DNS 生效(页面显示 Active 即可)
    [/ol]
    📌 小知识:
  • Namecheap:负责域名所有权 + 设置 Nameserver
  • Cloudflare:负责 DNS 解析( A/CNAME 记录)+ 流量调度 + 安全加速

    三、网站生成( AI 工具 + Vercel )
    我用的方案:
  • 🎨 页面生成:v0.app( Vercel 官方 AI 工具,免费额度有限,按需充值)
  • 💡 备选方案:Kimi(免费额度更友好,适合轻度使用)


    两者都能通过自然语言描述生成前端代码,对新手非常友好

    四、代码托管( GitHub )
    [ol]
  • GitHub 右上角 + → New repository
  • 建议设为 Private(按需选择)
  • 本地提交代码( Git 基础操作,不熟悉的朋友可搜索「 Git 入门教程」)
    [/ol]
    五、Vercel 部署 & 域名绑定
    [ol]
  • 登录 Vercel 控制台 → Add New → Project
  • 导入 GitHub 仓库 → 点击 Deploy(静态页面通常无需额外配置)

  • 部署成功后:
  • 先用 Vercel 赠送的 .vercel.app 域名测试
  • 进入 Domains 添加自定义域名
  • 建议同时配置 example.com 和 www.example.com,并设置 301 重定向减少跳转

    [/ol]
    同步解析到 Cloudflare:
  • Cloudflare 控制台 → DNS → Records → 添加记录
  • 按 Vercel 提示添加两条 CNAME/A 记录(带 www 和不带 www )
  • 保存后等待 SSL 证书自动签发(通常几分钟内)

    ⚠️ 常见问题:

    提交代码后 Vercel 未自动部署,提示:
    No GitHub account was found matching the commit author email address

    ✅ 解决方案:检查本地 Git 邮箱是否与 GitHub 账号一致
    git config --global user.email "你的 GitHub 绑定邮箱"```,重新提交即可触发部署。
    ## 小结
    整个流程:域名注册 → DNS 解析 → AI 生成页面 → GitHub 托管 → Vercel 部署,全程可用免费/低成本方案完成。适合想快速上线个人项目、作品集或实验性站点的朋友。
    如果流程中有不清楚的地方,欢迎留言讨论~
    也欢迎帮我看看小站有没有体验问题
    👉 https://y2kfashion.games
  • SayHelloHi   
    域名可以看看 spaceship porkbun cloudflare 这三家的域名价格可以
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部