从零开始：将 HTML 网页部署到 Netlify
本指南将教你如何将本地的 HTML 文件免费发布到互联网上，并涵盖手动上传与使用 Github 进行自动化部署的进阶技巧。
开始之前，请确保你已经准备好了要部署的 HTML 文件。如果你还没有账号，请先访问 Netlify 官网。
前往 Netlify 官网 →部署到 Netlify (手动模式)
-
注册/登录：进入官网，通常选择“Sign up with Google”方便快捷。
-
接着会有一些关于你和团队的问题，根据自身情况回答，或者随意回答即可。
-
跳过初始设置：到了这一步，不要选择它提供的模板选项，点击上方标题下方的小字 ”Skip this step for now”。
-
上传文件夹：进入控制台后，找到 “Deploy manually” 区域。
你可以将包含 HTML 文件的文件夹直接拖拽进去，或者点击 “Browse to upload” 打开资源管理器选择文件夹。
-
等待 Upload 进度条完成。
如何打开你的页面
部署完成后，Netlify 会分配给你一个免费域名（例如：https://euphonious-naiad-0ca83d.netlify.app/）。
注意：如果此时直接打开这个链接，可能会显示“Page Not Found”或空白，这是因为你没有配置 index.html（索引页面）。
访问具体文件的方法：
你需要将文件名（包含后缀）拼接到域名后面。例如，如果你上传了以下三个文件：
- 11 月 26 日社群动态.html
- 学习搭子提示词.html
- 愿景.html
访问路径就是：
添加新的 HTML 文件
如果你有新的 HTML 想放进来，步骤如下：
- 在本地电脑原来的文件夹里，放入新的 HTML 文件。
- 将这个更新后的文件夹再次拖动到 Netlify 项目详情页的 “Deploy manually” 区域。
等待部署成功后，域名不会变。你只需要像之前一样，把新文件名加到域名后面即可访问。
重要注意事项
- 路径匹配：URL 中的文件名必须和上传的文件名一模一样（包括空格和中文）。建议先在浏览器输入域名，再复制文件名粘贴。
- 子文件夹：如果你在本地把文件放进了子文件夹（例如
daily/），那么访问路径也要变，例如：https://你的域名/daily/文件名.html。
制作首页和归档页面
通过链接逐个访问不方便管理。我们可以创建一个聚合页面。
两种常见方案：
- 方案 A：单一首页 做主要首页，使用折叠/展开的方式按日期或分类展示所有链接。
- 方案 B：首页 + 归档页 首页只放重要/最近的内容；归档页面链接所有历史 HTML。
如何实现？使用 AI 辅助。
你可以将文件列表提供给 AI（如 ChatGPT, Claude, Trae, Cursor），并使用以下提示词：
“我要在 Index 页面添加其他的单个 HTML 页面的链接，同时在其他的 HTML 页面要有返回到 Index 页面（首页）的链接。”
* 提示：最好提供原始文件名，因为链接是基于文件名生成的。
首页示例
归档页示例
进阶：使用 Github
必备条件： Github 账号、电脑已安装 Github Desktop。
如何将本地文件夹添加到 Github (以 Mac 为例)
-
打开 Github Desktop，点击左上角的 “Current repository”。
-
点击 Add -> “Add existing repository”，选择你存放 HTML 的文件夹。
-
选择文件夹后点击 “Add Repository”。如果弹出红色错误提示，点击 “Create a repository”。
-
新弹窗保持默认，点击 “Create Repository”。回到主界面后，点击 “Publish Repository”。
-
关键步骤：勾选 “Keep this code private”（这样只有你自己能看）。完成后，代码就推送到 Github 远程了。
-
点击 “View on Github” 查看效果：
如何在 Netlify 部署这个 Repository
-
回到 Netlify 首页，选择 Import an existing project。
-
选择 Github。如果是第一次，需要进行授权操作（按照屏幕提示或 Github Mobile 确认）。
-
在列表中选择你刚才推送的 Repository。
-
设置项目名称：Netlify 会基于此名称生成前缀（例如
html-daily），如果名称被占用需更换。Build settings 保持默认。
-
点击底部 “Deploy”。完成后，你将获得一个更好记的域名（如
html-daily.netlify.app）。
工作流：如何更新内容？
设置好 Github 后，更新网页变得非常优雅：
在本地文件夹中添加/修改文件（例如添加 gemini-cli.html）。
打开 Github Desktop，你会看到变更。点击左下角的 “Commit to main”。
点击右上角的 “Push origin” 推送到远程。
接下来是魔法时刻：
Netlify 会自动检测到 Github 的变动并自动部署。稍等几分钟，刷新你的网页，新内容就上线了！
💡 总结
在这个过程中碰到任何问题，都可以问 AI。如果还想知道每一个步骤后面的“为什么”，也可以去问 AI。
万事不决问 AI 不是一句口号，让我们动起来！