~/ruiqin.dev
← 精华文章
2026.06.19 生财有术

代码写好了怎么部署上线

服务器、数据库、域名——零基础部署选型完全手册，写给「代码写出来了怎么让别人看到」的人。

代码写好了怎么上线？服务器、数据库、域名——零基础部署选型完全手册

上一次那篇「用AI写一个网站」发完之后，评论区收到一堆这样的问题：

「代码写出来了，怎么让别人看到啊？」

「GitHub是啥，怎么用？」

「一定要买服务器吗？阿里云腾讯云选哪个？」

特别好。这说明一件事——大家已经过了「AI能不能写代码」的阶段，卡在了「写了之后怎么办」。

这篇文章就是来解决这个问题的。你的代码躺在电脑文件夹里，跟没写差不多。让它出现在互联网上，别人才看得到。

这篇文章会比较长（预计读完20分钟）。因为我把每一步都拆得很细，细到什么程度呢——你不需要懂任何编程概念，跟着点按钮就行。甚至我把「这个按钮在界面哪个位置、长什么样」都写出来了。

在你往下看之前，先想一个问题：你让 AI 做的网站，有什么功能？ 纯展示页面、用户只能看 → 类型A。 有注册登录、能提交表单 → 类型B。 有用户系统、数据需要存起来（帖子、订单、积分）→ 类型C。

不确定？文章里有详细判断。但先想一下，后面你对号入座会更快。

好，开始。

第一步：认识 GitHub，你的代码管家

GitHub 是什么？

说人话：GitHub 是一个存代码的网盘，但它比网盘聪明。

你把代码存在电脑上，万一电脑坏了就没了。存在 GitHub 上，云端保存，永远不会丢。

但它不只存文件。GitHub 还记着你每次改了什么——哪天改了哪一行，谁改的，为什么改。你随时可以回到三天前的版本。比如你今天改了一个bug，结果网站挂了，点一下就能回到昨天没改之前的版本。

更重要的是，所有部署平台都是从 GitHub 拉代码的。 你把代码推到 GitHub，部署平台自动检测到变化，自动帮你上线。GitHub 就像一个中转站——代码从你电脑 → GitHub → 部署平台 → 全世界都能看到。

类比一下：GitHub 就像一个带时间机器的代码网盘。你可以随时穿越回过去，也能一键把代码送给其他服务。

注册 GitHub 账号

  1. 打开浏览器，在地址栏输入 github.com，回车。
  2. 你会看到 GitHub 首页。右上角有一个紫色的「Sign up」按钮，点它。
  3. 进入注册页。第一行输入你的邮箱——QQ邮箱、163邮箱、Gmail都行。建议用你常用的，以后找密码、收通知都靠这个邮箱。
  4. 第二行创建一个密码。要求至少8位，包含大小写字母和数字。比如 MyCode2026 这种。记下来，或者用密码管理器存好。
  5. 第三行输入一个用户名（Username）。这个很重要——它以后会出现在你所有项目链接里。 比如你叫张三，用户名取了 zhangsan，那你的代码地址就是 github.com/zhangsan/项目名。起一个简洁、好记、看起来专业的名字。注意：只能用英文、数字和横线，不能用中文。
  6. 底下会问你要不要接收产品更新邮件，勾不勾都行。
  7. 点「Continue」。接下来会有一个验证环节——可能是拼图、点图中的特定物体、或者输入图形里的字符。按提示做完。
  8. GitHub 会往你邮箱发一封验证邮件。去邮箱收件箱找（可能在垃圾邮件里），点邮件里的验证码或者链接。
  9. 验证通过后，一路点「Continue」——它会问你是不是学生、想用GitHub做什么，全部跳过就行。

到这里，你的 GitHub 账号就注册好了。

现在你有了一个 github.com/你的用户名 的个人主页。现在里面是空的，我们接下来往里面放代码。

第二步：把你的代码上传到 GitHub

我们现在要做一件事：把电脑里的代码文件夹，原封不动地搬到 GitHub 上。

有三种方法。如果你已经在用 Claude Code 或 Cursor 编程——直接看方法一，一句对话搞定。 没用过 AI 编程工具？跳方法二，全程点按钮。

方法一：让 Claude Code 帮你提交（最推荐，一句对话）

既然你代码都是 AI 写的，提交到 GitHub 也让它来。在 Claude Code（或 Cursor、Codex）的对话框里，直接说：

「帮我把这个项目推送到 GitHub。先帮我在 GitHub 上创建一个叫 my-first-website 的公开仓库，然后把代码推上去。」

Claude Code 会帮你做的事：

  1. 打开浏览器，跳转到 GitHub 创建仓库页面
  2. 你在页面上确认创建
  3. 回到终端，自动执行 git init、git add .、git commit、git push
  4. 完成后告诉你仓库地址

你只需要在弹出浏览器的时候点几下确认按钮。 全程不用记任何 git 命令。

如果 Claude Code 中途问你「要不要初始化 Git」「commit message 写什么」——直接回「你决定就行」或者「第一次上传代码」。

以后每次改了代码： 在 Claude Code 里说「帮我把最新的改动推送到 GitHub」，它会自动 add → commit → push。一句话的事。

方法二：用 GitHub Desktop（全程点按钮）

GitHub Desktop 是 GitHub 官方出的桌面软件，全程点按钮，一行命令都不用敲。 就像用百度网盘一样，选文件夹、点上传。

安装 GitHub Desktop

  1. 打开浏览器，地址栏输入 desktop.github.com，回车。
  2. 页面中间有一个大大的紫色「Download」按钮。它会自动识别你的系统——Mac 显示「Download for macOS」，Windows 显示「Download for Windows」。点它下载。
  3. 下载完成后：
    • Mac： 双击 .dmg 文件，弹出一个窗口，左边是 GitHub Desktop 图标，右边是 Applications 文件夹。把左边图标拖进右边文件夹。
    • Windows： 双击 .exe 文件，一路点「下一步」直到安装完成。
  4. 安装完成后打开 GitHub Desktop。第一次打开会弹出一个登录窗口。
  5. 点「Sign in to GitHub.com」→ 浏览器会自动打开一个 GitHub 授权页面 → 点「Authorize Desktop」。
  6. 授权成功后，浏览器会问「要打开 GitHub Desktop 吗？」→ 点「打开」。
  7. 回到 GitHub Desktop，会弹出一个「Configure Git」的窗口。这里不用管，直接点「Finish」就行。它会自动帮你配好 Git。

