AI爆火，但你的网站还只是展示名片？在这个智能体正全面走入生产力体系的时代，个人网站不再只是静态主页，而是你的“AI化接口”。这篇文章将帮你重新审视网站的定位，从工具选型到结构搭建，手把手构建一个“会自己说话”的智能个人网站。

这次要分享的技术是——个人网站搭建。

大家可以按照下面这个流程来搭建专属于自己的，移植了大模型技术的个人网站。

也就是说，当你在模型系统提示词中充分描述了自己的个人信息之后，它甚至能帮你向别人介绍你自己。废话不多说了，我们开始吧。

所需原材料及成本

deepseek账号

deepseek账号是用来购买deepseek的api，如果不喜欢deepseek可以自行购买其他模型api，只有一个要求：大陆网络能够调的通即可。

本教程将以deepseek为例进行演示，api充值需要花钱，这里建议充值10元，因此总成本来到了10元

一个阿里云账号

阿里云账号是用来购买函数计算FC平台的额度，以及进行域名的购买，这里估计你会听的很懵，什么是函数计算？什么是域名？我们现在不需要知道，只需要知道函数计算的额度建议充值10元，而域名购买至少需要10元，因此总成本来到了30元一个github账号

github是我们用来托管前端界面代码的地方，这里不需要花钱，但是需要能访问github，此项成本为0，总成本为 30元

cursor

cursor是帮我们把我们想要的网站转化成代码实现的主人翁，可以付费充值也可以不充值，使用新用户的15天试用也足够了。

到这里为止，已经给大家罗列出来了需要准备的四个材料，请自行前往对应的平台进行注册和登录，充值的事情不必着急，只是先说在前头，如果成本超过你的预期，不好意思，可以退出了。如果成本可以接受，那么我们正式进入个人网站的构建。

个人网站构建——静态前端

估计看到标题的时候一脸懵吧？但是从这里开始，有些事情要讲清楚了，不然后面和cursor合作的时候我怕cursor太累，所以，我们先简单了解下什么是静态前端。

静态前端
静态前端就像一本提前印刷好的书，它的每一页都已固定，所以任何一个读者（访客）访问这个静态前端的时候，里面展示的内容都是一模一样，不会变化的。
构建这样一个静态前端需要很多的环境依赖，自己搭建相当麻烦，因此本教程将借助github来实现静态前端的部署，并使静态前端可以被公网访问。

登录github并且创建仓库

登录并注册github之后，我们应该就来到了以下界面：

github基础概念介绍
当我们来到github的时候，我们就正式踏入”代码”的世界了，先恭喜你，成为了一名极客（Geek）！

github是一个管理远程仓库和本地仓库的平台，所谓仓库其实就是repository，用来存储代码的地方，我们可以看到页面左侧顶部有一个“Top repositories”的字段，也就是我们现在有的仓库，新建的用户一般什么都没有，为空。

到这里，我们要知道github里面有一个概念叫做repository(简称repo)，每一个repo都存放着一个项目对应的所有代码。

接下来，请点击“Top repositories”右侧的绿色、写着“New”的按钮，这个按钮用于新建一个repo，用来存放我们接下来存放个人网站的所有代码。点击New，之后进入如下页面：

在这个页面中，

红色框框的位置用于填入该repo的名称，这个地方要千万注意，这个repo的名称一定要设置为**.github.io，其中这个**是你的github用户名，
绿色框框的位置用于填入这个repo的简介，自己决定填什么，
黄色框框用于选择这个仓库是Public（公开）还是private（私人），这里注意一定要选私人，选择公开的话相当于你后面的代码任何访客都能访问，如果不介意也可以选择公开，
紫色框框用于勾选是否要添加ReadME文件，这个文件一般用于介绍项目的代码结构，方便访客快速理解代码项目的逻辑，在这个项目我们勾选。

填好之后点击最下面的create repository按钮，新建这个仓库，进入如下界面：

到这里，这一步就完成了，我们登录了github，并且创建了一个用以存放个人网站代码的仓库。接下来我们要下载git指令，来往这个仓库里面传递代码，并且初次打开专属于自己的静态网页。

