【产品经理原型绘制HTML】从 IDE 到 GitHub 公网部署手册

背景本懒惰的产品经理为提升原型输出效率本人已完成 Claude 与 IDE 的对接可通过图片、文字描述及 PRD 直接生成原型 HTML 文件再也不需要手动绘制原型图啦但问题来了研发团队成员如何实时获取原型文件的更新并便捷访问这些静态页面解决方法文件上传部署至github提供公网IP进行访问第一阶段本地 IDE 环境准备 (以 Trae 为例)在开始写代码前确保你的工具已经“武装到位”。安装 Git在终端输入git --version确认安装。配置全局身份 (只需配置一次)用户名git config --global user.name 用户名邮箱 (隐私保护版)git config --global user.email 隐私保护邮箱注使用代号邮箱可以避免 GitHub 拦截你的推送。网络环境 (针对国内用户)若git push报错在终端运行代理指令$env:HTTP_PROXYhttp://127.0.0.1:7897$env:HTTPS_PROXYhttp://127.0.0.1:7897第二阶段编写代码与项目初始化使用 Tailwind CSS在 HTML 中通过 CDN 引入script srchttps://cdn.tailwindcss.com/script。优点样式直接写在 HTML 的class里无需额外维护.css文件对 AI 极其友好。本地运行预览安装Live Server插件。右键index.html选择Open with Live Server进行实时调试。初始化仓库在项目根目录打开终端输入git init。第三阶段GitHub 远程仓库配置创建仓库 (Repository)登录 GitHub点击New。仓库名如chengben-page必须选Public。GitHub 里的“文件夹”说明误区GitHub 网页端没有“新建文件夹”按钮。真相在本地创建文件夹并放入文件上传后 GitHub 会自动显示文件夹。获取远程地址复制形如https://github.com/用户名/test.git的链接。 关键补丁建立本地与远端的“初次握手”当你已经在 GitHub 网页上创建了一个空的仓库比如test后你需要回到本地 IDE 的终端执行以下动作1. 声明身份关联远程仓库你需要告诉本地 Git这个项目的“云端家园”在哪里# 语法git remote add [远程名] [仓库URL] # 我们通常把远程名定为 origin惯例 git remote add origin https://github.com/用户名/test.git报错处理如果提示remote origin already exists说明你之前试过但失败了请先运行git remote rm origin拆掉旧桥再重新运行上面的命令。2. 同步状态可选但推荐如果你的 GitHub 仓库在创建时勾选了“Add a README”那么云端现在比本地多一个文件。为了防止冲突建议先“拉取”一下git pull origin main --rebase3. 确立主从关系初次推送第一次推送时我们需要加上-u参数这相当于在本地分支和远程分支之间建立了“长期绑定关系”git push -u origin main成功标志只要这一步成功了以后你改了代码只需要简单地输入git push不需要再带后面那一串了Git 就会自动知道该往哪发。 修正后的“新手通关”完整指令流如果你现在处于一个新项目直接按这个顺序“无脑执行”git init平地起楼初始化git add .打包文件暂存git commit -m first commit定格快照存档git remote add origin https://github.com/用户名/项目名.git架设桥梁关联git push -u origin main首次过桥推送并绑定第四阶段代码上传指令集每次修改完代码按顺序执行这四行“通关密码”步骤指令含义1. 暂存git add .把所有修改过的文件打包。2. 提交git commit -m 描述你的改动给这次改动打上标签存档。3. 关联git remote add origin [URL]告诉 Git 代码要发往哪个仓库仅第一次需要。4. 推送git push -u origin main把代码正式上传到 GitHub。