把代码上传到 GitHub

  1. 在 GitHub Desktop 左上角，点「File」→「New Repository」（或者直接按 Cmd+N / Ctrl+N）。

  2. 弹出一个「Create a New Repository」窗口，填三个东西：

    • Name（仓库名）： 给你的项目起个英文名。比如 my-first-website 或 ai-tool-site。注意：不能有空格、不能用中文。用横线 - 分隔单词。
    • Description（描述）： 随便写一句这个项目是干嘛的，比如「我的第一个AI生成的网站」。不写也行。
    • Local Path（本地路径）： 点「Choose…」按钮，找到你电脑上 AI 写好的代码所在的文件夹，选中它。这是最关键的一步——选对文件夹，你的代码才能被上传。

  3. 下面有个「Git Ignore」下拉框，不用管。还有个「License」下拉框，也不用管。

  4. 点「Create Repository」。

  5. 界面变了。中间区域是一个文件列表，显示你文件夹里所有文件。有些文件旁边有绿色加号「＋」——这些是新文件，等待被上传。有些文件旁边有黄色圆点——这些是被修改过的文件。

  6. 左下角有两个输入框：

    • 上面那个大的叫「Summary」（摘要），必填。 写一句描述，比如「第一次上传，完整的网站代码」。
    • 下面那个小的叫「Description」，选填，可以写更详细的说明。

  7. 填完 Summary 之后，点它下面的蓝色按钮「Commit to main」。

  8. 按钮消失，中间的文件列表变干净了——说明提交成功。现在代码还在你电脑上，还没到 GitHub。

  9. 点右上角的「Publish repository」按钮。如果右上角没看到这个按钮，看看顶部菜单栏——点「Repository」→「Push」。 版本不同按钮位置可能不一样。

  10. 弹出一个确认窗口，两个选项：

    • 「Keep this code private」（私密仓库）——只有你自己能看到代码。
    • 「Keep this code public」（公开仓库）——任何人都能看到你的代码。

    选哪个？ 如果你不想让别人看到你的代码，选 Private。但注意——Private 仓库不影响网站上线，你的网站别人依然能访问，只是源代码不公开。我一般选 Public，因为开源让别人也能参考，而且免费。选好后点「Publish Repository」。

  11. 等几秒钟，左下角出现一个进度条。进度条走完后——恭喜，你的代码已经在 GitHub 上了。

验证一下

打开浏览器，地址栏输入 github.com/你的用户名/你的仓库名（比如 github.com/zhangsan/my-first-website），回车。

你应该能看到你的所有代码文件整整齐齐地列在那里。往下滚动还能看到一个 README.md 或者你项目里的文件内容。

没看到？ 检查一下用户名和仓库名是不是拼对了。GitHub 的用户名和仓库名都是区分大小写的。

方法三：用终端（如果想自己动手敲命令）

如果你已经在用 AI 编程工具（比如 Claude Code、Cursor、Windsurf），它们都内置了终端。用终端上传代码会更快——几条命令就搞定。

第一步：确认电脑上装了 Git

打开终端：

  • Mac： 按 Cmd + 空格，输入「终端」，回车。
  • Windows： 按 Win 键，输入「PowerShell」，回车。

在终端里输入：

git --version

回车。如果弹出一行类似 git version 2.39.0 的字，说明 Git 已经装好了，跳到「配置 Git」。

如果提示「command not found」或「不是内部命令」： 说明电脑没装 Git。打开浏览器，去 git-scm.com，点右侧的「Download」按钮，下载对应系统的版本。Mac 下 .dmg，Windows 下 .exe。安装过程一路默认选项就行，全部点「Next」。装完之后重新打开终端，再输一次 git --version 确认。

第二步：配置 Git（一辈子做一次）

在终端里输入下面两行（记得把名字和邮箱换成你自己的）：

git config --global user.name "张三"
git config --global user.email "[email protected]"

这两行是告诉 Git：以后你所有的代码提交，都标记为「张三」提交的。只做一次就行。

第三步：先在 GitHub 网站上创建一个空仓库

  1. 打开 github.com，登录。
  2. 点右上角头像旁边的「＋」号 → 选「New repository」。
  3. 填仓库名（Repository name），比如 my-first-website。
  4. 描述（Description）随便写或不写。
  5. 选 Public（公开）或 Private（私密）。
  6. 重要：不要勾选「Add a README file」「Add .gitignore」「Choose a license」这三项。我们要的是一个完全空的仓库。
  7. 点「Create repository」。
  8. 创建完成后，你会看到一个页面，上面有几行命令。找到那个以 https://github.com/ 开头的地址（在「…or push an existing repository from the command line」那一段下面），全选复制。它长这样：https://github.com/zhangsan/my-first-website.git

第四步：在终端里上传代码

回到终端，逐条输入以下命令。每输完一行按回车：

# 1. 进入你的项目文件夹
# 把路径换成你实际放代码的位置
cd ~/Desktop/my-project

cd 是「change directory」的缩写，意思是切换目录。~/Desktop/my-project 是你放代码的文件夹路径。怎么找到这个路径？ Mac 上打开访达，找到你的文件夹，右键→「显示简介」，里面有个「位置」就是完整路径。Windows 上在文件资源管理器地址栏直接复制。

# 2. 初始化 Git
# 这行命令告诉 Git：「这个文件夹从现在开始由我管理」
git init

成功后终端会显示 Initialized empty Git repository in ...

# 3. 把所有文件加入待上传列表
# 注意有个点「.」，代表「当前文件夹里所有文件」
git add .

这一步可能很快（小项目）也可能等几秒（大项目）。没有报错就是成功了。

# 4. 提交——相当于打包，贴一个标签
# -m 后面是你给这次提交写的说明
git commit -m "第一次上传代码"

这一步终端会刷出一堆文件名，最后显示类似 20 files changed, 1500 insertions(+) 之类的统计。

# 5. 关联 GitHub 仓库
# 把引号里的地址换成你刚才在 GitHub 上复制的那个
git remote add origin https://github.com/你的用户名/你的仓库名.git

这行命令是告诉 Git：「以后我 push 的时候，代码应该传到这个地址去。」

