我【如何】0成本搭建个人网站，没写一行代码！

大家好啊，这两天六六做了个个人网站，真的是0成本，没写一行代码！

主要功夫还是花在整理过往经历，代码交给AI，几分钟给你产出！然后个性化修改，部署上线！如果你对这些步骤比较熟悉，相信会更快。

无论你是找工作，做演讲，还是项目合作的时候，有这样一个可展示的网站一定能让大家第一时间了解你。

今天这篇就来跟大家分享下0基础，如何搭建满足个人特色的定制化展示网站。学会了这个，你可以举一反三，利用AI做各种想要展示的网站页面。

1 准备网页信息，梳理提示词

首先，将自己想要在网页里展示的信息整理出来。

重点！！提示词，下面的框架供大家参考：

这里大家可以重点看下，设计要求图片资源以及图标要求。

简单解释下，个人网站里的图片如没有特别需要，我们可以直接引用https://picsum.photos/里的图片作为展示；

如大家有指定图片要求，可以后期AI写完代码后，找到相应图片的代码位置，用自己指定的图片进行替换，后面会讲。

接着，咱们就来找下自己喜欢的设计风格的网站。这里，给大家推荐一个网站： https://onepagelove.com/

找到喜欢的风格，直接截图保存等待投喂AI编程工具。

2 AI编程工具写代码

这一步，我用的是cursor+豆包，字节的TRAE也可以；

我完全不会写代码，cursor也是边用边学~所以我是用cursor写代码，豆包修改调整+预览效果。

可能因为我的提示词里关于项目信息这些内容有点多，cursor总是无法反馈我完整代码，只能一段段反馈，我整合完后怕出错，就发给 豆包，惊喜的是，豆包帮我完善了这段代码，让网页展示效果更好。 所以我之后的修改就直接在豆包这里完成了。

对于小白来讲，如果你对于cursor操作不熟悉，个人网站更多是展示需求，但是又想要定制化，使用豆包的AI编程功能也可以直接出代码。

2.1 cursor

https://www.cursor.com/cn

下载并注册，语言选择中文即可。

使用时，右侧对话框里，贴上咱们刚写的提示词，并且可以将喜欢的风格图片直接粘贴在提示词里，一起发给它。

接下来，cursor就会按照要求以及风格反馈网站页面的代码。

如果不会用或者哪里不清楚，直接对话框里问它，它会给予你仔细的解答。

2.2 豆包修改+预览

选择AI编程，直接粘贴cursor反馈的代码，然后运行。

运行过程，你可以看到这样的页面，右面是代码显示以及预览效果，左边进行提问。

点击“预览”可以随时看网页效果。

这个版本，因为个人介绍部分，没有账号介绍，所以我继续追问，让它改写代码。

但是我不想自己去找，我就又问它

这不，它就按照我的要求给我干活了，大家在过程中，也可以通过反复对话来达到自己的目的。

最终，豆包反馈给了我一版代码。预览没问题后，我们可以点击右上角的“下载”。

豆包会直接将代码下载为index.html格式的文件

大家保存本地，可直接在电脑点击运行，也可以看到整个网站的效果。

2.3 如何个性化更改图片?

如果你想网页里的图片变成指定图片，比如个人简介那里的头像，想要替换怎么办？

方法一： 仍然可以直接告诉AI编程工具，想要替换个人简介的图像，但是这个时候你需要告诉它指定图片的链接。

方法二： 自己手动找到代码里个人简介图像的链接，替换这个链接为指定图片的链接。（找这个动作也可以教给AI）

举个例子：

黄框里的链接，就是我目前头像的图片链接（这个就是根据我们上面的提示词在图片库里随机取的），现在我需要替换为本地存的我自己的照片。

找到本地存的这个图片，然后命名，比如我命名为“profile.jpg”,那其中这个 src 属性的值就需要替换为“profile.jpg”也就是下面这个

<img src="profile.jpg" alt="XXX头像" class

放个原图对比下

注意！！这个src后面的这个属性值一定要跟你图片的名称一模一样。同理，你重命名为“photo.jpg”那这里就是：

<img src="photo.jpg" alt

但是因为之前下载下来得index我懒得在找编辑工具去改了，所以我就把改的这一步放在了github上。

3 发布到网上

3.1 注册Github

https://github.com/login

3.2 创建一个仓库

这里的名称Repository name 很重要 也就是你之后的个人网站的域名。 需要与你的owner下面的那个名称保持一致。

比如你owner名称叫“xiaowanzi”那这个Repository name就叫做“xiaowanzi.github.io”即可。

最后点击下面这个按钮

3.3 上传网站代码

这里，我分别上传了之前豆包直接下载的index的文件，以及我想要替换的个人头像的图片。

重点： 这里上传的index的名称一定不能错了，只能是index.html；之前我文件名称index（1）.html这种是不行的！！！

上传完后，因为我还需要去改下个人图片的那个代码，这个时候可以直接在这里编辑。

点击这里的index就可以进入编辑页面

点击这个笔的符号，进行编辑。找到刚说的个人图片的那个代码进行更改。

但是记得，编辑完后，要确认修改。

欧克，改完并确认完之后，我们再次回到这个页面，点击“Actions”

然后你就会看到这句话

等这句话前面的符号编程绿色的对号，恭喜你，你的网站已经成功部署完成。

这样，当大家点击刚刚的“xiaowanzi.github.io”就可以看到你的个人网页啦！

给大家看下我做的效果（截取部分内容）

写在最后

今天的分享就到这里啦！

希望看到这个教程的大家都可以制作一个属于自己的精美可视化个人网站。

如果大家中间有遇到任何问题，都可以用起AI工具，直接把问题抛给他们。

相信我，他们基本上能攻克你80%的问题。

剩下的20%就是你面向未知的不惧怕的心以及执行力。

快去试试吧！