用 VS Code、GitHub 和 Vercel 发布一个静态网站

适合谁

适合用 HTML、CSS 和图片制作主页、活动页或文档页的人。

场景示例

发布周末活动页，包含时间、地点、报名链接和图片。先本地检查，再用 GitHub 留下版本，通过 Vercel 预览核对手机与桌面，确认后发布。

从文件夹到发布的五步流程

1. 在 VS Code 编辑站点文件

   打开文件夹修改 HTML、CSS 和文案，用搜索与预览核对。VS Code 提供源文件编辑工具；先读 README，确认项目类型。^[1]

2. 从最小结构开始

   新建纯静态页可从这些文件开始： site/ index.html styles.css assets/ event.jpg README.md 确认资源路径与引用一致。现有框架项目沿用仓库结构和设置，不复制通用构建命令。

3. 用 GitHub 保存版本

   创建仓库并提交修改，写清每次变更。按项目选择可见性和协作者权限；公开仓库不是部署静态站点的必需条件。^[2]

4. 在 Vercel 先看 Preview

   连接仓库后核对框架、构建步骤、输出目录和分支设置。打开预览 URL，检查构建结果、链接和页面状态；Preview 与 Production 用途不同。^[3]

5. 确认后发布

   按团队流程发布并检查正式域名，记录如何回退。配置不明确时查看仓库说明和实际日志，再决定构建设置。

真实取舍

静态文件少依赖、易检查；内容管理、数据交互或构建变复杂时，简单结构难维护。GitHub 留历史，Vercel 提供预览，但设置和权限仍要人工确认。

发布检查清单

• README 记录预览方法和托管设置；勿套用不匹配的命令。
• 在 320px、手机和桌面检查文字、导航、溢出和焦点。
• 不要把 API key、令牌或私密配置提交到仓库或网页。
• 预览通过后发布，再检查正式页面和资源。