# 6. 把代码推送到 GitHub
git branch -M main
git push -u origin main

第一行 git branch -M main 是把主分支命名为 main。第二行 git push -u origin main 是真正的上传。

输入 git push 之后：

  • 如果你是第一次用，终端可能会弹出一个浏览器窗口让你登录 GitHub。点「Sign in with your browser」，浏览器自动跳转授权页面，点绿色的「Authorize」按钮。
  • 授权成功后，回到终端，你应该能看到上传进度条——百分比在涨。
  • 最后显示 Branch 'main' set up to track remote branch 'main' from 'origin'.——说明上传成功。

验证

打开浏览器，输入 github.com/你的用户名/你的仓库名。你应该能看到所有代码文件了。

以后每次改了代码，只需要三步：

git add .
git commit -m "修改了首页布局"
git push

这三行就是你的肌肉记忆。改代码 → add → commit → push。Vercel 会自动检测到 GitHub 更新，自动重新部署你的网站。

第三步：选一个部署平台，把网站上线

代码到了 GitHub 之后，真正的魔法开始了。

部署平台就像一个自动化的流水线——它盯着你的 GitHub 仓库，一旦发现代码有变化，自动把最新版本编译打包，发布到互联网上。

这意味着什么？ 你以后改代码，只需要在电脑上改完、推到 GitHub，部署平台自动帮你更新网站。你什么都不用管。

下面我把你可能会用到的平台都讲一遍——每个平台我都会告诉你：它是什么、适合谁、一步一步怎么操作、花多少钱。

先给你一张总览表，心里有数：

平台适合场景费用难度是否需要数据库
Vercel纯前端网站、Next.js项目免费额度够用⭐不需要
Cloudflare Pages纯静态网站免费额度极大⭐不需要
Netlify纯静态网站、表单功能免费有限额⭐不需要
Zeabur完整项目（前后端+数据库）$5/月起⭐⭐需要
阿里云/腾讯云完全控制服务器几十~几百元/月⭐⭐⭐⭐⭐自己装

如果你的网站只是一个展示页面——没有登录、没有评论区、没有用户系统——Vercel 就够了，免费。

如果你的网站需要用户注册登录、评论区、付费功能——上 Zeabur。

我的建议：先试 Vercel。免费、最快、最适合新手。 后面网站变复杂了再升级到 Zeabur。

先别急着往下翻。花 3 分钟搞清楚你的项目是哪种类型——选错平台，部署完了功能跑不起来更折腾。

必读：先搞清楚你的项目是哪种类型

在选部署平台之前，你得先搞清楚一件事：你让 AI 帮你写的这个网站，到底属于哪种类型？

这直接决定了你该用哪个平台部署。选错了类型，部署完发现功能跑不起来，又得重来。

我先用一个类比让你彻底搞懂三个核心概念，然后拿我自己的真实项目举例，告诉你每种类型长什么样、怎么部署。

一个类比：把你的网站想象成一家餐厅

概念类比实际是什么我的项目里对应的东西
前端餐厅的装修、桌椅、菜单用户在浏览器里看到的页面——布局、按钮、颜色首页、导航栏、计算器的输入框和按钮
后端厨房里的厨师、收银员在服务器上跑的逻辑——处理登录、计算、发邮件用户点了「注册」，后台怎么验证邮箱、创建账号
数据库仓库的冰箱、账本存数据的地方——用户名、密码、订单、文章存了1000个用户的邮箱密码、5000条帖子

关键区别：

  • 前端跑在用户的浏览器里（用户能看到）
  • 后端跑在服务器上（用户看不到，但在工作）
  • 数据库存数据（用户看不到，但数据在积累）

好，现在根据你的网站「有没有后端」「有没有数据库」，分成三种类型。

类型A：纯前端项目（只有门面，没有厨房）

这长什么样？

你让 AI 帮你写了一个在线工具——比如一个「SWP 计算器」。用户打开网页，看到输入框，输入金额和年限，点「计算」，页面上立刻显示结果。

整个过程全部在用户浏览器里完成——计算在浏览器里算，结果在浏览器里显示。不跟任何服务器通信，不存任何数据。用户关掉网页，什么都没留下。

我自己的真实案例：SWP Calculator（swpcalculator.online）

这是我用 AI 写的一个印度基金投资计算器。用户输入每月投资金额、年限、预期收益率，页面自动算出一张详细的收益表。

这个网站：

  • ✅ 有一个漂亮的首页，有输入框、按钮、表格
  • ✅ 用户输入数字，页面当场算出结果
  • ❌ 没有登录功能——谁来了都能用
  • ❌ 没有用户系统——不存用户名密码
  • ❌ 没有数据库——算完就完了，不保存任何记录

AI 帮你生成的代码长什么样？

你打开项目文件夹，看到的文件大概是：

my-project/
├── index.html        ← 页面结构
├── style.css         ← 样式（颜色、布局）
├── script.js         ← 计算逻辑
└── package.json      ← Next.js/React 项目的配置

文件夹里没有 api/ 目录，没有 prisma/ 目录，没有 DATABASE_URL 这种东西。

怎么部署？

这类项目最简单——因为不需要服务器跑后端，也不需要数据库。代码推送到 GitHub 之后，直接导入 Vercel 或 Cloudflare Pages。

部署流程（5分钟）：

  1. 代码推到 GitHub
  2. 打开 Vercel，导入仓库
  3. 点「Deploy」
  4. 得到 你的项目名.vercel.app 链接
  5. 网站上线。完全免费。

我 SWP Calculator 就是这么上的，至今一分钱没花。

如果你不确定自己的项目是不是纯前端： 问你一个问题——「用户关掉网页后，他下次打开，能看到他上次操作的数据吗？」不能 → 纯前端。能 → 你有后端/数据库。

类型B：前端+后端项目（有门面，也有厨房）

这长什么样？

你在类型A的基础上，加了功能——用户能注册一个账号，登录后使用你的工具。或者用户能提交一个表单（比如邮箱订阅），你后台收到后发一封确认邮件。

这就涉及后端了。因为「注册」这件事不能只在浏览器里完成——浏览器不能自己创建用户、发邮件。必须有一个服务器在后台做这些事。

举例（假设一个带登录的工具站）：