就决定是你了！Git！

在开始使用git传递代码之前，我们先明确一件事：cursor可以工作。

我们打开cursor之后，可以看到如下图所示的四个区域：

红色框框选中的区域是资源管理区，我们将在这个区域管理查看我们的项目文件。

绿色框框选中的区域是我们的终端命令行区域，也就是terminal，如果这个区域没有显现，可以按ctrl+`(小键盘左侧esc下面那个)来唤起，

蓝紫色框框选中的是我们的模型对话区，如果这个窗口没有显现，那么可以按下ctrl+l(小写的L)来唤起。

了解了我们的cursor界面之后，下一步，我们需要确定的一件事是：在蓝紫色框框中可以和模型对话，请在对话框中输入你好，确保模型能够响应。

如果可以响应，那么我们进入下一步，安装git，

如果不能响应，小红书有个叫石耳的人发了个复活cursor的教程，可以去参考。

window系统：win+R，ios系统：command+R，输入cmd：

唤醒命令提示符：

在该窗口输入git –version（中间有个空格）,并且回车，查看电脑环境中是否有git工具，如果返回一个版本号，那就是有git工具：

如果返回的是如下结果，那就是没有git工具，需要安装：

windows系统进入：
https://git-scm.com/download/win进行安装：

下载完后点击下载的文件进行安装，一路点击next就好。

ios系统默认有git，如果没有当你在命令提示符输入git –version之后，应该会自动询问是否下载，跟着下载就好。

到这一步，确保 win+R 输入cmd唤起命令提示符之后，输入git –version返回的是版本号即可。

接下来，我们进入cursor，并且用cursor open file打开一个文件夹（建议新建一个文件夹，接下来所有代码文件都放在这里面）：

我们接下来要在git的终端命令行中使用git工具在我们新建的远程github仓库中拉取代码以及推送代码，这个过程中会涉及一个权限验证的问题。

拉取代码&权限验证
我们在github中建立了一个私人仓库之后，我们访问仓库以及推送代码到仓库上去修改仓库都会触发权限校验：判断你是否有权限这么做，只有通过了权限校验，才能让我们的拉取以及推送动作顺利进行。
权限校验是另外一个内容，可以参考这篇文档：
Github权限校验

我们进入刚刚创建的github仓库：

点击Code然后选择SSH方式，复制下面的SSH地址，然后回到cursor在终端命令行（使用ctrl+`唤醒）中输入：git clone SSH地址，应该效果如下：

我们会看到git 指令拉取下来的文件放在一个文件夹中，接下来我们的所有代码都应该在这个文件夹下，所以，我们要在命令行终端中进入这个文件夹。

因为我的文件夹名称叫example 所以我要在命令行终端中执行：cd example

命令行指令-cd
终端命令行可以执行一切图形界面能够执行的操作，当然是在使用了正确的指令的前提下。而终端的工作方式就是进入正确的路径，做正确的操作，而进入路径的指令就是cd ，cd example这个指令的含义就是进入当前所在路径的名称为example的文件夹

接下来我们调用提示词，让cursor帮我们写一个网页，我的提示词是这个：

构建静态网页的提示词
claude，请帮我写一个个人网站的静态页面，我打算把我这个网站的前端放在github上，然后后端的逻辑放在阿里云函数计算FC上，请帮我基于这个思路先写一个静态demo，我来试试看能不能跑通流程

然后claude帮我创建了以下文件：

但是我们刚刚说过了，文件全部要放在git clone拉取下来的文件夹下，所以要把文件全部剪切进去。至此，就完成了前端代码的设计，但是我们并不知道cursor的代码是否正确，我们来验证下。接下来我们来第一次提交代码推送到github仓库。

在终端命令行中执行：git add . （别忘了有个.）

发现报错，将报错交给你信任的ai，它会帮你分析问题，在这里我已经见过这个报错太多次了，直接执行：

git config –global –add safe.directory
E:/persoal_website/example (后面这个
E:/personal_website/example是我的文件路径，这里因人而异)

