路导：用 Trae 从0克隆next.js网站并发布（长文图解，完整步骤，小白专属）

路导：用 Trae 从0克隆next.js网站并发布（长文图解，完整步骤，小白专属） 路导：用 Trae 从0克隆next.js网站并发布（长文图解，完整步骤，小白专属） Modified September 11, 2025 底部导航区域 这个部分比较简单，一把成功，效果如下： 到此为止，基础效果已经完成，后续要实现的话，就是按照上面的步骤，逐渐迭代，不断增加即可。 发布上线 Github 代码仓库 Github 的使用教程很多，如： https://www.runoob.com/w3cnote/git guide.html 当然了，也可以让AI来手把手教你。 1. 1. 注册 Github，创建一个同名的仓库 1. 2. 输入提示词：指导我把代码推送到github上。 1. 3. 按照AI的提示操作，就会把代码推送到Github中 PS：如果这一步比较麻烦，可以直接B站上看看相关的教程。 发布到 vercel 直接看教程 https://juejin.cn/post/7143067114025254919 ，或者让AI知道都可以。 一键部署： 经过上面的步骤，你就会得到一个网站。 恭喜你，到此为止你得到了一个可以被所有人访问的网站 https://zenblog zpit.vercel.app/ Ps：域名，如果有必要，可以购买然后绑定。 底部导航区域 这个部分比较简单，一把成功，效果如下： 到此为止，基础效果已经完成，后续要实现的话，就是按照上面的步骤，逐渐迭代，不断增加即可。 发布上线 Github 代码仓库 Github 的使用教程很多，如： https://www.runoob.com/w3cnote/git guide.html 当然了，也可以让AI来手把手教你。 1. 1. 注册 Github，创建一个同名的仓库 1. 2. 输入提示词：指导我把代码推送到github上。 1. 3. 按照AI的提示操作，就会把代码推送到Github中 PS：如果这一步比较麻烦，可以直接B站上看看相关的教程。 发布到 vercel 直接看教程 https://juejin.cn/post/7143067114025254919 ，或者让AI知道都可以。 一键部署： 经过上面的步骤，你就会得到一个网站。 恭喜你，到此为止你得到了一个可以被所有人访问的网站 https://zenblog zpit.vercel.app/ Ps：域名，如果有必要，可以购买然后绑定。 🔗 原文链接： https://mp.weixin.qq.com/s/r4tl 6NM... https://mp.weixin.qq.com/s/r4tl 6NM... 原创 路导 SocialPrompt 2025年02月20日 14:00 浙江 无意中看到了一个博客网站，风格我非常喜欢，所以就想要拥有一个。 被复制的网站地址： https://zed.dev/blog 我用AI做出来的网址： https://zenblog zpit.vercel.app/ 做的过程中顺手记录了整个过程，在实现中，我尽量不使用编程术语，尽量用大白话。 实际效果 准备工作 分析要拷贝页面的技术栈 1. 1. 打开 https://www.wappalyzer.com/ 输入要分析的网站地址 1. 2. 得到技术栈，我们主要关心框架和ui 截图要克隆的网页 分析页面功能 这个页面比较简单 1. 1. 顶部导航栏 2. 2. 页面主体区域 a. 分类在左边 b. 文章列表在右边 c. 标题位置 d. 文章卡片展示位置 e. 文章列表和分类区域 a. 分类在左边 b. 文章列表在右边 c. 标题位置 d. 文章卡片展示位置 e. 文章列表和分类区域 3. 3. 底部导航栏 开始克隆出效果 基础工作 看到基础效果 1. 1. 创建一个空的文件夹，注意名字要用英文小写 1. 2. 用 Trae 打开 1. 3. 采用 Builder 模式，上传截图，输入提示词：复制图片效果，实现一个 nextjs 博客网站 1. 4. 在AI的指导下创建项目文件安装必要环境依赖，对话框点击运行即可，有问题AI会尝试解决。 1. 问题：如果依赖总是安装不成功怎么办？ 1. 原因是：网络的问题。 2. 解决方法：先 Control + C 结束执行「这个时候Trae可能会继续执行，写代码，等它执行结束」，然后和AI对话：我在中国大陆，npm安装太慢，依赖未安装，使用淘宝镜像安装。并且用 yarn 安装。 3. 4. 5. 运行预览基础效果。输入提示词：运行项目，预览效果。 a. 直接在 Trae 中预览效果，点击弹窗 「打开Webview」，或者左侧侧边栏点击「web 预览」 a. 根据提示的地址在浏览器中预览 a. 直接在 Trae 中预览效果，点击弹窗 「打开Webview」，或者左侧侧边栏点击「web 预览」 a. 根据提示的地址在浏览器中预览 然后就可以看到效果了。 问题：有可能会有异常。如图所示。 解决办法：直接和AI说 解决运行的异常。 逐渐完善 分析基础效果 有了基础效果之后，我们可以根据基础效果对照原网页，罗列所有不像的地方： 1. 1. 背景样式，字体不对。 1. 2. 中间三个图片卡片样式不对。 1. 3. 缺少文章的分类和文字列表部分。 1. 4. 缺少底部导航部分 以上是简要的分析，可以看到，只要想找，会找到很多不一样的地方。 逐渐完善 根据分析拆分后续要实现内容 我的目的是做出完整的效果，细节的样式问题不做处理，因此下一步要实现的是：文章列表部分和底部导航栏。 文章列表部分 提示词：根据图片实现文章列表部分。位置在当前内容的下面。 可以看到很快就写出来效果。 🍞 小技巧 — 不要直接点击全部接受，先看效果。 由于AI修改的内容不一定符合实际需求。所以不要直接接受，要先检查效果是否符合需求。如果不符合，可以拒绝。或者让 AI 解释新增代码的作用，再决定是否接受。 我们可以看到，样式和原文件不太一样，但是和项目整体的ui是一样的，对于UI的样式目前不一定要完全一样，我们的逻辑是先做出来功能，然后调整样式，那么接下来，我们可以发现：左侧分类菜单栏还没有。 🌰 功能分析：实际使用我们会发现，左侧菜单栏，分类内容是文章的分类，在页面滚动的时候，菜单会吸顶。 提示词：根据图片实现文章部分左侧菜单栏，内容是文章的分类，在页面滚动的时候，菜单会吸顶。 执行后会发现有异常。 📍 异常调试技巧 — 选中所有异常，然后添加到对话。直接对话：解决所有异常。 我们发现位置有问题，那么接下来就是调整位置。 精准修改小技巧 — 让AI添加注释，解释每一段代码对应的功能是什么，这样，可以直接找到对应的代码，然后精准提出修改建议。AI也可以根据注释更好的定位修改位置。 提示词技巧 — 说清楚比说的多更重要，大部分情况下也不需要特殊语法，能够明确的说清楚要实现的功能的位置，大小，效果是最重要的。 效果完美。 文章列表太少了，让AI增加几条，我们看看完整效果。