你让 AI 写了一个「AI 文案生成器」网站。用户打开网页 → 看到输入框 → 输入「帮我写一段产品介绍」→ 点「生成」→ AI 生成一段文案显示在页面上。

如果你加了「注册登录」功能：用户得先注册账号 → 登录 → 才能用生成器。那这个网站就有了后端——注册、登录、验证身份，这些都是在服务器上完成的。

AI 帮你生成的代码长什么样？

打开项目文件夹，你会看到比类型A多了一些东西：

my-project/
├── app/
│   ├── page.tsx          ← 前端页面
│   ├── api/              ← ★ 这里！后端 API
│   │   ├── auth/
│   │   │   └── route.ts  ← 处理登录注册
│   │   └── generate/
│   │       └── route.ts  ← 处理 AI 生成请求
│   └── ...
├── lib/
│   └── auth.ts           ← 认证逻辑
└── package.json

关键标志：api/ 文件夹。这说明你的项目有后端代码。

怎么部署？

这要分两种情况：

情况一：你用 Next.js 的 API Routes（推荐）

Next.js 可以在同一个项目里写前端页面 + 后端 API。这种情况下，Vercel 也能跑——因为 Vercel 原生支持 Next.js 的 API Routes。

部署流程跟类型A完全一样：推 GitHub → 导入 Vercel → Deploy。Vercel 会自动检测到你有 API Routes，帮你配好。

限制： Vercel 免费版后端调用有额度——每月 100 万次函数调用。对个人项目够用，但如果用户量很大可能会超。

情况二：你用了单独的后端（Express / FastAPI 等）

如果你的项目是「React 前端 + Express 后端」分开写，或者「Vue 前端 + Python FastAPI 后端」，那 Vercel 就不够用了。

你需要 Zeabur。Zeabur 能同时跑前端和后端——你导入 GitHub 仓库后，它会自动识别前端是什么框架、后端是什么语言，分别配好。

部署流程（Zeabur）：

  1. 代码推到 GitHub
  2. 打开 Zeabur → New Project → Add Service → 导入仓库
  3. Zeabur 自动识别前端（Next.js/React）和后端（Express/FastAPI）
  4. 分别配好，给两个服务各自分配域名
  5. 前端页面调用后端 API——自动打通
  6. 费用：Dev 版 $5/月（14天免费试用）

怎么判断你的项目有没有后端？

  • 文件夹里有 api/ 目录 → 有后端
  • 代码里有 app.post() app.get() 这类路由定义 → 有后端
  • 你的网站有「注册」「登录」「提交表单后发邮件」功能 → 有后端
  • 你的项目有两个文件夹——frontend/ 和 backend/ → 有后端

类型C：前端+后端+数据库（完整餐厅，会员系统）

这长什么样？

你的网站不仅有注册登录，还需要「记住」用户的数据。比如：

  • 用户 A 昨天发了一篇帖子，今天登录后还能看到
  • 用户 B 买了会员，下次打开网站还是会员身份
  • 后台显示「今天有 500 个活跃用户」

这些都需要数据库。数据库就像一个仓库——你把用户信息、帖子内容、订单记录全部存进去，随时查、随时改。

我自己的真实案例：PNG 部落（AI 交流社区）

PNG 部落是一个 AI 从业者社区。它有以下功能：

  • 用户注册登录（前端+后端）
  • 发帖子、评论、点赞（前端+后端+数据库——帖子存在数据库里）
  • 积分系统（用户签到攒积分，积分存在数据库里）
  • 付费合集（买了哪些合集、付了多少钱，全存数据库）
  • 商城（商品列表、购物车、订单记录——都在数据库里）

这个网站的架构：

用户打开浏览器 → 看到前端页面（Next.js 渲染）
     ↓ 用户点「发帖」
前端发请求 → 后端 API 接收（Next.js API Routes）
     ↓ 后端处理
后端写数据库 → PostgreSQL（存帖子内容、作者、时间）
     ↓ 存好了
返回结果 → 前端显示「发布成功」

AI 帮你生成的代码长什么样？

除了前端和后端代码，你还会看到：

my-project/
├── app/                    ← 前端页面
│   ├── api/                ← 后端 API
│   └── ...
├── prisma/                 ← ★ 数据库！
│   └── schema.prisma       ← 数据库表结构定义
├── .env                    ← ★ 里面有 DATABASE_URL
└── package.json            ← ★ 依赖里有 prisma、pg 等

关键标志：prisma/ 文件夹 或 .env 文件里有 DATABASE_URL。

你需要什么数据库？

大多数 AI 建站项目默认用 PostgreSQL（开源、功能强、社区大）。偶尔用 MySQL。你不需要自己选——AI 帮你写代码时已经选好了。 看你的项目配置就知道了：

  • 看到 prisma → 一般是 PostgreSQL
  • 看到 mongoose → MongoDB
  • 看到 mysql2 → MySQL
  • 看到 @supabase/supabase-js → Supabase（托管版 PostgreSQL）

怎么部署？

有数据库的项目，必须用 Zeabur（或买服务器自己装数据库）。

部署流程（Zeabur）：

  1. 代码推到 GitHub
  2. 打开 Zeabur → New Project → Add Service → 导入仓库
  3. Zeabur 自动分析——看到 Next.js 自动配前端，看到 Prisma 自动提示「需要数据库」
  4. 点「Create Database」→ 选 PostgreSQL → 数据库自动创建
  5. Zeabur 自动把数据库地址注入到你的项目环境变量（你不用手动配 DATABASE_URL）
  6. ⚠️ 检查你的 .env 文件： 如果你的项目文件夹里有 .env 文件，打开看一眼——如果里面写了 DATABASE_URL=xxx，删掉这一行。 否则 Zeabur 自动注入的数据库地址会被你文件里的旧地址覆盖，导致连不上数据库。Zeabur 会帮你填正确的地址，不需要你自己写。
  7. 等 2-5 分钟，所有服务变绿「Running」
  8. 前端、后端、数据库全部跑起来了。你一行命令都没敲。
  9. 费用：Dev 版 $5/月（14天免费试用），Pro 版 $19/月。输入推荐码「PNGTRID」打 9 折。

为什么不能继续用 Vercel？ Vercel 只托管前端和后端逻辑（Serverless Functions），它不托管数据库。你可以在 Vercel 上跑前端+后端，但数据库得另外找地方——这样就变成两个平台，又多了配置成本。不如直接上 Zeabur，一个平台搞定全部。

