2026 年免费托管静态网站：GitHub Pages、Cloudflare Pages 和联系表单

选择合适的静态网站托管平台，每年能帮你省下不少费用，同时保持网站快速、安全且易于维护。免费套餐已经相当成熟，GitHub Pages 和 Cloudflare Pages 这类平台能以零成本提供生产级基础设施。但大多数教程都会跳过一个关键问题：当静态网站没有服务器来处理请求时，联系表单该怎么办？本文将带你完整走一遍部署流程，从选择平台到接入可用的联系表单，附带具体示例和你在做决定前必须了解的实际限制。

为什么免费静态托管值得关注

静态网站直接将预构建的 HTML、CSS 和 JavaScript 文件发送给浏览器，不涉及 PHP、Node.js 运行时，也不需要在每次页面加载时查询数据库。正是这种简洁性，让免费静态页面托管如此可靠：没有什么会崩溃，也不需要打补丁或扩容。

对于小型企业官网、个人作品集、SaaS 落地页和文档站点来说，静态托管几乎满足所有需求：

• 速度：文件从 CDN 边缘节点分发，全球访问延迟通常低于 100ms。
• 安全：没有服务端运行时，攻击面大幅缩小。
• 成本：GitHub Pages 和 Cloudflare Pages 对公开项目及大量私有项目均免费。
• 简便：将代码推送到代码仓库，网站自动完成部署。

唯一真正的限制在于动态功能。凡是需要服务端逻辑的场景，比如用户身份验证、购物车或表单处理，都需要依赖外部服务。在阅读后续部署步骤时，请把这一点记在心里。

平台对比：GitHub Pages vs Cloudflare Pages

一句话总结：如果你的用户遍布全球，追求最快的加载速度，Cloudflare Pages 是更好的选择。如果你的团队已经深度使用 GitHub，想要最简单的部署体验，GitHub Pages 完全够用。

分步指南：在 GitHub Pages 上部署

以下示例假设你已经准备好了一个简单的 HTML/CSS 网站。如果你使用的是 Hugo 或 Jekyll 这类静态网站生成器，流程基本相同。

1. 创建 GitHub 仓库。前往 github.com/new，创建一个公开仓库。如果希望网站部署在根域名下，将仓库命名为 your-username.github.io；若想部署在子目录路径下，可以使用任意名称。
2. 推送网站文件。在本地项目目录中运行：

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. 启用 GitHub Pages。在仓库中进入「设置 > Pages」。在「来源」下，选择 main 分支和 /root 目录（如果构建输出在其他目录，选择 /docs）。点击保存。
4. 等待部署完成。GitHub 会在 1-3 分钟内完成构建和部署。Pages 设置面板中将显示线上 URL（例如 https://your-username.github.io）。
5. 绑定自定义域名（可选）。在仓库根目录添加 CNAME 文件，写入你的域名（例如 www.yoursite.com）。然后在你的 DNS 服务商处，将 CNAME 记录指向 your-username.github.io。GitHub 会在几分钟内自动签发 SSL 证书。

分步指南：在 Cloudflare Pages 上部署

1. 注册或登录 Cloudflare。访问 pages.cloudflare.com，连接你的 GitHub 或 GitLab 账号。
2. 创建新项目。点击「创建项目」，然后选择「连接到 Git」，从列表中选择你的仓库。
3. 配置构建设置。如果你的网站是纯 HTML，构建命令留空，将输出目录设置为 / 或 index.html 所在的目录。Hugo 项目将构建命令设为 hugo，输出目录设为 public。Jekyll 项目使用 jekyll build，输出目录设为 _site。
4. 部署。点击「保存并部署」。Cloudflare 会克隆你的仓库，执行构建，并将网站发布到全球边缘网络。你的网站会立即获得一个 *.pages.dev 子域名。
5. 添加自定义域名。在项目控制台中进入「自定义域名」，输入你的域名。如果域名已由 Cloudflare DNS 管理，一键即可完成配置。否则需要在域名注册商处添加 CNAME 记录，指向你的 *.pages.dev 地址。

此后每次向主分支执行 git push，都会自动触发重新部署。Cloudflare 还会为 pull request 创建预览部署，方便你在上线前审查变更。

为静态网站添加联系表单

大多数教程到这里就结束了，而大多数人也恰恰卡在这里。静态网站上的联系表单无法将数据提交给自身，因为没有服务器在监听请求。你有三种可行方案：

