您可能听说过 vibe coding — 即向 AI 描述您的需求,让它为您编写代码。但有一个问题鲜有人提及:代码写完之后会发生什么?
Most vibe coders hit a wall. They've got a beautiful app sitting on their laptop, and then they Google "how to deploy a website" and fall into a rabbit hole of Docker, Kubernetes, CI/CD pipelines, and YAML files that make them question their life choices.
这就是 vibe 托管 的用武之地。
Vibe 托管是以您编写代码的方式来部署代码 — 毫不费力,零摩擦,没有配置烦恼,也不需要 DevOps 学位。您只需 git push,网站就上线了。SSL?自动。DNS?已处理。服务器配置?已完成。
在本教程中,我们将使用 Claude Code 进行 vibe 代码编程,使用 NameOcean 进行 vibe 托管,完整演示从零到上线网站的工作流程。
您需要准备的内容
就这样。没有 Docker。没有 AWS 控制台。没有 Terraform。没有眼泪。
将 Claude Code 连接到 NameOcean
只需一条命令即可将 NameOcean MCP 服务器添加到 Claude Code。无需下载任何内容:它运行在 nameocean.net 上,您只需在浏览器中使用 NameOcean 账户登录。
$ claude mcp add --transport http nameocean https://nameocean.net/mcp
然后在 Claude Code 中运行 /mcp 并选择 nameocean 进行登录。Claude Desktop、claude.ai、Cursor 及其他客户端的连接方式相同:请参阅MCP 指南。
还没有账户?请先在 nameocean.net 注册。连接应用需要您的账户启用两步登录。
在 NameOcean 上创建服务器
登录您的 NameOcean 仪表板并创建新服务器。选择符合您需求的计划:
| 套餐 | CPU | 内存 | 磁盘 | 最适合 |
|---|---|---|---|---|
| 初阶 $5/月 | 3 | 3 GB | 30 GB | 落地页、小型应用 |
| 增长 $8/月 | 5 | 5 GB | 50 GB | 生产级网络应用 |
对于落地页或小型网络应用,初阶套餐绰绰有余。
每台 NameOcean 服务器都运行 Rocky Linux 10,并预装 Python 3.15(pyenv + uv)、Node.js 22、Go 1.26、Nginx、PostgreSQL 16、Valkey(兼容 Redis)、带 Compose 的 Docker、Supervisor 和 Git — 全部预先配置完毕,开箱即用,无需任何设置。
绑定域名
如果你在 NameOcean 上注册了域名(或转入了域名),将其绑定到服务器只需一个操作。通过 Claude Code 的 MCP 集成,实际上只需一句话:
"Bind mywebsite.com to my Starter server"
幕后,NameOcean 会:
- 更新 DNS 记录指向你的服务器
- 通过 Let's Encrypt 自动配置 SSL 证书
- 配置负载均衡器将 HTTPS 流量路由到你的服务器
几分钟内,你的域名就上线了,并受 HTTPS 保护。无需 Certbot 命令、无需 Nginx SSL 配置、无需 DNS 传播猜谜游戏。
用 Vibe 代码打造网站
现在来到有趣的部分。打开你的项目目录并启动 Claude Code:
mkdir my-awesome-site && cd my-awesome-site
git init
claude
然后描述你想要什么:
"Create a modern landing page for my WordGrid word puzzle game.
It should have a hero section with App Store and Google Play buttons,
a features section, screenshots, how-to-play steps, and a CTA section.
Use the game's color palette — orange, teal, purple on a dark background."
Claude Code 会创建一个完整的、响应式的、生产就绪的网站。你不用写一行代码。你描述感觉,AI 来实现。
Vibe 编程的艺术
伟大 Vibe 编程的关键在于对想要什么保持具体,而对如何实现保持灵活:
内容和文案(特别是特定语言的)、品牌色彩和视觉标识、你想要的功能和板块、目标受众和语气。
CSS 架构、动画细节、组件结构、响应式断点、图标选择和微交互。
Think of it like talking to a skilled designer. You say "I want a modern, dark-themed landing page that feels playful and energetic" -- you don't say "use flexbox with a 24px gap and a linear gradient from #0f1628 to #161d35."
用 Git Push 部署
这就是 Vibe 托管的出彩之处。每个 NameOcean 服务器都预装了 git 远程仓库。只需添加一次:
# Add the remote (first time only)
git remote add nameocean ssh://root@yourserver.nameocean.org:PORT/root/app
# Deploy
git add .
git commit -m "Initial launch"
git push nameocean main
就这样。你的代码会进入服务器上的 /root/app/ 目录。Nginx 已经配置好从该目录提供静态文件。你的网站已上线。
无需构建步骤。无需 Docker 镜像。无需部署流程。无需等待。只需 git push 并刷新浏览器。
首次推送可以使用任意分支名称(main、master...);此后服务器将部署该分支,占位欢迎页面也会消失。每次部署后需要构建步骤或重启吗?请在项目中添加 .nameocean/deploy.sh。它会在每次推送后在服务器上运行,其输出会直接显示在您的终端中:
#!/bin/bash
set -e
npm ci
npm run build
supervisorctl restart app
直接在服务器上编辑的文件会在下次推送时被替换,因此请将您的更改保存在 git 中。
用 Vibes 迭代
Vibe 编程 + Vibe 托管的真正力量在于迭代速度。想改变英雄区域?
"Make the hero headline bigger and add a floating animation to the phone mockup"
然后再次部署:
git add . && git commit -m "Bigger hero headline + animation" && git push nameocean main
你的更改在几秒内上线。这个反馈循环 — 描述 → 生成 → 部署 → 看到效果 — 正是让 Vibe 托管如此具有变革性的原因。你不仅编码更快;你在交付更快。
超越静态网站
NameOcean 上的 Vibe 托管不仅限于静态 HTML。该平台开箱即支持全栈应用。
服务器架构
NameOcean 负载均衡器在 443 端口接收 HTTPS 请求,持有证书,并将每个请求转发到您服务器的 80 端口。您只需在 80 端口提供网站服务:无需 Certbot,服务器上也无需任何 SSL 配置。
Node.js / Express / Next.js
让 Claude Code 创建您的 Express API 或 Next.js 应用。将其配置为监听 127.0.0.1:8000,设置 Supervisor 使其保持运行(现成示例位于 /root/conf/supervisor.conf),并在 /root/conf/nginx.conf 中启用反向代理。完成。
Python / Flask / FastAPI / Django
工作流程相同。您的 Python 应用监听 8000 端口,由 Supervisor 管理进程,Nginx 代理请求。NameOcean 通过 pyenv 提供最新的 Python (3.15)、现成的 virtualenv,以及用于快速安装的 uv。
Go / Rust / 任何东西
编译您的二进制文件,在 8000 端口运行,其余交给 Nginx。如果您更喜欢 Docker,也可以使用:Docker 和 Docker Compose 已安装并正在运行。
其他协议
游戏服务器、MQTT、使用独立端口的 WebSocket:在控制面板中通过服务器菜单开放 TCP 或 UDP 端口。NameOcean 会分配外部端口,流量将直接到达您的服务器。每台服务器最多 10 个端口。
您的服务器会向 AI 自我说明
每台服务器的 /root 目录下都有一个 AGENTS.md(也链接为 CLAUDE.md)。它会告诉 Claude Code、Codex 或其他任何智能体服务器的工作方式:应用位于何处、流量如何到达、如何部署、运行进程、开放端口和绑定域名。在服务器上运行 nameocean-info 可查看实时信息:版本、运行中的服务、开放的端口以及最近一次部署。
MCP 集成:自动驾驶模式下的 Vibe 主机
NameOcean + Claude Code 组合的特别之处就在这里:MCP(模型上下文协议)集成。
当你在 Claude Code 中将 NameOcean 连接为 MCP 服务器时,AI 可以直接:
- 创建和管理服务器 — 用一句话启动基础设施
- 绑定域名 — 自动配置 SSL 和 DNS
- 打开/关闭端口 — 用于数据库、API 和服务
- 部署代码 — 通过 git push,从对话中触发
- 检查服务器状态 — 用自然语言监控你的基础设施
这意味着你可以直接说出来:
"Create a new Starter server, bind mydomain.com to it, build
a portfolio website with my projects, and deploy it"
Claude Code 会处理一切 —— 从服务器配置到编写代码再到部署。整个生命周期都通过自然语言管理。基础设施变得透明无感。
真实案例:WordGrid 落地页
让我们用一个真实案例为你讲解。我们从零开始为 WordGrid(一款土耳其文字拼图游戏)构建了落地页。
总耗时:不到 10 分钟。
| 步骤 | 操作 | 耗时 |
|---|---|---|
| 1 | 在 NameOcean 上创建了一个 Starter 服务器 | 约 30 秒 |
| 2 | 绑定了 wordgridoyna.com — DNS + SSL 自动配置 | 约 10 秒 |
| 3 | 向 Claude Code 描述了落地页 | 约 3 分钟 |
| 4 | git push nameocean main | 约 5 秒 |
| 5 | 站点已在 https://wordgridoyna.com 上线 | 即时 ✨ |
结果:一个完全响应式的深色主题落地页,拥有动画英雄部分、App Store 和 Google Play 下载按钮、功能网格、截图库、玩法指南、行动号召部分以及移动端优化布局。全部由 AI 生成,通过单次推送部署。
Vibe 主机使用技巧
从简单开始,快速迭代
不要在一个提示中描述整个应用。从结构开始,然后添加功能。每次迭代距离上线只需一次 git push。
选择合适的服务器规格
不要过度配置。Starter 服务器可以处理大多数落地页和小应用。仅在需要时才升级。
保持 Git 历史整洁
即使是 vibe 编码,也要保持良好的提交信息。当你需要回滚时,git revert 仍然有效。
充分利用预装堆栈
Node、Python、Go、PostgreSQL、Valkey、Docker -- 一应俱全。运行 nameocean-info 查看确切版本,并直接使用现有的环境。
使用 Supervisor 管理进程
运行 Node.js 或 Python?始终使用 Supervisor。它会在崩溃时自动重启,在服务器重启时自动启动。
信任 AI,指导 Vibe
在做什么上要具体,在怎么做上要灵活。AI 处理实现细节 —— 你专注于愿景。
Vibe 主机宣言
当想法到上线网站的间隔从小时缩短到分钟时,一切都改变了。副业项目得以启动。MVP 在下午就能接触到客户。复杂基础设施造成的技术债务彻底消失。
最好的部署,就是你不需要去想它。
git push,它就上线了。这就是 vibe。
准备好开始 Vibe 主机了吗?
你的下一个项目距离上线只需一次对话。
git push部署将您的服务器连接到 Claude Code
$ claude mcp add --transport http nameocean https://nameocean.net/mcp