怎么判断你的项目有没有数据库？

  • 文件夹里有 prisma/ 目录 → 有数据库
  • .env 文件里有 DATABASE_URL=postgresql://... → 有数据库
  • package.json 的依赖里有 prisma pg mysql2 mongoose supabase → 有数据库
  • 你的网站需要「记住」任何用户输入的数据（帖子、评论、积分、订单）→ 有数据库

10 秒判断你该用哪个平台

打开你的项目文件夹，对着看：

  • 看到 prisma/ 文件夹？→ 类型 C，上 Zeabur。
  • 没看到 prisma/，但看到 api/ 文件夹？→ 类型 B，先试 Vercel（Next.js API Routes 免费够用）。
  • 两个都没有？→ 类型 A，Vercel 免费搞定。

还不确定？在评论区发你项目文件夹的截图，我帮你看。

三句话总结

你的项目长什么样选什么平台花多少钱
类型A：纯前端在线计算器、个人主页、公司介绍页。用户看了就走，不存数据。Vercel 或 Cloudflare Pages¥0 免费
类型B：前端+后端带注册登录的工具站、收集邮箱的落地页、表单提交后发邮件。用户能操作。Vercel（Next.js API Routes）或 Zeabur¥0 或 $5/月
类型C：前端+后端+数据库社区论坛、电商、会员站、SaaS工具。用户数据全部存起来。Zeabur$5/月起

如果你不确定自己的项目是哪一型：默认当类型A，先上 Vercel。 免费、零风险。部署完发现功能少了？再搬到 Zeabur——代码在 GitHub 上不变，换个平台重新导入就行，5分钟的事。

方案一：Vercel（最推荐新手，免费）

Vercel 是什么： 一个专门给前端网站用的部署平台。你在 GitHub 上推代码，Vercel 自动检测到，自动帮你编译、打包、上线、配好全球 CDN（让你的网站在全世界都打开很快）。免费版对个人项目完全够用。

适用项目类型：

  • 纯 HTML/CSS/JS 网站
  • React 项目（Next.js、Create React App）
  • Vue 项目（Nuxt、Vite）
  • 静态博客（Hexo、Hugo、Gatsby）
  • 任何静态网站

不适用的：

  • 有后端代码的项目（比如 Express、FastAPI 写的服务端）
  • 需要跑数据库的项目

部署步骤——每一步都写清楚：

  1. 打开浏览器，输入 vercel.com，回车。

  2. 页面右上角有一个「Sign Up」按钮，点它。

  3. 你会看到三个登录选项——「Continue with GitHub」「Continue with GitLab」「Continue with Bitbucket」。点第一个「Continue with GitHub」。 这是最方便的——Vercel 直接关联你的 GitHub 账号，不需要额外注册。

  4. 浏览器跳转到 GitHub 授权页面。点绿色的「Authorize Vercel」按钮。

  5. 授权完成后跳回 Vercel。第一次登录会问你几个问题——「What type of account?」选「Hobby」（个人爱好/免费），「How did you hear about us?」随便选，然后一路点「Continue」。

  6. 进入 Vercel 后台。中间有一个大大的黑色按钮「New Project」，点它。如果没有，看右上角——有个「Add New…」下拉菜单 → 选「Project」。

  7. 你会看到一个「Import Git Repository」页面，列出了你 GitHub 上所有的仓库。找到你刚才上传的那个项目（比如 my-first-website），点它右边的「Import」按钮。

  8. 接下来进入配置页面。这个页面看起来有很多选项——不用担心，大部分你都不需要动。 Vercel 会自动检测你的项目类型：

    • 如果是 Next.js 项目 → 自动识别，构建命令填好 next build
    • 如果是纯 HTML → 自动识别，构建命令留空
    • 如果是 Vite 项目 → 自动识别，构建命令填好 vite build

    你只需要确认一件事：「Framework Preset」那一栏显示的框架类型，是不是和你的项目一致。一致就什么都不用改。

  9. 页面往下拉，有个「Environment Variables」区域。如果你不知道什么是环境变量，跳过，不要填。 等以后真的需要了再加。

  10. 点页面底部的紫色「Deploy」按钮。

  11. Vercel 开始构建你的项目。你会看到一个进度界面——「Building」「Cloning repository」「Installing dependencies」「Building」……等一两分钟。

  12. 构建完成后，页面自动跳转，满屏撒花动画 🎉 ——中间是一个链接，格式是 你的项目名.vercel.app。

你的网站上线了。 点那个链接，你就能看到你的网站。

现在把这个链接复制下来，发微信给你朋友，他们点开就能看到你的网站——在任何设备上，手机、电脑、平板都行。

以后怎么更新网站：

  1. 在电脑上修改代码
  2. 用 GitHub Desktop 或终端把代码推到 GitHub
  3. Vercel 自动检测到 GitHub 更新，自动重新部署
  4. 等一两分钟，刷新你的 .vercel.app 链接，更新就生效了

你不需要登录 Vercel 做任何操作。改代码 → 推 GitHub → 自动更新。就这么简单。

多少钱：

  • Hobby 版永久免费。
  • 每月 100GB 流量、6000 分钟构建时间。
  • 对个人项目来说根本用不完。我的 SWP Calculator（一个在线计算器）上线好几个月了，至今一分钱没收过。

一个小坑——如果你用的是 Next.js 且用了 API Routes： Next.js 可以在同一个项目里写前端页面 + 后端 API（API Routes / Server Actions）。这些功能在 Vercel 免费版上也能跑，但有额度限制——每月 100GB 流量、100 万次函数调用。普通个人站完全够用。但如果你的网站突然火了（比如被大V转发），可能会超。超了不会立刻停，Vercel 会给你发邮件提醒你升级。 到时候再决定要不要付费也不迟。

方案二：Cloudflare Pages（免费额度最大）

Cloudflare Pages 是什么： 跟 Vercel 一样，也是从 GitHub 拉代码自动部署。核心区别——Cloudflare 的免费额度比 Vercel 更大：无限流量、无限请求、无限站点数。但配置比 Vercel 稍微多一步。

适用项目类型： 跟 Vercel 一样——纯前端/静态网站。