• 表单后端服务（推荐）：将表单的 action 属性指向第三方 endpoint，由其接收提交内容、进行验证并发送到你的邮箱。
• 无服务器函数：编写一个小型函数（Cloudflare Workers、AWS Lambda）来处理表单。这种方式可行，但需要编写代码并持续维护。
• JavaScript fetch()：使用浏览器的 fetch API 将表单数据以 POST 方式发送到后端 endpoint。技术细节请参阅我们的文章：如何使用 JavaScript fetch() 发送 HTML 表单数据。

让表单快速上线的最简路径是使用专用表单服务。以下是一个使用 Sendform 的具体示例：

实战示例：5 分钟接入可用的联系表单

在向网站添加任何代码之前，你需要注册 Sendform 账号并创建一个表单 endpoint。整个过程大约需要两分钟：

1. 在 Sendform.net 注册。创建免费账号，无需绑定信用卡。注册完成后，系统会为你准备好一个默认项目。
2. 创建表单。在控制台中点击「新建表单」，填写名称，选择项目，并输入你希望接收提交内容的邮箱地址。Sendform 会在激活 endpoint 前验证该邮箱。
3. 复制 endpoint URL。表单创建完成后，你会看到一个格式为 https://sendform.net/!your-form-id 的唯一 endpoint URL。复制它，稍后将其粘贴到 HTML 中。

拿到 endpoint 后，将以下 HTML 添加到你的静态网站中：

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

将 your-form-id 替换为你在 Sendform 控制台中看到的 ID。此后每条提交内容都会通过邮件发送到你在设置时确认的邮箱地址。无需后端代码，无需服务器，也没有每月的基础设施费用。如需了解更高级的用户体验方案，包括提交后的跳转页面和确认邮件，请阅读我们的文章：静态网站表单最佳实践。

如果你同时使用网站构建工具，我们也在另一篇文章中详细介绍了集成流程：如何将 Sendform 与网站构建工具集成。

常见错误及避坑指南

在帮助大量用户完成免费静态网站托管配置的过程中，以下这些问题最容易让人头疼：

1. 忘记配置 404 页面

当访问的路由不存在时，GitHub Pages 和 Cloudflare Pages 都会显示默认的错误页面。在根目录创建一个自定义的 404.html 文件，可以让用户留在你的网站上，保护访问体验。

2. 将敏感信息提交到公开仓库

API 密钥、表单 endpoint 密钥和邮箱地址绝对不能出现在公开的 GitHub 仓库中。请使用 Cloudflare Pages 的环境变量，或将私密配置文件添加到 .gitignore 中进行引用。

3. 没有提前规划表单后端方案

这是最常见的错误。开发者精心设计了联系表单，推送到 GitHub Pages 后，在上线当天才发现表单静默失败。在写第一个 <input> 标签之前，就应该确定好表单后端方案。Sendform 这类工具可以让你无需任何代码即可搭建直接发送到邮箱的联系表单，从根本上解决后端问题。

4. 忽视构建缓存问题

如果推送代码后网站没有更新，可能是 CDN 缓存仍在提供旧文件。Cloudflare Pages 在每次部署时会自动清除缓存。GitHub Pages 的变更传播较慢，可以等待最多 10 分钟，或在测试时为静态资源 URL 添加查询字符串来绕过缓存。

5. 相对路径使用不当

如果你的 GitHub Pages 网站部署在 username.github.io/project-name/（子目录）下，所有资源路径都必须包含该前缀。直接写 /styles.css 会导致链接失效。请使用相对路径（./styles.css），或在静态网站生成器中配置 baseURL 设置以匹配子目录。

6. 忽略表单工作流自动化

表单开始收集提交内容后，你能做的远不止接收邮件。Sendform 支持 webhook 和各类集成，可以自动将提交内容路由到 Slack、CRM 系统或电子表格。我们的文章使用 webhook 和 API 自动化表单工作流详细介绍了如何在不编写后端代码的情况下完成配置。

总结

免费静态网站托管的能力从未如此强大。GitHub Pages 适合深度使用 GitHub 生态的团队，而 Cloudflare Pages 提供更好的全球性能和更慷慨的免费套餐。真正的挑战不在于托管本身，而在于动态功能，尤其是联系表单。将任意一个平台与专用表单服务搭配使用，你就能以零基础设施成本获得功能完整的专业网站。按照上面的平台指南部署好网站，再通过 Sendform 接入联系表单，从第一天起就能可靠地处理用户提交。

几分钟内为静态网站添加联系表单

使用 Sendform 收集来自 GitHub Pages 或 Cloudflare Pages 上任意静态网站的表单提交。无需后端代码，无需配置服务器，简单省心。只需将表单的 action 属性指向你的 endpoint，即可完成接入。

免费使用 Sendform.net →

常见问题解答