DevCode
← 返回文章列表

教程 · 2026年6月10日

VibeCoding 做个线上图片压缩网站

用 Cursor Agent 模式从零做出纯前端图片压缩站 → 本地 Canvas 压缩不上传 → Git 推仓库 → GitHub Pages 上线，双击 HTML 即可本地使用。

  • VibeCoding
  • Cursor
  • AI编程
  • GitHub Pages
  • 前端

安装包、工具与相关资源见文末 相关资源下载合集。

一、目标与开发工具

目标： 做一个纯前端图片压缩网站，HTML + CSS + JS + Canvas 本地压缩、不上传服务器；双击 HTML 即可本地使用，也可部署到 GitHub Pages 线上访问。

推荐工具： Codex、Claude Code、Cursor（任选其一或组合使用）。

Cursor 下载地址：https://cursor.com/cn/download

按安装向导完成安装即可。为什么推荐 Cursor？Pro 的 Auto 模式性价比高，适合日常 VibeCoding 练手。

内部低价 Cursor Pro 购买链接： 淘宝链接

二、用 AI 生成项目

1. 推荐流程

  1. 先 Ask 模式 讨论需求，确定方案
  2. 切换到 Agent 模式 开始生成代码
  3. 在本地打开项目验收效果
  4. 按下文步骤 部署上线（重点）

2. 最简单的提示词

按 https://github.com/xqnode/image-compressor 完全还原项目，纯前端 Canvas 压缩，双击 html 可用，GitHub Pages 部署。

生成完成后，本地双击 index.html 即可验证压缩功能是否正常。

三、Git 创建仓库并推送

1. 安装 Git 并注册 GitHub

在 GitHub 创建新仓库（示例名 image-compressor2）：

2. 在 Cursor 终端初始化并推送

在 Cursor 中打开 Terminal（`Ctrl+`` 或菜单 Terminal → New Terminal）：

进入项目目录后执行：

Terminal
git init
git add .
git commit -m "第一次提交 图片压缩网站完工"
git branch -M main
git remote add origin https://github.com/xqnode/image-compressor2.git
git push -u origin main

将 origin 地址换成你自己创建的仓库 URL。

四、GitHub Pages 上线

1. 打开 Pages 设置

进入仓库 Settings，左侧找到 Pages：

2. 选择分支并保存

Source 选 Deploy from a branch，Branch 选 main，目录选 / (root)，点击 Save：

3. 访问线上地址

部署成功后，仓库首页会显示 Pages 链接；也可在 Deployments → github-pages 查看：

示例线上地址：https://xqnode.github.io/image-compressor2/（换成你的用户名与仓库名）。

常见问题

Q1：git push 提示认证失败？

  • 确认 GitHub 账号已登录，或使用 Personal Access Token 代替密码。
  • 若网络不稳定，可尝试切换网络或使用 GitHub Desktop 图形化推送。

Q2：GitHub Pages 打开 404？

  • 确认 Branch 选的是 main，且根目录有 index.html。
  • 首次部署需等待 1～3 分钟，刷新 Deployments 页查看是否 Active。

Q3：本地双击 HTML 正常，线上样式错乱？

  • 检查资源路径是否为相对路径（如 ./style.css），避免写死本地绝对路径。
  • 确认所有静态文件都已 git add 并 push 到远程仓库。

相关资源下载合集