部署步骤：

  1. 打开浏览器，输入 pages.cloudflare.com，回车。

  2. 点「Sign Up」。Cloudflare 需要邮箱注册（不是直接 GitHub 登录）。输入邮箱、设置密码。密码至少8位，含大小写字母、数字、特殊符号。

  3. 注册完去邮箱收验证邮件，点验证链接。

  4. 登录后进入 Cloudflare 后台。左侧有一排菜单——找到「Workers & Pages」，点进去。

  5. 点页面顶部或中间的「创建」按钮 → 选「Pages」→ 选「连接到 Git」。

  6. 页面会让你选择 Git 提供商。点「GitHub」→ 点「Connect GitHub」→ 浏览器跳转到 GitHub 授权页 → 点「Authorize Cloudflare Pages」。

  7. 授权完成后，选择你要部署的 GitHub 仓库（比如 my-first-website），点「开始设置」。

  8. 进入配置页。这比 Vercel 多了一个步骤，需要你手动填两个东西：

    • 项目名称（Project name）： 默认就是你的仓库名，不用改。
    • 生产分支（Production branch）： 默认 main，不用改。
    • 构建命令（Build command）： 这是关键。不同框架不一样：
      • Next.js → 填 npm run build
      • Vite / React → 填 npm run build
      • Vue CLI → 填 npm run build
      • 纯 HTML/CSS/JS → 留空
    • 构建输出目录（Build output directory）： 同样看框架：
      • Next.js 静态导出模式 → 填 out
      • Vite → 填 dist
      • Create React App → 填 build
      • 纯 HTML → 留空
      如果你不确定该填什么： 打开你的项目文件夹，看有没有 package.json 文件。如果有，打开它，找到 "scripts" 那一部分，看看有没有 "build" 命令。有的话，构建命令填 npm run build。然后看项目里有没有 dist/ 或 build/ 或 out/ 文件夹——哪个存在就填哪个。都没有？两个都留空试试（适用于纯HTML项目）。

  9. 点「保存并部署」。等几分钟，页面刷新后你会看到一个 你的项目名.pages.dev 的链接。

⚠️ 如果你用的是 Next.js： Cloudflare Pages 默认是静态部署，不能直接跑 Next.js 的服务端功能（如 API Routes）。如果你的 Next.js 项目没有用到 API Routes、没有用到服务端渲染，可以直接部署——但需要先配置静态导出。打开 next.config.ts（或 next.config.js），加上 output: 'export'，然后构建输出目录填 out。不确定要不要加？先不加试试——部署失败了再加也不迟。如果你用了 API Routes，建议换 Vercel（原生支持 Next.js）。

以后更新： 跟 Vercel 一样——改代码→推GitHub→自动部署。

跟 Vercel 怎么选：

  • 如果你是 Next.js 项目 → 选 Vercel。 Vercel 是 Next.js 的母公司做的，支持最原生，不用额外配置。
  • 如果你是纯 HTML 或 Vue/React → 两个都行。 Cloudflare 免费额度更大，但 Vercel 配置更傻瓜。
  • 如果你预期流量会很大 → 选 Cloudflare。 免费额度无上限。

方案三：Netlify

Netlify 是什么： 跟上面两个一样，也是 Git 驱动的部署平台。它的特色功能是内置表单处理——如果你的网站有「联系我们」这种表单，Netlify 可以免费帮你收集提交。

部署步骤：

  1. 打开 netlify.com，点「Sign up」→ 选「GitHub」登录。
  2. 授权后进入 Netlify 后台。点「Add new site」→「Import an existing project」。
  3. 选 GitHub，授权后找到你的仓库，点它。
  4. 配置页——Netlify 也会自动检测你的框架类型。确认一下「Build command」和「Publish directory」对不对，然后点「Deploy site」。
  5. 等几分钟，Netlify 会给你一个 项目名.netlify.app 的地址。

免费额度： 每月 100GB 带宽、300 分钟构建时间。比 Vercel 和 Cloudflare 的免费额度少一些。个人小站够用，但如果频繁改代码重新构建，可能会用完每月的构建分钟数。

什么时候选 Netlify： 如果你需要表单功能，又不想折腾后端——Netlify 自带表单是最省事的。其他情况优先 Vercel 或 Cloudflare。

方案四：Zeabur（需要数据库的完整项目）

前面三个平台都是给「纯前端」网站用的——就是那种只展示内容、没有用户系统、没有数据库的网站。

但如果你做的网站有这些功能：

  • 用户注册和登录
  • 评论区
  • 付费/会员系统
  • 后台管理
  • 任何需要「存数据」的功能

Vercel就不够了。这时候你需要 Zeabur。

Zeabur 是什么： 一个 PaaS（平台即服务），说人话就是「帮你管服务器的保姆」。你把代码给它，它自动识别你用了什么技术——前端（Next.js）、后端（Node.js）、数据库（PostgreSQL）、缓存（Redis）——然后帮你全部配好、跑起来。你不用管服务器、不用配数据库、不用写部署脚本。

我自己用 Zeabur 比较多——PNG 部落就跑在 Zeabur 上，前后端+数据库+Redis 全部在里面。 之前写过一篇《Zeabur 部署完全指南》可以搜来看。

部署步骤：

  1. 打开 zeabur.com，点「Sign Up」→ 用 GitHub 登录。
  2. 授权后进入 Zeabur 后台。点「New Project」。
  3. 给你的项目取个名字（英文），点「Create」。
  4. 进入项目后，点「Add Service」→ 选「GitHub」。
  5. 授权 Zeabur 访问你的 GitHub，找到你的仓库，点「Import」。
  6. Zeabur 会自动分析你的项目。 它看到你的代码里有 Next.js 就会自动配好前端服务；看到 Prisma（一个数据库工具）就会自动提示你创建 PostgreSQL 数据库；看到 Redis 配置就会自动配好缓存。
  7. 如果项目需要数据库，Zeabur 会在「Service」列表里自动弹出一个提示——「检测到数据库依赖，需要创建数据库吗？」点「Create」，选择 PostgreSQL（默认推荐），数据库就自动创建好了。你不需要懂任何数据库知识，Zeabur 帮你搞定。 数据库的连接地址、用户名、密码都会自动注入到你的项目环境变量里。
  8. 等服务全部变成绿色「Running」状态（通常 2-5 分钟），Zeabur 会给你一个域名。
  9. 点「Domain」→ 点「Generate Domain」，你会得到一个 项目名.zeabur.app 的地址。点它，你的网站就打开了。
  10. 如果有自己的域名，点「Domain」→「Custom Domain」→ 输入你的域名，按提示配 DNS。

