用阿里云和Qoder，一键打造个人主页，让你的面试率翻倍，坐等丰厚的offer吧！

春节后，春招季来临，个人主页你准备好了吗？

大家好呀，我是阿星！时间过得真快，春节一过，春招的季节又来了。无论你是刚毕业的学生，还是已经在职场打拼的朋友，赶紧来完善一下你的个人主页吧！

如果你是面试官或者雇主，你会更倾向于哪个简历呢？

你可能感兴趣：Qoder JetBrains 插件：揭开后端复杂性的神秘面纱，今天的热门话题！

普通简历是这样的👇

而AI制作的个人主页则是这样的👇

今天阿星就来分享如何用AI轻松制作个人主页的方法，跟着我一起走就行！

我们将使用“阿里云ECS+Qoder在线部署”，直接把它放到公网。

第一步：选择阿里云服务器

点击右侧的建站首选👆

当你看到绿色的“已部署”字样，就可以进入服务器控制台了。

接着，点击右边的远程连接，再点“立即登录”。继续——

这时你可以通过SSH访问，相当于在网页上打开了你的服务器。

不过，要注意的是，如果你还没输入完的代码关闭了网页，前端也会随之关闭。

后面会教你怎么避免这个问题。

你的界面会显示成这样，只需要输入#后面的代码，记得不要把#加进去哦。

每次输入一行，别一次性全复制进去。

而且，输入代码时尽量不要刷新页面，因为它不会保存你正在打的内容。

# sudo su
# cd /root
# qodercli --yolo --model=auto

启动qoder

接下来，我们需要在浏览器端登录，具体代码如下。

# 1. 登录
qodercli /login

# 2. 进入你要改的项目（把 portfolio 换成你查到的项目名）
cd /root/portfolio

# 3. 启动
告诉qoder启动项目

这里可能会出现一些错误提示，比如说积分不足之类的。

阿星的解决方法很简单，直接重新登录。

问问AI，给你改成登出的指令就可以了。

基本上就大功告成了。这里假设你是qoder的新用户。

然后会弹出一个入口，

我们双击就能看到一个登录页面，

确认后返回会提示你成功登录了。

制作网页

接下来把提示词直接发给AI，就可以了。

我是一名即将毕业的计算机科学专业应届生，正在寻求软件开发工程师(后端/全栈方向)的职位。请为我创建一个专业、技术感强的个人主页，作为我的'云端名片’。

重要环境说明：当前运行环境为阿里云ECS服务器，生成HTML文件后需要启动Web服务对外提供访问。请务必输出包含ECS公网IP地址和端口号的完整远程访问地址（格式如：http://公网IP:端口），而不是localhost地址。我的公网IP地址是xxx。（替换成你自己服务器的公网地址即可）

核心模块包括：
醒目导航栏：链接到“关于我”、“项目经历”、“技术栈”、“联系方式”。
项目展示区：以卡片式或列表形式清晰展示我的3-5个核心项目（学校项目、实习项目、个人项目）。每个项目需要包含：项目名称、简短描述、使用的关键技术栈、项目链接（GitHub/Demo）、项目难点与解决方案（可选）。

技能树/技术栈模块：
直观地列出我熟练掌握的编程语言、框架、数据库、工具等，可以用进度条或标签云展示熟练度。

“关于我”简介：
简短的个人陈述，突出技术热情、学习能力和解决问题能力。旁边需要放置一张专业形象照。

**联系方式区域：
**显著位置放置邮箱、领英链接、GitHub链接。最好能有一个简单的联系表单。

设计风格：
现代、简洁、代码感（可以使用深色模式或科技蓝等色调），布局清晰易读，重点突出项目和技术能力。

额外需求：
支持Markdown格式编写项目描述；能嵌入GitHub贡献图；确保移动端浏览体验良好。SEO基础优化。

记得个人信息部分👆也可以请AI帮你整理成markdown格式，这样呈现的信息会更准确。

主要是因为markdown的语法让我们能更清晰地掌握层级关系。现在有种说法，跟AI对话不需要长篇累牍，但像简历这类内容，最好提前整理好。

把下方整理好的个人信息加在提示词的末尾就行。

如何优化页面颜值

第一版生成后页面大概是这样的

那么，如何让页面看起来更好呢？

阿星常用的美化网站是21dev，里面有很多现成的模板。

重点是，每个模板打开后，不要只看提示词，而要去点击“查看代码”，然后把代码复制下来，这样就能和后面的提示词连接起来。

在你的简历提示词下加上这些话，这几句话很有必要记住。

视觉上，参考`demo.tsx`和`xxx.tsx`的代码，确保： 
1. 分析组件结构并识别所有必需的依赖。  
2. 查看组件的参数和状态。  
3. 识别任何必需的上下文提供者或挂钩，并安装它们。 
4. 如果组件需要，使用 lucide-react 图标作为 SVG 或徽标。 
5. 其他区块的视觉与 Hero 部分适配。

优化后的效果大概长这样👇🏻

页面不显示怎么办

阿里云ECS默认开放22（SSH）和80（HTTP）端口，但你启动的8080端口可能被阿里云的“安全组”挡住了。

解决方法：

