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.
本质是存代码的仓库,顺便送一个免费建站功能。丢一个 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.
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.
老牌「拖拽部署」平台,内置表单、登入、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.
全球最大的 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.
不是「二选一」,是上下游合作:代码放一边,部署放另一边。 It's not "pick one" — it's upstream and downstream: code lives in one place, deployment happens in another.
四个平台的完整操作流程,跟着做,从注册到网址到手,一步都不跳。 The full walkthrough for all four platforms — follow along from sign-up to live URL, no step skipped.
打开 github.com/signup,填邮箱、密码、用户名,验证邮箱后账号就好了(已有账号跳过)。
Go to github.com/signup, fill in email, password, username, verify your email — done (skip if you already have one).
右上角 + → 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.
在仓库页面点 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.
仓库上方 Settings → Pages(左边菜单)。Branch 选 main,文件夹选 / (root),点 Save。
Go to Settings → Pages (left sidebar). Set Branch to main, folder to / (root), click Save.
刷新同一页面,顶部会出现绿色提示和网址,格式是 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.
回到仓库,点开 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.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).
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).
Vercel 后台点 Add New... → Project,会看到你 GitHub 的仓库列表,找到刚才那个仓库,点 Import。
In the Vercel dashboard click Add New... → Project, find that repo in your GitHub list, click Import.
纯 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.
构建完成会有彩带动画庆祝,网址是 项目名.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.
回 GitHub 仓库改 index.html 并 Commit,Vercel 会自动侦测到并重新部署,几十秒后网站自动更新,不用手动做任何事。
Edit index.html in the GitHub repo and Commit — Vercel auto-detects it and redeploys within seconds, no manual action needed.
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.com,右上角 Sign up,用 Email 或 GitHub 账号登入都可以。
Go to netlify.com, click Sign up top-right — email or GitHub login both work.
Dashboard 点 Add new site → Deploy manually,会看到一个虚线框的上传区。
In the dashboard click Add new site → Deploy manually — a dashed drop zone appears.
把含有 index.html 的整个资料夹,直接拖拽到虚线框里(不用打包成 zip)。
Drag the whole folder containing index.html straight into the dashed box (no need to zip it).
上传完自动开始部署,几秒后状态变绿色 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.
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.
回到同一个 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.
打开 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.
左边选单 Compute → Workers & Pages,右上角点蓝色按钮 Create application。
Left sidebar Compute → Workers & Pages, then click the blue Create application button top-right.
方式列表里不用连 GitHub,直接点 Upload your static files。
Skip GitHub in the method list — click Upload your static files directly.
系统会先让你填一个项目名称(以后网址就是 这个名字.pages.dev),填好后继续。
You'll be asked for a project name first (your URL becomes that-name.pages.dev) — fill it in and continue.
把含有 index.html 的整个资料夹拖进虚线框,再按蓝色 Deploy site。
Drag the whole folder containing index.html into the dashed box, then click the blue Deploy site.
上传完成显示 Success,点显示出来的 xxx.pages.dev 网址,就是你的正式网站。
Once done it shows Success — click the xxx.pages.dev URL shown, that's your live site.
进这个项目 → Deployments 分页 → Create deployment,再拖一次改好的资料夹,网址不变。
Open the project → Deployments tab → Create deployment, drag the updated folder in again — same URL.
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.分数越高=免费用得越爽、越久不用担心突然收费。 Higher score = the freer and longer you can use it before worrying about a bill.
四个平台都免费好用,先看你的项目是什么、流量多大、要不要动态功能,再照上面的表选就对了。 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.