阿里云+Qoder一键生成个人主页，面试率翻倍坐等offer

阿星AI工作室
218 阅读9分钟

图片

哈喽大家好

我是阿星

转眼春节过后，春招季又将到来。无论是应届毕业生还是职场人，都可以着手打造个人主页啦！

如果你是面试官/甲方，你会选被下面哪个简历第一时间吸引呢？

 

普通简历👇

图片

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让它给你改成登出的指令就行了。

基本就ok了。这里默认你是qoder的新用户。

图片

然后就会蹦出来一个入口，

我们直接双击就会出现一个login页面，

无脑确认后回来就会提示你已经成功登录了。

图片

制作网页

接下来我们把提示词直接在上面窗口里发给AI。

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

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

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

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

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

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

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

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

其中，个人信息部分👆也可以通过让AI帮你整理成markdown格式。

这样你呈现自己信息的时候也可以更精准。

主要还是因为markdown这种语法，让我们对于层级的把握更加清楚，现在也有一些说法说和跟AI对话的时候不用长篇大论，但是像简历这种指定内容最好还是提前整理。

把下面整理好的个人信息挂在上面的提示词末尾即可。

图片

如何优化页面颜值

第一版它就会出来这样一个页面

图片

那么，如何优化页面颜值？

阿星常用的颜值提升网站是21dev，里面的有好多预制菜。

图片

重点是每个模版点开后你应该看的不是提示词而是view code，点开之后把代码复制下来。就能衔接下下面的提示词。

图片

图片

在你的简历提示词下面加上这几句话，这几句话其实很有必要背会。

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

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

图片

页面不显示怎么办

阿里云 ECS 默认会开放 22 (SSH) 和 80 (HTTP) 端口。你启动的 8080 端口被阿里云的“安全组”挡住了。

解决办法 ：

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

图片

图片

    1. 如果还不行就：
# 停止防火墙服务（CentOS 常用）
systemctl stop firewalld
  1. 5. 如果还不行就：

如果还不行就：

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

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

如何复用这些代码

不管是把服务器的代码 推送到 GitHub ，还是从服务器 拉取到你现在的电脑（本地）  ，最简单的步骤如下：

    推送到 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 的文件内容，不要运行失败。”

    拉取到本地用vscode远程编辑（下载到你现在的电脑）

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

不需要经过 GitHub ，直接在你 本地电脑 的终端（Mac 的 Terminal 或 Windows 的 PowerShell）执行：

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

图片

不过这种在正式开发的时候不严谨 ，但是咱们自己用没问题。

图片

需要说明的是

现在是为了演示方便直接开了安全组

但在企业实战中

有的企业通常会配合 堡垒机 来做更高级的安全审计

所以大家自己用用就行了

如何让页面保持前端一直在线

最后，我们回到开头说的，如何让网页一直在前端不掉线。

我推荐大家用宝塔面板，会省事很多。

但是我们此次实践是基于阿里云ssh远程连接，

所以我又专门摸索了一下在网页端行不行——

这里就需要学习一个让我们的网页不掉线的东东。

Nginx！我们全靠它进行托管，否则没它盯着你的页面就看不到了。为什么会需要nginx盯着？

因为互联网的访问是 随机且瞬间 的。为了保证世界上任何一个人在任何时间点点开你的链接都能看到网页，这个发货员必须 24 小时保持“盯着”状态，随时准备把文件发出去。

图片

整体上看他们就像是一家711商店， Nginx 和服务器之间的关系如下，

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

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

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

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

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

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

如果你关掉页面（关闭终端），网页依然在。但如果你 sha掉了 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     # 不重启服务，仅重新加载配置（推荐）

ok，快去试试吧～

我是阿星！

更多AI应用，我们下期再见！

图片

avatar
文章
阅读
粉丝