再次执行 git add . 之后执行git commit -m “第一次添加前端代码” 最后执行git push origin main 如图：

代码解释
别慌别慌，我来解释这一串代码了，本质上是三句指令：git add .以及git commit -m “****”和gitpushoriginmain不过我们在执行第一句的时候报错了，需要多加一句git config –global –add safe.directory
E:/persoal_website/example，最后这一句长长这一句最好理解，是因为设备不相信这个路径，认为它不安全，所以阻止你执行git add . ，那这句git add .究竟执行了什么？让设备这么紧张兮兮呢？
答案就在git的工作原理上：为了让远程github仓库中的代码和我们本地的代码同步，我们执行推送代码的指令的时候，git会维护一个介于远程仓库和本地之间的第三方容器，一个暂时存放代码的桶，而我们执行git add .的时候，就是把我们目前本地修改过的代码直接放到这个桶里，如果我们本地修改的代码有安全性问题，之后执行推送就会把有问题的代码直接扔到远程仓库上，这会带来难以估量的损失，所以会有一个安全性校验。而第二句代码：git commit -m “第一次添加前端” 这个指令是给存放了我们刚刚修改的代码的第三方桶上贴一个标签“第一次修改前端”，这么做的好处是在远程仓库里面你能看到哪些代码是刚刚修改的，如下图：

我们明显看到修改过的代码被贴上了“第一次添加前端代码”的标记。至于最后一句指令：gitpushoriginmain则是将暂存桶中的代码推送到我们的远程仓库上，也正是这一步实现了最后的推送。至于最后这句指令的origin和main是什么意思，感兴趣的可以自行摸索。

到这里为止，我们就实现了本地代码和远程仓库的通信，那么我们怎么确认刚才的代码能工作呢？这就要感谢我们的github了，他为我们每个用户注册了一个域名，打个比方，你的github用户名叫Ria,那么你注册账号的时候，会有一个叫Ria.github.io的域名自动和你绑定，而当你建立一个叫Ria.github.io的仓库的时候，它会自动将这个仓库中的前端代码放到这个域名上，也就是说，你现在可以在网址中输入：***.github.io来访问刚才的前端代码了，快去看看cursor写的前端能不能工作吧！

像我这里就成功部署了静态网站，并且能够访问了。

这已经能够满足部分要求了，但是身为在AI领域的我们，怎么能就此满足呢？让我们来给我们的个人网页移植AI助手功能。

个人网页构建——动态后端逻辑

购买DeepseekAPI

要给自己的页面添加AI助手的功能，就需要一个大模型API，这里将以Deepseek为例，来分析如何买API：

https://platform.deepseek.com/usage

进入Deepseek API开放平台，然后点进充值界面充值10块大洋，这个不需要教程了，我们要相信我们平台在充值引导这一块的能力。

消费完之后我们要来到API页面：

创建一个API Key之后记得复制，之后就没法复制了。

到这里我们就有了一个能够自行调用的API Key，至于怎么调用，我们可以完全信任cursor，但是打开接口文档看一下还是很有必要的，请自行阅读接口文档。

购买阿里云函数计算FC&域名

函数计算FC是什么？是一个无服务器的后端函数响应，能够绑定github仓库，来给后端添加执行逻辑。

我们只需要知道这么多就够了，你又不是臭码农（🤡），对自己的头发好一点~

https://www.aliyun.com

阿里云的平台很复杂，很多地方难以定位，因此我们将会借助搜索框来定位，我们在搜索框中搜索函数计算FC，进入如下界面：

选择第一个：

点击管理控制台来到这个网页：

接下来我们会多次用到这个网页，请一定记住这个网页，并且我将称这个网页为函数计算FC项目控制台。

介绍完了函数计算FC项目控制台，我们点击右上角的人头来充值，建议充值10块，充值的流程同样不介绍。

