🐙 ▲ 🌊 ☁️

网站部署平台大比拼Hosting Platforms Compared

GitHub Pages・Vercel・Netlify・Cloudflare Pages —— 怎么部署、怎么用、哪个最稳、哪个免费用最久,一次讲清楚。 GitHub Pages, Vercel, Netlify, Cloudflare Pages — how to deploy, how to use them, which is most stable, and which free tier lasts longest, all in one place.

🔍 四大平台,各是什么What Are These Four Platforms

🐙

GitHub Pages

本质是存代码的仓库,顺便送一个免费建站功能。丢一个 index.html 进去就能上线,最适合新手和纯静态页面。 At heart it's a code repository that happens to give you free hosting too. Drop in an index.html and it's live — best for beginners and plain static pages.

Vercel

Next.js 的亲爹公司做的部署平台。对 React / Next.js 项目支持最好,点几下鼠标就能上线一个会「动」的网站。 Made by the same company behind Next.js. Best support for React/Next.js projects — a few clicks and a fully dynamic site is live.

🌊

Netlify

老牌「拖拽部署」平台,内置表单、登入、A/B 测试这些现成小工具,适合想快速做官网/落地页的人。 The original "drag and drop to deploy" platform. Built-in forms, login, and A/B testing — great for quickly shipping a website or landing page.

☁️

Cloudflare Pages

全球最大的 CDN/网络安全公司做的托管服务。免费带宽无限,流量再大也不怕烧钱,适合正式上线的网站。 Hosting from the world's largest CDN/security company. Unlimited free bandwidth — no surprise bills even at high traffic. Great for sites going live for real.

🔗 它们之间什么关系How They Relate to Each Other

不是「二选一」,是上下游合作:代码放一边,部署放另一边。 It's not "pick one" — it's upstream and downstream: code lives in one place, deployment happens in another.

🐙 GitHub存放代码Stores the code
▲🌊☁️ 部署平台Deploy platform自动编译 + 发布Auto-builds + publishes
🌍 全球用户Users worldwide打开网站看到内容Open the site and see it

🛠️ 怎么部署(详细步骤版)How to Deploy (Detailed Steps)

四个平台的完整操作流程,跟着做,从注册到网址到手,一步都不跳。 The full walkthrough for all four platforms — follow along from sign-up to live URL, no step skipped.

🐙

GitHub Pages

用户名.github.io
1

注册 GitHub 账号Sign up for GitHub

打开 github.com/signup,填邮箱、密码、用户名,验证邮箱后账号就好了(已有账号跳过)。 Go to github.com/signup, fill in email, password, username, verify your email — done (skip if you already have one).

2

新建一个仓库(repository)Create a new repository

右上角 +New repository。仓库名随便取(例如 my-site),选 Public(公开才能免费用 Pages),不用勾 README,点 Create repository Top-right +New repository. Name it anything (e.g. my-site), choose Public (Pages is only free on public repos), skip the README checkbox, click Create repository.

3

把 index.html 传上去Upload index.html

在仓库页面点 Add file → Upload files,把你的 index.html(以及图片等文件)拖进去,下面写一句说明,点绿色 Commit changes On the repo page click Add file → Upload files, drag in your index.html (and any images), add a short note, click the green Commit changes.

4

开启 Pages 功能Turn on Pages

仓库上方 Settings → Pages(左边菜单)。Branchmain,文件夹选 / (root),点 Save Go to Settings → Pages (left sidebar). Set Branch to main, folder to / (root), click Save.

5

等 1-3 分钟,拿网址Wait 1-3 minutes for your URL

刷新同一页面,顶部会出现绿色提示和网址,格式是 https://用户名.github.io/仓库名/,点开就是你的网站。 Refresh the same page — a green banner with your URL appears, formatted as https://username.github.io/repo-name/. Open it, that's your site.

6

以后怎么更新Updating later

回到仓库,点开 index.html 右上角铅笔图标直接改,或重新 Upload files 覆盖,Commit 后 1-2 分钟自动更新,网址不变。 Go back to the repo, click the pencil icon on index.html to edit directly, or Upload files again to overwrite. After Commit, it auto-updates in 1-2 minutes — same URL.

💡 仓库一定要设成 Public,Private 仓库的免费额度用不了 Pages。The repo must be Public — Pages isn't free on private repos.

Vercel