什么项目需要用数据库？

  • 用户注册登录（需要存用户名、密码）
  • 评论区、留言板（需要存评论内容）
  • 电商/付费（需要存订单、支付记录）
  • 内容管理后台（需要存文章、设置）
  • 任何需要「记住」数据的功能

如果你的项目以上都没有——你不需要 Zeabur，Vercel 免费就够了。

数据库选什么？ Zeabur 默认推荐 PostgreSQL。我也用它。为什么不是 MySQL？简单说：PostgreSQL 更现代、功能更强、开源社区更活跃。对新手来说，你不需要纠结这个——就用 Zeabur 默认选的 PostgreSQL 就行。

多少钱：

  • Dev 版 $5/月（14 天免费试用），够跑一个中等项目。
  • Pro 版 $19/月，性能更好，构建更快。
  • 输入推荐码「PNGTRID」打 9 折。结账时在「Promo Code」框里输入就行。

跟 Vercel 的本质区别：

  • Vercel 只管前端（展示层）
  • Zeabur 管前端 + 后端 + 数据库 + Redis（全栈）
  • 如果你只需要一个展示页 → Vercel 免费
  • 如果你需要用户系统、数据存储 → Zeabur

方案五：阿里云 / 腾讯云（买一台自己的服务器）

这条路我不建议新手走，但既然很多人问，我还是讲清楚——包括为什么我不建议。

阿里云 ECS / 腾讯云 CVM 是什么： 就是你租一台远程电脑（云服务器）。这台电脑 24 小时开机，永远在线。你可以在这台电脑上装任何东西——网站、数据库、爬虫、机器人。

适合什么人：

  • 已经用过 Vercel/Zeabur，觉得灵活度不够
  • 需要跑 7×24 小时后台任务（比如定时抓数据）
  • 需要特殊软件环境（比如 Python 的某些库、特定的操作系统配置）
  • 想完全掌控服务器的人

不适合什么人：

  • 新手——你会花 80% 的时间搞运维，而不是做产品
  • 只想上线一个展示页的人——Vercel 免费又省心

我自己的经历： 最早玩小龙虾的时候，买过腾讯云轻量应用服务器。一年 80 块，2核2G的配置，装了 Node.js 跑了半年没问题。但后来 PNG 部落我还是搬到了 Zeabur——因为买服务器=开始运维，太累了。

基本流程（以腾讯云为例）：

  1. 打开 cloud.tencent.com，注册账号。注意：需要实名认证，需要上传身份证。 如果你是学生，可以申请学生优惠。
  2. 登录后，在产品列表里找「轻量应用服务器」或「云服务器 CVM」。轻量更便宜、更傻瓜；CVM 更灵活、更贵。
  3. 选配置：
    • CPU： 2 核就够了
    • 内存： 2GB 起步，4GB 更从容
    • 硬盘： 40GB 起步
    • 带宽： 3-5Mbps 够个人站用
  4. 选系统镜像：选 Ubuntu 22.04（最常用、教程最多、AI最熟悉）。别选 Windows Server——那个又贵又吃资源。
  5. 选购买时长：先买一个月试试，别一上来就买一年。很多平台首月有折扣。
  6. 付钱。付完后等几分钟，服务器创建完成。
  7. 你会拿到两个东西：
    • 一个 IP 地址（一段数字，比如 123.45.67.89）——这是你的服务器在互联网上的地址。
    • 一个 root 密码（一串随机字符）——这是你登录服务器的钥匙。

然后你要做的事（这就是为什么我不推荐新手）：

拿到服务器只是开始。你还得：

  1. 用 SSH 连接服务器。 Mac 用终端输入 ssh root@你的IP；Windows 需要下载 Xshell 或 Putty。第一次连接会弹一个警告，输入 yes。
  2. 更新系统。 apt update && apt upgrade -y，等几分钟。
  3. 装 Node.js。 如果你的网站是 Node.js 写的。用 curl 下载、解压、配环境变量。
  4. 装 Nginx。 这是一个网页服务器，负责把域名请求转发给你的网站。还得写配置文件，告诉它「当你收到 www.我的网站.com 的请求时，转到本地的 3000 端口」。
  5. 装数据库。 如果你的网站需要数据库。装 PostgreSQL 或 MySQL，创建数据库、创建用户、配权限。
  6. 配防火墙。 开放 80 端口（HTTP）、443 端口（HTTPS）、22 端口（SSH）。腾讯云/阿里云后台有「安全组」设置，还要在服务器里用 ufw 再设一遍——两层防火墙。
  7. 申请 SSL 证书。 让网站显示「🔒」小锁。用 Let’s Encrypt 的 certbot 工具。但经常遇到域名解析没生效、Nginx 配置不对、证书路径写错等问题。我当初配 HTTPS 折腾了一下午。
  8. 把你的代码传上服务器。 用 git clone 从 GitHub 拉代码，然后 npm install 装依赖，npm run build 构建。
  9. 装 PM2。 一个进程管理工具——让你的网站万一挂了能自动重启。npm install -g pm2，然后 pm2 start npm -- start。
  10. 配自动部署。 每次改了代码，理论上你应该自动更新服务器。配 GitHub Webhook 或者写个脚本监听 GitHub 推送。又是一套配置。

每一步都可能踩坑。 SSH 连不上、端口没开、Nginx 配错了导致 502 错误、HTTPS 证书过期忘了续、数据库连接被拒绝、服务器被扫描攻击……这些我都遇到过。

什么时候该买服务器： 当你的项目已经跑在 Vercel/Zeabur 上，有用户了，你觉得免费/低费平台真的限制了你的发挥。在那之前，别买。

费用参考：

  • 腾讯云轻量应用服务器：约 80~200 元/年（最低配：2核2G）
  • 阿里云 ECS：约 50~100 元/月（2核2G）
  • 域名：.com 约 70 元/年，.cn 约 30 元/年。首年通常有优惠。

第四步：绑定你自己的域名（可选但推荐）

Vercel/Zeabur 给你的域名是 xxx.vercel.app 或 xxx.zeabur.app。能用，但看起来不够专业。

