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

选择合适的静态网站托管平台，每年可以为你节省数百美元，同时让网站保持快速、安全且易于维护。在 2026 年，各平台的免费套餐已经相当成熟，GitHub Pages 和 Cloudflare Pages 都能提供零成本的生产级基础设施。但有一个问题是大多数教程都会跳过的：当静态网站没有服务器来处理请求时，联系表单该怎么办？本文将带你完整走一遍部署流程，从平台选择到表单接入，配合具体示例，并如实说明你在选定平台前需要了解的限制。

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

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

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

• 速度：文件从 CDN 边缘节点分发，全球访问延迟通常在 100ms 以内。
• 安全性：没有服务端 runtime，攻击面大幅缩小。
• 成本：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 设置页面会显示你的线上地址（例如 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，由该服务接收提交数据、进行验证，并通过邮件发送给你。
• Serverless 函数：编写一个小型函数（如 Cloudflare Workers、AWS Lambda）来处理表单。这种方式可行，但需要编写代码并持续维护。
• JavaScript fetch()：使用浏览器的 fetch API 将表单数据以 POST 方式发送到后端 endpoint。技术细节可参考我们的文章：如何使用 JavaScript fetch() 发送 HTML 表单数据。

让表单快速跑通的最简路径，是使用专用的表单服务。下面是一个基于 Sendform 的完整示例：

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

假设你有一个部署在 GitHub Pages 上的个人作品集网站，希望访客能向你发送消息，并将这些消息直接投递到你的邮箱。以下是完整的 HTML 代码：

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">你的姓名</label>
  <input type="text" id="name" name="name" required>

  <label for="email">你的邮箱</label>
  <input type="email" id="email" name="email" required>

  <label for="message">留言内容</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">发送消息</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 →

常见问题解答