项目名.vercel.app
1

注册 VercelSign up for Vercel

打开 vercel.com/signup,点 Continue with GitHub 用 GitHub 账号直接登入(没有 GitHub 账号先按上面 GitHub Pages 的步骤 1 注册一个)。 Go to vercel.com/signup, click Continue with GitHub to log in with GitHub (no GitHub account? do step 1 of GitHub Pages above first).

2

把网站文件放进 GitHub 仓库Put your files in a GitHub repo

Vercel 主要靠连接 GitHub 仓库部署,所以先照 GitHub Pages 步骤 2-3,把 index.html 传进一个仓库(不用开 Pages 功能)。 Vercel deploys by connecting to a GitHub repo, so follow GitHub Pages steps 2-3 first to upload index.html into a repo (no need to enable Pages itself).

3

导入项目Import the project

Vercel 后台点 Add New... → Project,会看到你 GitHub 的仓库列表,找到刚才那个仓库,点 Import In the Vercel dashboard click Add New... → Project, find that repo in your GitHub list, click Import.

4

直接 DeployJust click Deploy

纯 HTML 项目不用改设置,往下滑点蓝色 Deploy 按钮,等 10-30 秒构建。 For plain HTML, no settings to change — scroll down, click the blue Deploy button, wait 10-30 seconds for the build.

5

拿网址Get your URL

构建完成会有彩带动画庆祝,网址是 项目名.vercel.app,点 Continue to Dashboard 或截图上的预览图都能进去。 A confetti animation plays when it's done. The URL is project-name.vercel.app — click Continue to Dashboard or the preview thumbnail to open it.

6

以后怎么更新Updating later

回 GitHub 仓库改 index.htmlCommit,Vercel 会自动侦测到并重新部署,几十秒后网站自动更新,不用手动做任何事。 Edit index.html in the GitHub repo and Commit — Vercel auto-detects it and redeploys within seconds, no manual action needed.

💡 想跳过 GitHub,也可以装 Node.js 后用命令行:npx vercel,在文件夹里跑一下,跟着提示按 Enter 就能直接部署本地文件夹。Want to skip GitHub? Install Node.js and run npx vercel in your folder — press Enter through the prompts to deploy the local folder directly.
🌊

Netlify

随机名.netlify.app
1

注册 / 登入 NetlifySign up / log in to Netlify

打开 netlify.com,右上角 Sign up,用 Email 或 GitHub 账号登入都可以。 Go to netlify.com, click Sign up top-right — email or GitHub login both work.

2

选手动部署Choose manual deploy

Dashboard 点 Add new site → Deploy manually,会看到一个虚线框的上传区。 In the dashboard click Add new site → Deploy manually — a dashed drop zone appears.

3

拖进整个资料夹Drag in the whole folder

把含有 index.html 的整个资料夹,直接拖拽到虚线框里(不用打包成 zip)。 Drag the whole folder containing index.html straight into the dashed box (no need to zip it).

4

等几秒,拿网址Wait a few seconds for your URL

上传完自动开始部署,几秒后状态变绿色 Published,网址是随机的一串,例如 silly-cat-123abc.netlify.app Deployment starts automatically after upload. Within seconds it turns green Published, with a random URL like silly-cat-123abc.netlify.app.

5

(可选)改成好记的名字(Optional) Rename it

Site configuration → Change site name,把随机名字换成自己的,比如 my-bakery.netlify.app Site configuration → Change site name, swap the random name for your own, e.g. my-bakery.netlify.app.

6

以后怎么更新Updating later

回到同一个 site 的部署页面,把改好的资料夹再拖进去一次,Netlify 自动换成新版本,网址不会变。 Go back to that same site's deploy page and drag the updated folder in again — Netlify swaps in the new version, same URL.

💡 手动拖拽每次都要自己动手;想要 git push 后自动更新,要改成用 Import from Git 方式连接 GitHub 仓库。Manual drag-and-drop needs a person each time; for auto-updates on git push, use Import from Git to connect a GitHub repo instead.
☁️

Cloudflare Pages

项目名.pages.dev
1

注册 / 登入 CloudflareSign up / log in to Cloudflare

打开 dash.cloudflare.com,用 Email 或 GitHub 账号登入,没账号就免费注册一个。 Go to dash.cloudflare.com, log in with email or GitHub, or sign up free if you don't have an account.

2