如果你想让网站叫 www.我的网站.com，需要两步：

第一步：买一个域名

域名注册商（卖域名的网站）：

平台网址特点
阿里云万网wanwang.aliyun.com国内最大，.cn 域名便宜
腾讯云 DNSPoddnspod.com.com 首年常有优惠
Namecheapnamecheap.com国外，界面英文，价格稳定
Cloudflarecloudflare.com按成本价卖，不加价

怎么选： 如果你主要做国内用户，阿里云或腾讯云方便。如果你做海外用户，Namecheap 或 Cloudflare。

买域名的步骤（以阿里云为例）：

  1. 打开 wanwang.aliyun.com
  2. 在搜索框输入你想要的名字，比如「我的工具站」
  3. 它会显示这个域名的各种后缀（.com .cn .net .xyz）的价格和是否可注册
  4. 选一个你喜欢的、便宜的
  5. 加入购物车 → 结算
  6. 结算时需要填域名所有者信息（个人就填你的实名信息）
  7. 付钱

多少钱： .com 一般 70 元/年，.cn 约 30 元/年。首年通常有折扣。注意——这是按年付费的，每年续费。

第二步：把域名指向你的网站

每个部署平台都有「绑定自定义域名」的功能。以 Vercel 为例：

  1. 进 Vercel 后台，点你的项目名 → 顶部菜单「Settings」→ 左侧「Domains」。
  2. 在输入框里输入你买的域名，比如 www.我的工具站.com。
  3. 点「Add」。Vercel 会告诉你需要添加一条 DNS 记录——通常是 CNAME 记录。它会给出具体值，比如让你把 www 指向 cname.vercel-dns.com。
  4. 去你买域名的地方（阿里云/DNSPod/Cloudflare），找到「DNS 管理」或「域名解析」。
  5. 添加一条记录：
    • 记录类型： CNAME
    • 主机记录： www
    • 记录值： 填 Vercel 给你的那个地址（比如 cname.vercel-dns.com）
    • TTL： 默认就行（通常是 600）
  6. 保存。
  7. 等几分钟到几小时（DNS 生效需要时间，通常 10 分钟以内）。刷新 Vercel 后台的 Domains 页面，状态变成「Valid」就说明配好了。如果超过 2 小时还没生效，别急——国内部分运营商的 DNS 缓存可能要 24-48 小时。 你可以用 whatsmydns.net 检查 DNS 是否全球生效——输入域名，它会显示各地解析状态。
  8. 现在 www.我的工具站.com 就能访问你的网站了。

不想搞域名的话，先用平台给的免费域名就行。 等网站真的有人用了，再买域名也不迟。.vercel.app 的域名也可以先跑着。

常见问题排查

1. Vercel 部署失败了，怎么办？

点进失败的部署记录，看「Build Logs」——那里会显示具体的错误信息。常见原因：

  • Module not found — 某个依赖没装。确认你的 package.json 里有这个依赖，然后重新推代码。
  • Build failed with exit code 1 — 构建命令错了。检查 Vercel 项目设置里的「Build Command」。
  • Environment variable not found — 你代码里用了一个环境变量，但没在 Vercel 里配置。去 Settings → Environment Variables 添加。

最简单的调试方法： 在你自己电脑上跑一次 npm run build，看有没有报错。如果本地能构建成功，Vercel 一般也能。

2. GitHub 推送时提示「Permission denied」

说明你电脑没有权限推送到这个 GitHub 仓库。两个可能：

  • 你不是这个仓库的所有者
  • 你的 GitHub 登录过期了

解决： 打开终端，输入 git push，它会弹出一个浏览器窗口让你重新登录 GitHub。登录后重试。

3. 网站打开了，但样式全乱了 / 图片不显示

常见原因：

  • 你的 HTML/CSS 里用了相对路径，部署后路径变了。把所有路径改成相对于项目根目录的。
  • Next.js 的 next.config.js 需要配置 basePath。
  • 图片文件没有一起上传到 GitHub。

解决： 在浏览器里按 F12 打开开发者工具 → 看「Console」和「Network」标签页——哪张图片 404 了，哪个 CSS 加载失败了，一目了然。

4. 我想让 AI 直接帮我部署，可以吗？

如果你在用 Claude Code、Cursor 这类 AI 编程工具，可以让 AI 帮你执行部署命令。比如在 Claude Code 里说：

「帮我用 Git 把代码推送到 GitHub 仓库 https://github.com/我的用户名/我的仓库.git」

AI 会帮你执行 git add git commit git push 这一整套。

但 Vercel/Zeabur 的初始创建和授权，还是需要在网页上操作——因为需要你手动授权 GitHub 访问。

总结：我该选哪个？

一张决策表：

你的情况选这个花费还需要做什么
刚写完第一个网站，纯展示页面Vercel¥0买域名（可选）
同上，预期流量大或想要更大免费额度Cloudflare Pages¥0配置构建命令
网站有注册登录、评论区、数据库Zeabur$5/月起绑定域名
已经用过免费平台，想完全掌控服务器腾讯云轻量¥80/年学运维

绝大多数人的第一步：Vercel 就够了。完全免费，5分钟上线。

我上了十几个站，大部分都在 Vercel 和 Zeabur 上。

最快路径：5 分钟让你的网站上线

如果你不想看那么多文字，只想最快速度把网站搞上线——就做这四件事：

1. 去 github.com 注册账号（2 分钟）

2. 下载 GitHub Desktop → 把代码文件夹拖进去 → 点「Publish repository」（2 分钟）

3. 去 vercel.com → 用 GitHub 登录 → 导入你的仓库 → 点「Deploy」（1 分钟）

4. 复制 你的项目名.vercel.app 链接，发给朋友（0 分钟）

你的网站，此刻已经在互联网上了。

这篇文章从 GitHub 注册，一路写到域名绑定、数据库选型、服务器购买、常见排错。如果你跟着走到了这里，你的网站应该已经能被任何人访问了。

卡在哪一步，评论区直接问。把你的项目文件夹截图发出来，我帮你看你该用哪个平台。 这篇文章我会持续维护——大家踩的坑多了，我就补进来。

代码写完只是开始。把它搬上网，才是真正的交付。

袁锐钦

全栈开发者 · AI 应用工程 · PNGTRIBE

邮箱 GitHub ↗