零基础1小时上线个人网站！Cursor+GitHub免费部署，手残党亲测有效

你好，我是予贝，AI时代，专注于AI编程

点击👇关注我

用 Cursor 开发一个个人主页/作品展示。 2. 2. 学会用 AI 修改代码并部署到线上。

　

　

一）什么是静态网页？

静态网页是由 纯 HTML、CSS 和 JavaScript 代码 构成的网页，内容固定不变，无需服务器动态生成。 　

特点： 　

• 浏览器直接打开就能运行（例如双击 index.html 文件）。
• 适合展示型内容：个人简历、作品集、企业介绍页。
• 内容更新需手动修改代码（如修改文字、图片）。

　

二）静态网页 vs 动态网页（对比）

对比表格　

　

举个生活例子　

静态网页 ：

• 像一本纸质菜单，内容印刷后固定不变。
• 典型场景：餐馆的菜品展示页（无需实时更新）。

动态网页 ：

• 像电子点餐屏幕，菜品库存和价格实时变化。
• 典型场景：美团外卖（需实时显示商家状态和用户订单）。

　

三） 基础三件套的作用

静态网页由三种核心技术构成，各司其职：　

1、HTML：网页的骨架

• 核心作用：定义网页内容的结构（标题、段落、图片、按钮等）。
• 代码示例：

  
  
  
  
      
    欢迎来到我的网站
========

  
    这是我的第一个网页

  
    点击这里  
  

• 运行效果：浏览器会直接显示标题、文字和按钮，但没有任何样式和交互。

　

　

2、CSS：网页的皮肤

• 核心作用：控制网页的视觉效果（颜色、大小、布局、动画等）。
• 代码示例：

  
/* 添加在 HTML 的  或外部 .css 文件 */  
h1 {  
  color: blue;        /* 标题颜色 */  
  font-size: 36px;    /* 文字大小 */  
  text-align: center; /* 居中显示 */  
}  
button {  
  background: orange; /* 按钮背景色 */  
  padding: 10px 20px; /* 内边距 */  
  border-radius: 5px; /* 圆角 */  
}

• 运行效果：标题变蓝色居中，按钮变成橙色圆角样式。

　

3、JavaScript：网页的肌肉

• 核心作用：实现用户交互（点击响应、数据计算、动态内容变化等）。
• 代码示例：

  
// 添加在 HTML 的   
  

　

---

　

5、初学者学习建议　

通俗解释： 　

1. HTML 决定页面上有什么内容（标题、文字、图片）。 　

2. CSS 控制内容的外观（颜色、大小、位置）。 　

3. JavaScript 让页面可以互动（点击按钮弹窗、轮播图切换）。 　

　

　

一）新建 website 项目

　

在桌面新建 website 文件，并使用 Cursor 打开　

　

二）生成网页框架

AI 提示词：　

  
我需要用HTML，CSS，JS 写一个炫酷的个人网站，我想展示我的个人信息和产品，请帮我搭建基本该网页的框架。  
- 我的个人信息：名字：予贝，微信：clzicheng 邮箱：clc826155567@163.com，网站名：予贝AI编程  
- 我的个人介绍：专注AI编程应用实战，致力于让小白实现程序开发梦想  
- 产品：我后续会开发一些编程工具，需要有一些介绍，并且提供下载方式  
- 我的公众号：予贝AI编程  
  
# 要求  
- 个人介绍内容占比不要太大  
- 适配PC端浏览器

　

把提示词粘贴到对话框，点击发送后 AI 就开始帮我们开发了，开发完成后点击 Accept　

　

三）本地预览

　

开发完成后在本地找到项目目录中的index.html→ 双击用浏览器打开 ，第一次效果如下　

产品展示页　

　

四）修改内容

1、添加产品链接和截图

目前产品展示页还没有内容，我希望能增加一个我的产品 ，这里使用的链接是 gitee 链接　

  
我的第一个产品是班级积分管理系统，我需要帮你添加该产品，并且展示产品截图，点击该产品后跳转到产品链接：  
产品链接：https://gitee.com/clcmj/class-points-system  
产品截图：

　

产品截图使用 Cursor 中的 @文件功能　

2、修改界面内容

这次我希望删掉已发布，查看项目等相关内容，不需要即将推出内容，并采用点击标签即可跳转的形式，发送提示词　

　

修改后界面如下　

　

　

3、优化界面布局

之前生成的首页布局有些乱，接下来进行布局的修改。　

　

这样一个首页基本开发完成了，点击产品可以进行跳转，后续增加内容后可以进行优化　

　

一）github 仓库创建

代码编写完成后，我们需要提交到 git， 进入 github，点击右上+号，点击 New repository 创建新仓库　

　

输入仓库名，点击 Create repository 创建仓库，Public 是代码公开，别人可以看到，并且可以下载等操作，Private 是私有，其他人看不到你的代码库。　

二）代码提交

　

创建仓库后会显示提交命令，这些命令现在已经不用记了，直接让 Cursor 完成　

　

　

告诉 cursor 我们的远程仓库地址是什么，并且打开 Agent 模式，Cursor 会自动帮我们提交代码。　

　

　

提交完成后点击刷新，界面如下所示　

　

　

　

　

三）程序部署

　

点击 Setting，选择左侧 Pages 页面，代码分支选择 master，点击 save，等待几分钟后会出现站名地址，我们直接访问该站点即可。　

　

　

效果如下　

　

　

地址是：https://clcmj.github.io/website/，欢迎大家访问。

AI编程交流群已经200人了，只能通过邀请进群了，群内有 Cursor + DeepSeek 教程，欢迎大家进群交流学习，感兴趣的扫码添加好友邀你进群。