解释一下为什么要充值，函数计算FC每个月有40万用量，理论上是免费的，但是出口流量要钱，也就是说每次用户调用个人网站的后端的时候我们都要付流量钱，但是我们不必担心这个钱会花的很快，我测试过了，基本上够用三四年，而如果你的网站一两天把你的10块钱烧光了，你应该开心，因为你的网站流量极大（大约上万人的样子），你可能要火，到时请别忘记是我教你网站搭建的，务必给我买两个带肉的馒头次次。

然后我们来购买自己的域名：

https://wanwang.aliyun.com/domain?spm=5176.28712684.J_BH-sN9LTwtajbkmYL1i7V.d_menu_1

在这个网站中搜索自己想要的域名的前缀，打个比方，我的英文名叫ria-hello，那么我就搜ria-hello，结果如下：

挑一个自己能接受的域名购买就好了，本质上没有差别，都是域名。

购买流程比较繁琐，但是流程线性，要创建信息模板并且填一些个人资料，填一下就好了。

到这一步我们就购买成功了函数计算FC以及我们个人网站的域名，接下来我们要来开始个人网站的后端开发了。

创建并配置函数计算项目＆域名DNS解析

我们回到函数计算项目控制台，创建一个项目（从空白模板中创建），然后输入项目名称以及简介，进入如下页面：

我的项目名称为galahad_website，我们新建一个服务，类型为函数：

将上述配置更改之后即可创建服务，其他保持不动就好。

进入刚刚创建的函数计算服务，进入其中的配置选项，进入高级选项：点击进入自定义域名的编辑选项：

然后保存这个自定义域名配置，我们来进行域名解析。在阿里云搜索栏搜索云解析DNS。

进入云解析管理控制台后选择刚刚购买的域名，点击快速添加解析：

进入到如下配置页面：

到这里就算域名配置完毕了，回到函数计算项目控制台处，重新手动触发项目部署，然后就可以访问:

http://www.***.***查看自己的网站是否启动成功了，我的启动结果如下：

崩掉了，但是别害怕，截图给cursor，并且我附上了以下提示词：

提示词——修复网站异常
@
https://developer.aliyun.com/article/1277169 注意这篇阿里云的注意事项，然后给我这个项目添加一个逻辑：增加一个后端的AI调用功能（调用deepseek的api）给前端添加AI助手功能支持。我简单介绍一下我们技术的实现：我们的前端放在github的example仓库里面，后端实现想由阿里云函数计算FC实现，请你帮我设计这个后端实现。函数计算自定义的域名是：
http://www.galahad.website，这个服务地址在中国香港同时这个域名已经实现过DNS解析，你直接帮我写代码就好，如果有什么信息缺失导致你无法写代码可以直接问我。
绿色部分需要自定义，其中网址要换成自己的网址，模型如果调用的是别的模型，也更改一下

cursor帮我改了代码，我原封不动全部接受，然后git add . / git commit -m “cursor修改代码” / git push origin main 直接推送到github仓库，等待函数计算FC部署完毕之后再进入
http://www.galahad.website如下：

喔喔，还是服务器内部异常，你的情况应该不可能比我还糟了吧？我们一起来尝试解决吧，接下来我不会自己动手改一点代码，把这个问题解决。

过来人来搭把手

这部分教程写了一天，还是完全删掉了，前后端的代码虽然没有什么太大难度，但是要一篇文章解释清楚，还是有点难，打个比方，石耳遇到了后端POST逻辑在工作时被读取为GET的问题，于是我去逛社区，逛到了一个解答，因此问题得到了解决，这一个问题石耳花点时间能够讲清楚，但是没有办法写一个教程保证大家遇到的问题逛多久社区能解决，而claude也好gemini也罢，仍然没办法解决所有问题。经过苦思冥想，石耳最终决定干脆给大家一个代码包大家自己解压，从我的提供的代码包上做二次设计好了：

https://van74caskm3.feishu.cn/wiki/M0Alw0v9fi0sCSkTkL3cun7enoE?from=from_copylink

👆这个链接是一个飞书共享文档，我把代码包放在里面了，大家自己拿吧。

拿到代码压缩包之后，在自己的本地文件夹下解压，然后进入template.yaml这个文件，配置自己的参数：