1. 1. 登录阿里云控制台。
2. 2. 找到你的ECS实例 -> 安全组 -> 配置规则。
3. 3. 添加一条“入方向”规则：协议 TCP，端口 8080，授权对象 0.0.0.0/0。

1. 4. 如果还是不行，就：

# 停止防火墙服务（CentOS 常用）
systemctl stop firewalld

1. 5. 如果还是不行，就：

如果还不行，试试：

# 或者清空所有的临时拦截规则
iptables -F

阿星自己到这一步才有效的。

如何复用这些代码

无论是将服务器的代码推送到GitHub，还是从服务器拉取到本地，其实步骤都很简单：

1. 1.推送到GitHub（同步到云端仓库）

前提：你需要先在GitHub上点击“New repository”创建一个名为portfolio的空项目，并复制它的HTTPS地址。

在服务器终端执行：

# 进入项目文件夹cd /root/portfolio

# 初始化并关联（仅第一次需要）
git init
git remote add origin https://github.com/你的用户名/portfolio.git

# 提交并推送到 GitHub
git add .
git commit -m "update"
git push -u origin main

由于你的阿里云服务器是新的，需要将服务器的“钥匙（SSH Key）”添加到GitHub。

SSH Key的作用是：在不安全的网络中（比如互联网），为两台电脑建立一个“加密通道”，确保你们传输的数据（密码、代码）不会被他人窃取。

不过你的阿里云可能会出现打印失败的情况。

这个时候，记得跟阿里云服务器说：

“请直接在对话框里打印出 ~/.ssh/id_rsa.pub 的文件内容，不要运行失败。”

---

1. 2.拉取到本地用vscode远程编辑（下载到你的电脑）

如果你想把服务器上的代码直接下载到你当前电脑的桌面上，

直接在本地电脑上操作，不用GitHub

你可以在自己电脑上的终端（比如Mac的Terminal或者Windows的PowerShell）里直接执行以下命令：

# 命令格式：scp -r 用户名@服务器IP:服务器路径 本地路径
scp -r root@39.106.90.140:/root/portfolio ~/Desktop/

不过呢，这种做法在正式开发中可能不太严谨，但如果是自己用的话，那就没关系啦。

说到这里，有一点需要注意：

为了演示方便，现在我直接开启了安全组。

但在实际企业环境中，很多公司通常会用堡垒机来增强安全审计。

所以大家可以随便试试就好。

如何让网页始终保持在线状态

最后，回到我们开头提到的，怎么才能让网页不掉线呢？

我建议大家使用宝塔面板，这样会方便很多。

不过这次我们的实践是基于阿里云的ssh远程连接，

所以我也尝试了一下在网页端能不能实现——

这里就需要了解一种可以让网页不掉线的工具。

Nginx！它是我们托管网页的关键，没有它的话，你的页面就会消失。为什么需要Nginx来盯着呢？

因为互联网的访问是瞬时且随机的。为了确保世界上任何人在任何时刻都能打开你的链接，Nginx就像一个24小时待命的快递员，随时准备发送文件。

整体来看，它们的关系就像是一家711便利店，Nginx和服务器之间的角色分工如下：

店员 (Nginx)： 24小时值班，负责取货。

进货 (开发者)： 你写的代码就是货架上的商品。

店主 (阿里云)： 提供店铺的外观、电力和货架空间。

唯一标识 (域名/端口)： * 门牌号 (域名)： 比如 a.com 去找 A 货架，b.com 去找 B 货架。

后门 (端口)： 如果没有域名，就靠端口号来区分。比如 80 端口看简历，8080 端口看博客。

这就是为什么每次打开百度都能看到它，不会看不到。

即使你关掉了页面（也就是关闭了终端），网页依然会在线。不过如果你杀掉了Nginx进程，这个“监控”就会失效，快递员也就不见了。

1. 清理环境 (释放80端口)

如果服务器上安装了Apache，必须先完全停用它，否则Nginx无法启动。

Bash

systemctl stop httpd       # 立即停止 Apache
systemctl disable httpd    # 禁止 Apache 开机自启

2. 安装与启动服务

安装Nginx并将其设置为“永不宕机”模式。

Bash

yum install nginx -y       # 安装 Nginx
systemctl start nginx      # 启动服务
systemctl enable nginx     # 关键：设置开机自动启动

3. 资源部署 (放置货物)

建立一个规范的目录，把你的前端文件放进去。

Bash

mkdir -p /var/www/html     # 创建标准的网页存放目录# 在项目目录下执行：
mv index.html styles.css script.js lib/ /var/www/html/

4. 核心配置 (修改路径)

这是最重要的一步，修改Nginx的“导航设置”，让它指向你的新目录。

• • 操作：vi /etc/nginx/nginx.conf
• • 修改点： 找到 server 块中的 root 这一行。
• • 修改前：root /usr/share/nginx/html;
• • 修改后：root /var/www/html;

5. 验证与生效

修改完配置后，务必要执行以下命令，否则Nginx还是会按旧的方式工作。

Bash

nginx -t                   # 检查配置文件是否有语法错误
systemctl reload nginx     # 不重启服务，仅重新加载配置（推荐）

---

好啦，赶紧去试试吧～

我是阿星！

更多AI应用，下次再见！