VibeCoding——0成本开发个人网站并上线部署

1小时前 0

来源

正文

公众号名称：子言 sugar 杂谈

作者名称：子言 sugar

发布时间：2026-05-21 12:53

又是 VibeCoding 的一天，今天全程实战教大家 0 成本上线并部署属于个人的网站。网上也有很多教程，比如 GithubPages 之类的，但是这种对于国内用户还是很不友好的。我尝试了很多方案，相信可能也会存在其他的 0 成本的更好的方案，但是这里提供我的落地实战了的(Figma+Trae+Gitlab+Vercel+DNSHE+CloudFlare)，供大家学习参考。

使用 Figma 生成原型图

这里我之前的文章也给大家介绍过了，为什么要添加这一步了，因为如果我们直接使用 Trae，说给我生成一个个人网站，相信最后也能生成，，但是页面样式什么都是千篇一律的，个人感觉不是很好看。那么我们可以登录 Figma，在社区里搜索 portfolio，这样我们就可以借鉴（copy）一下别人好看的样式啦！

当然，同样我们也可以自己使用 Figma 的 Describe your idea and make it come to life 来自己生成自己想要的原型图

使用 Trae 生成代码

1、这里，我直接使用 Trae 的 solo 模式生成我的代码了

参考这个原型图，帮我一比一复刻开发一个全中文的个人网站。
可以支持我在gitlab托管的指定文件夹下按指定命名和格式添加markdown形式的文章
，也支持我上传照片，按命名展示。
最后我想要在gitlab上上传代码，并部署在vercel上，这样别人也能访问。

代码上传 GitLab

1、首先注册 Gitlab 账号，登录网址 https://gitlab.com/

2、可以看到 trae，帮我们生成好了后续的上传以及部署教程，我们按找说明来就行了

3、这里大家可以下载 git,然后跟着 readme,操作就可以了

最后，在 gitbash 里面运行就可以了。

# 进入项目目录
cd personal-website
# 初始化 Git 仓库
git init
# 添加所有文件
git add .
# 提交更改
git commit -m "初始化个人网站"
# 关联远程仓库（替换为你的 GitLab 地址）
git remote add origin https://gitlab.com/ 你的用户名/
portfolio
.git
# 推送到 GitLab
git branch -M main
git push -u origin main

大功告成，上传成功！

Vercel 部署

1、这里也根据 ReadMe，文档操作就可以了。Vercel 里面选择创建新项目，选择 Gitlab 导入你的仓库就可以构建部署了。

2、其实，正常到这里就已经部署成功，可以正常访问了

但是因为国内 vercel 域名污染的问题，所以没办法正常访问，可以看到使用手机访问的 vercel.app 已经可以正常打开了。

3、那么到这里大功告成！不不不，我们在国内，还是不要经常爬梯子。

申请免费域名并托管 CloudFlare

1、https://my.dnshe.com 这是一个免费域名的申请网址，有效期一年。

2、https://www.cloudflare-cn.com/。我们将在 dnshe 申请到的免费域名，托管到 cloudflare 中。

3、托管成功后，我们在 vercel 里，绑定我们申请的免费域名。

这时，我们访问就可以显示我们的页面啦。后期如果我们有什么修改，也只需要在我们之前预留的文件夹下

如何添加内容
添加文章：
1.在articles/文件夹创建.md文件
2.编辑articles/index.json添加文章信息
添加照片：
1.将照片放入photos/文件夹
2.编辑photos/index.json添加照片信息

按照指定规则，上传到 gitlab 上，然后 Vercel 里 ReDeploy 一下就可以啦

End

好了，我们的个人网站已经成功部署，并且可以分享给别人访问啦。相信大家也都已经学会啦，具体操作过程有问题也欢迎大家留言，当然，也可以直接问 AI，相信也一定能解决你的疑问。最后，喜欢这篇文章的话，就关注分享吧，谢谢大家！

- END -

点亮【赞与在看】，让这世间的好运都流向你。

内容效果不满意？点此反馈