发布你的作品：从本地到线上

为什么要发布？

做好的项目只在自己电脑上能看到，那太可惜了。把它发布到互联网上，你可以：

• 📱 用手机随时展示给朋友看
• 💼 当作作品集放到简历里
• 🌍 让全世界的人都能访问
• ✨ 获得成就感（这很重要！）

理解两个概念：本地 vs 线上

本地预览

你在浏览器里直接打开 HTML 文件，看到的就是本地预览。地址栏显示的是 file:/// 开头的路径。

特点：只有你自己能看到，不需要网络，部分功能可能受限。

线上部署

把你的文件放到一台服务器上，通过一个域名让所有人都能访问。

部署方式科普

方式一：静态网站托管（推荐新手）

适合纯前端项目（HTML/CSS/JS），也就是前面在 极速上手：用 AI 开发一个个人简历页面 里做的那种。

平台	免费额度	上手难度	特点
我们的托管平台	✅ 免费	⭐	中文友好，一键部署
GitHub Pages	✅ 免费	⭐⭐	需要 GitHub 账号
Vercel	✅ 免费	⭐⭐	自动部署，速度快
Netlify	✅ 免费	⭐⭐	功能丰富
Cloudflare Pages	✅ 免费	⭐⭐	CDN 全球加速

方式二：云服务器

自己买一台服务器，完全控制。适合有后端的项目。

💡 对于 Vibe Coding 初学者，我们强烈推荐静态网站托管。免费、简单、够用。

推荐：使用我们的托管平台

我们提供了一个专门为 Vibe Coding 用户设计的托管平台，特点是：

• 🆓 免费使用
• 🚀 一键部署：上传文件就完事
• 🌐 自动分配域名：不用自己买域名
• 📱 CDN 加速：全球访问速度快

部署步骤

1. 访问我们的托管平台
2. 注册/登录账号
3. 创建新项目
4. 上传你的项目文件（index.html、style.css 等）
5. 点击部署
6. 获得你的专属链接 🎉

备选方案：GitHub Pages

第一步：创建 GitHub 账号

如果你还没学 Git，建议先看 版本控制基础：Git 与 GitHub。去 github.com 注册一个账号。

第二步：创建仓库

1. 点击右上角 + → New repository
2. 仓库名填：my-resume
3. 选择 Public
4. 点击 Create repository

第三步：上传文件

1. 在仓库页面点击 Add file → Upload files
2. 把你的项目文件全部拖进去
3. 点击 Commit changes

第四步：启用 GitHub Pages

1. 进入仓库 → Settings → Pages
2. Source 选择 main 分支
3. 点击 Save
4. 等待几分钟，你的网站就上线了！

访问地址：https://你的用户名.github.io/my-resume/

备选方案：Vercel

1. 去 vercel.com 注册（用 GitHub 登录最方便）
2. 点击 New Project → 导入你的 GitHub 仓库
3. 点击 Deploy → 自动部署完成

发布后的检查清单

• [ ] 电脑浏览器能正常打开
• [ ] 手机浏览器能正常显示
• [ ] 所有链接都能点击
• [ ] 图片是否正常加载
• [ ] 页面加载速度是否可接受

小结

方式	难度	成本	推荐场景
我们的托管平台	⭐	免费	初学者首选
GitHub Pages	⭐⭐	免费	有 GitHub 的用户
Vercel	⭐⭐	免费	想自动部署的用户
自己的服务器	⭐⭐⭐⭐	付费	有后端需求

建议路径：先用我们的托管平台快速上线 → 学会 GitHub Pages → 进阶用 Vercel

发布后你可以做的事情

1. 分享你的作品

• 把链接发到社交媒体
• 放到简历的"个人项目"里
• 发到技术社区（掘金、V2EX、Reddit）获得反馈

2. 持续迭代

• 根据反馈继续优化
• 每次更新后重新部署
• 用 Git 记录每次修改

3. 绑定自定义域名（进阶）

如果你想用自己的域名（比如 yourname.com），需要：

1. 在域名注册商购买域名（推荐 Namesilo、Cloudflare、阿里云）
2. 在托管平台设置自定义域名
3. 在域名 DNS 中添加 CNAME 记录
4. 等待 DNS 生效（通常几分钟到几小时）

💡 对初学者，先用平台默认域名就好。以后有需要再买。

常见问题

Q：部署后页面打不开

检查：是否上传了 index.html？文件名是否正确（注意大小写）？

Q：页面打开了但样式丢了

检查：CSS 文件是否一起上传了？文件路径是否正确？如果 HTML 里写的是 href="style.css"，那 CSS 文件必须和 HTML 在同一目录。

Q：图片不显示

检查：图片文件是否一起上传了？路径是否正确？线上环境区分大小写，Image.png 和 image.png 是两个不同的文件。

Q：每次更新都要重新上传吗？

如果用 GitHub Pages + Vercel，只要推送代码到 GitHub，会自动重新部署。如果用手动上传的平台，是的，需要重新上传。

继续阅读

• 极速上手：用 AI 开发一个个人简历页面
• 版本控制基础：Git 与 GitHub
• 个人作品集网站开发全过程