进入 Workers & PagesOpen Workers & Pages

左边选单 Compute → Workers & Pages,右上角点蓝色按钮 Create application Left sidebar Compute → Workers & Pages, then click the blue Create application button top-right.

3

选「上传静态文件」Choose "Upload static files"

方式列表里不用连 GitHub,直接点 Upload your static files Skip GitHub in the method list — click Upload your static files directly.

4

取项目名字Name your project

系统会先让你填一个项目名称(以后网址就是 这个名字.pages.dev),填好后继续。 You'll be asked for a project name first (your URL becomes that-name.pages.dev) — fill it in and continue.

5

拖进资料夹,点 DeployDrag in your folder, click Deploy

把含有 index.html 的整个资料夹拖进虚线框,再按蓝色 Deploy site Drag the whole folder containing index.html into the dashed box, then click the blue Deploy site.

6

等几秒,拿网址Wait a few seconds for your URL

上传完成显示 Success,点显示出来的 xxx.pages.dev 网址,就是你的正式网站。 Once done it shows Success — click the xxx.pages.dev URL shown, that's your live site.

7

以后怎么更新Updating later

进这个项目 → Deployments 分页 → Create deployment,再拖一次改好的资料夹,网址不变。 Open the project → Deployments tab → Create deployment, drag the updated folder in again — same URL.

💡 常常要更新的话,装 Node.js 后用命令行更快:npx wrangler login 登入一次,之后每次 npx wrangler pages deploy . 一行搞定。Updating often? Install Node.js and use the CLI: npx wrangler login once, then npx wrangler pages deploy . every time after.

💰 免费额度能用多久/多爽How Long the Free Tier Lasts

分数越高=免费用得越爽、越久不用担心突然收费。 Higher score = the freer and longer you can use it before worrying about a bill.

☁️ Cloudflare
无限带宽Unlimited
🐙 GitHub
公开仓库全免Free if public
▲ Vercel
个人版够用OK for personal
🌊 Netlify
100GB/月封顶100GB/mo cap

🏆 三大排行榜Three Rankings

😊 好不好上手Ease of use

  1. 🥇Vercel零配置,点一下就上线zero config, one click to go live
  2. 🥈Netlify拖一下文件夹就好just drag a folder in
  3. 🥉GitHub Pages传文件+开个开关upload files + flip a switch
  4. 4️⃣Cloudflare稍微要学一下边缘概念a bit of a learning curve

🛡️ 稳不稳、扛不扛得住流量Stability under traffic

  1. 🥇Cloudflare全球最大 CDN,抗攻击天花板world's biggest CDN, top-tier defenses
  2. 🥈GitHub微软撑腰,很少出事backed by Microsoft, rarely down
  3. 🥉Vercel底层也靠 AWS/Cloudflareruns on AWS/Cloudflare underneath
  4. 4️⃣Netlify平时很稳,极端高并发略吃力solid normally, strains at extreme load

💸 免费用最久最划算Best free-tier value

  1. 🥇Cloudflare不限流量,几乎用不完unlimited traffic, hard to exhaust
  2. 🥈GitHub公开仓库永久免费free forever on public repos
  3. 🥉Vercel个人免费但商用要收费free personally, charges for commercial use
  4. 4️⃣Netlify超过额度扣费较狠steep charges once you're over the cap

🎯 我该选哪个?Which One Should I Pick?

🆕GitHub新手 / 只有一个 HTML 页面 → 直接用 GitHub Pages,最省事。Beginner / just one HTML page → use GitHub Pages, least hassle.
⚛️Vercel用 React / Next.js 做的项目 → 选 Vercel,体验最流畅。Built with React / Next.js → choose Vercel, smoothest experience.
📈Cloudflare网站流量大 / 想省钱 / 长期正式运营 → 选 Cloudflare Pages。High traffic / cost-conscious / running long-term → choose Cloudflare Pages.
📝Netlify需要表单、登入、快速验证 idea → 选 Netlify,内置工具多。Need forms, login, fast idea validation → choose Netlify, lots of built-in tools.
🏅

没有「最好」,只有「最适合」There's no "best" — only "best fit"

四个平台都免费好用,先看你的项目是什么、流量多大、要不要动态功能,再照上面的表选就对了。 All four are free and solid — look at what your project is, how much traffic it gets, and whether it needs dynamic features, then pick from the table above.