静态网页托管指南

如何在自己没有服务器的情况下部署自己的静态网页？本文将带你通过 GitHub Pages^【1】、Vercel^【2】 或 Cloudflare^【3】 等平台上线自己的网站。

一、代码托管平台自带的 Pages 服务

1. Github Pages

在 Github 上打开所要部署的网页对应的仓库，点击 Settings -> Pages。

1. 在 Source 的下拉菜单中选择 Deploy from a branch
2. 在 Branch 的下拉菜单中选择你代码所在的分支，旁边的目录选择 /(root)（如果你的 index.html 在根目录的话）
3. 点击 Save

如果你仓库没有 main，记得选你实际使用的分支

等待一会，部署成功后，顶部会显示：

对于 Source (此处不做具体介绍)：

• Deploy from a branch: 从分支部署
• Github Actions: 使用自动化动作部署

2. Gitee Pages

待完善

二、前端托管平台

1. Vercel

打开 Vercel官网，注册账号并与 Github 关联。

登入后点击 Overview -> Add New... 选择 Project。

然后你会看到你的 Github 仓库列表，选择你想部署的那个项目，点击旁边的 Import 即可。

导入后会进入到配置页面，纯 HTML 静态页面保持默认即可，直接点击 Deploy。

部署完成之后，点击对应项目的 Settings -> Domains 即可看到 Vercel 给你的免费域名。(可点击 Add Domain 添加自定义域名^【4】)。

2. Cloudflare

1. 打开 Cloudflare官网，注册并登入。
2. 点击顶部的搜索框搜索 Workers & Pages，然后点击创建应用程序
3. 连接 Github，选择所要部署的仓库
4. 配置

• 构建命令: 在部署之前，是否需要系统帮你“加工”代码？（比如把 Vue/React 源代码转换成浏览器能认出的 HTML 文件）。

对于纯 HTML 项目，其实没有真正的构建过程，Cloudflare 只是按配置把文件上传而已。

• 部署命令: 告诉 Cloudflare 应该把哪个文件夹里的东西上传到服务器上，以及使用哪个版本的运行环境。

部署命令的参数拆解：

• npx wrangler deploy^【5】: 启动部署的工具
• --assets^【6】=.: 告诉 Cloudflare：“就在我 GitHub 仓库的根目录下找 index.html，把它们全传上去”
• --compatibility-date^【7】=2025-12-01: 这是一个日期戳，用来锁定 Cloudflare 的后台功能版本

如果你的 index.html 不是在仓库最外面，而是在一个比方说叫做 static 的文件夹，那么需要把部署命令里的 --assets=. 改成 --assets=./static

• 非生产分支构建勾选框

1. 什么是生产分支: 通常你的 GitHub 仓库里有一个叫 main 或者 master 的分支，那是你正式的代码，部署后就是给所有人看的正式网站。
2. 什么是非生产分支: 如果你在 GitHub 上新建了一个分支叫 test （用来测试新功能），这些就是非生产分支。

如果勾选，当你向 test 分支提交代码时，Cloudflare 也会帮你部署一个版本。但它不会覆盖你正式的网站地址，而是给你一个专门的“预览网址”。如果不勾选，Cloudflare 只会在你更新 main(主分支) 时才干活。你更新其他分支时，它什么都不做。

3. Netlify

打开 Netlify官网，点击 Log in

建议选择 Github 登入，这样它能自动读取你的代码库。

进入后台主页，点击 Add new project / Add new site，选择 Import an existing project。

在 Git 提供商列表中选择 Github。

配置构建设置：

• Branch to deploy(要部署构建的分支): 选 main(或 master)
• Base directory(基础目录): 留空
• Build command(构建命令): 留空

纯 HTML 项目不需要构建步骤，Netlify^【8】 会直接把文件原样部署。

• Publish directory(发布目录):
  • 如果你的 index.html 在仓库根目录，推荐填写一个点 .，避免 Netlify 自动识别成前端框架^【9】项目。
  • 如果你的 index.html 在某个文件夹里（比如 static），就填那个文件夹的名字(static)。
• Functions directory(云函数目录): 留空

部署完成后，Netlify 会自动分配一个 xxx.netlify.app 的域名，可在 Domain management 中修改站点名或绑定自定义域名。

三、对比总结