1️⃣引言

不知道各位有没有想过做一个个人网站，以前作者都是自己琢磨琢磨，看看 hexo，看看 worldPress，再挑选挑选它们的相关主题，看看能不能做出我自己想要的样式，但是人总是贪心的，总是想设计自己的独一无二的主题，用别人的主题总是能看到与自己相同的页面，但是自己又不太懂代码，导致在别人的主题上改改之后，总是没有自己预期效果

现在有了大模型之后，发现想生成一套自己独一无二的网站成本很低，甚至都不需要懂编程知识就可以完成，所以 作者写了这篇文章来展示一下怎么 0 基础做一套自己的静态个人网站

这篇文章教大家如何用 AI 大模型编程工具 0 成本实现一个自己的网站，并且部署上线，可以在 web 上最小的访问到。 先放效果演示地址：li-bo-kai.cn/

事先说明：网站里面的个人信息全部是由 AI 生成的，包括生成了 10 篇博客内容，内容不保证正确，和我本人没有关系 ♂️

准备工具

首先要实现这个功能的话，我们要准备的工具有以下几项，部分软件是要花钱的，但是都有平替版本，高配版本好用点但是需要付费，免费的也不能说不好用，效果差不多

  • AI 编程工具：Cursor(付费) / Trae(国内免费，外网版本付费)
  • 代码仓库账号：GitHub 账号（免费）
  • 部署网站账号：Vercel（免费）

实现步骤

1.搭建网站页面

新建一个文件夹，进入该文件夹，通过 AI 编程编辑器打开这个文件夹，映入眼帘的是一个空文件夹

我们点击这里 新增一个文件，输入以下内容，用于告诉 AI，我们这个是一个什么项目
我正在开始一个个人项目，目前是一个空文件夹。我打算使用 Vue.js 作为前端框架来开发这个项目。我希望你能帮助我一步步搭建起这个项目的基础结构，并根据最佳实践提供指导。 技术栈要求如下： 使用 git 来管理代码版本 使用 Vue 3（建议使用 Vite 构建工具以获得更好的开发体验） 使用 Vue Router 实现页面导航（如果需要多页面结构） 使用 Pinia 或 Vuex 进行状态管理 使用 SCSS/CSS 框架（如 Tailwind CSS、Bootstrap 等，请根据项目需求推荐） 我希望主题颜色是绿色的 (用户这里可以根据自己更改) 此外，我希望最终能够将该项目部署在 Vercel 平台上，请你在配置项目时考虑到 Vercel 的部署要求，例如提供 vercel.json 配置文件或相关构建指令。 如果有需要额外安装的依赖、配置文件或目录结构，请详细说明每一步操作，并给出对应的命令或代码片段。 请帮我从初始化项目开始，逐步引导我完成整个项目的搭建和部署流程。

将 AI Agent 调整到建筑者 Builder 模式，然后告诉它，我们来初始化这个项目，发送这段话

期间它可能想要执行一些命令，我们全部点击 run/运行，我这里电脑已经装了 npm 了，如果你电脑没装，AI 会自动驱动你装相关依赖的

 

可以看到，Claude大模型写了一大堆，从 0 开始项目已经写好了，最后给了我一个命令
Npm run dev 这个命令是项目的启动命令，我们执行它

看到控制台打印了这些日志，已经运行起来了，我们访问一下本地的 5173 端口，看看页面能否正常访问 他奈奈的，进来报错了，不靠谱啊，我们赶紧把错误再喂给它，解决一下

说话态度可以好一点，听说这样 AI 生成的代码更温柔更有效。
终于出来了，中间碰到几个问题，npm 的依赖未下载，搞了两次对话，Claude 也算把问题解决了

这就是一个简单的个人网站了，用户们要是要需要新的功能呢，新的需要，可以直接跟 AI 沟通，我们接下来看看这个项目如何发布

2.推送到远端代码仓库 github

我们创建一个新的 github 仓库，用来保存我们的代码，这里创建好了之后，复制仓库连接 来到我们的编辑器

将远端仓库添加到项目里面

假如你刚刚又更新了代码，碰到了问题，那我们就写一下 commit Message 把刚改的内容页提交上去。

点完这个 commit ，再点一下 push 或者 publish 发布按钮，这样子代码就推到远端仓库了，这里可能有的人访问不通 github，这个网上找一找解决方案

看到代码交上来就算成功啦 github.com/KeatonLi/tes

3.采用vercel发布静态网页

我们切换到 vercel 注册好账号进来

点击添加一个新项目，选择刚刚的代码仓库

直接 import，然后点击 deploy，页面就发布完成啦

演示链接：test-blog-rho-flax.vercel.app