← 返回项目列表
完整教程 内容来源:First_web.md

如何快速使用AI搭建可访问的网站

完整内容由 First_web.md 自动转换,保留原始图片与步骤说明。

第一阶段:基建与破冰 (环境与工具准备)

这一阶段的重点是帮新手打通网络任督二脉,并准备好现代 AI 程序员的“兵器库”。

  1. 1
    魔法梯子搭建指北: 从零教小白如何配置科学的网络环境(基础扫盲、工具推荐与节点配置)。
  2. 2
    注册与下载 Cursor: 纠正传统写代码的思维,引入最强 AI 编辑器 Cursor 的下载、安装与基础界面认知。
  3. 3
    搞定账号与会员: 演示如何注册账号、绑卡或订阅会员(Pro),解锁最强模型的调用权限。 https://github.com/clash-verge-rev/clash-verge-rev 教程截图

第二阶段:注册使用Codex (Vibe Coding 实战)

这里是激发新手兴趣的核心。不需要枯燥的语法课,直接让他们看到成果。

  1. 我简单说一下Codex的注册使用以及步骤。没有国外信用卡的化,就只能用app的礼品卡来完成注册开通,或者闲鱼淘宝直接买代充什么的,但是博主觉得竟然大家都想研究AI,这点操作动手能力最好就自己踩踩坑研究一下,因为以后部署服务器以及上线部署各种问题都是层出不穷的,有了AI加持最主要的就是动手能力以及架构思维。
  2. 1
    首先注册一个163的邮箱账号https://mail.163.com/

注册苹果iD账号

  1. 1
    用注册好的163邮箱账号去apple官网注册一个国内大陆的苹果iD。注册号后在设置里面将地区国家改到土耳其或者现在开通gpt plus比较便宜的国家地方去(当时我买的时候是土耳其地区),这时候就需要用到梯子,最好选择对应的国家的网络去转换,防止被封号。https://account.apple.com/sign-in 教程截图
  2. 2
    然后如何充值礼品卡,最简单的方法就是闲鱼直接搜土区礼品卡购买。教程截图
  3. 3
    最好直接在appstore界面充值兑换的礼品卡号码,卡内就有500的里拉,这样下载chatgpt直接充值弹出来就是499里拉了(只不过现在好像涨价了) 教程截图
  4. 4
    充值完毕后登录chatgpt网页和codex就会显示是plus用户了。这样就可以开始vibe coding了。 教程截图 教程截图

第三阶段:开始Vibecoding网站

我做过很多其他项目,但是没有个人网页,所以我先生成一个初版的个人网页,跟大家同步一起完善自己的个人网页,域名和小程序都在备案中,后面我会持续地完善这网页的项目教学内容,大家可以持续关注。提示词大致如下。大家可以根据个人喜好慢慢的跟codex微调,下一期我会出一个如何高效率使用Codex的教程。

教程截图

第四阶段:轻量级出海部署 (Cloudflare 零成本上线)

在进入复杂的服务器之前,先用最简单的方案让新手获得成就感。

  1. 1
    认识 Cloudflare: 为什么它是白嫖党和独立开发者的最爱。
  2. 2
    域名与托管: 教新手如何注册便宜的域名并解析到 Cloudflare。
  3. 3
    一键部署静态网站: 利用 Cloudflare Pages 或 Workers,把第二阶段用 AI 写好的静态网页直接免费部署上线,立刻能在手机上访问。
  4. 使用Cloudflare好处就是不用部署服务器,能快速预览浏览,适合给朋友做点小页面快速上线展示效果。步骤如下所示,把项目里的打包好的前端dist文件上传到cloudflare上,即可出现相对应的图片效果。有问题可以直接问Codex。
  5. 教程截图
  6. 教程截图
  7. 教程截图
  8. 教程截图
  9. 教程截图