✨ 教程 年2月27日 · 阅读需 12 分钟

如何开始 Vibe Hosting?
完整的从零开始的 Vibe 代码编程教程

Vibe 代码编程让我们能够无需手写代码就能创建。Vibe 托管让我们能够无需考虑服务器就能上线。这是一份完整指南,帮您在 10 分钟内从想法变成上线网站。

NO
NameOcean 团队
托管与开发者体验

您可能听说过 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 托管?

Vibe 托管是以您编写代码的方式来部署代码 — 毫不费力,零摩擦,没有配置烦恼,也不需要 DevOps 学位。您只需 git push,网站就上线了。SSL?自动。DNS?已处理。服务器配置?已完成。

在本教程中,我们将使用 Claude Code 进行 vibe 代码编程,使用 NameOcean 进行 vibe 托管,完整演示从零到上线网站的工作流程。

💬
描述
告诉 AI 您想要什么
→
🤖
生成
AI 编写代码
→
🚀
推送
git push 到服务器
→
🌍
上线
网站在线

您需要准备的内容

🤖
Claude Code
AI 编码助手
🌊
NameOcean 账户
nameocean.net
🌐
域名
在 NameOcean 上购买或使用您自己的
⏰
约 10 分钟
所需的全部时间

就这样。没有 Docker。没有 AWS 控制台。没有 Terraform。没有眼泪。

1

将 Claude Code 连接到 NameOcean

只需一条命令即可将 NameOcean MCP 服务器添加到 Claude Code。无需下载任何内容:它运行在 nameocean.net 上,您只需在浏览器中使用 NameOcean 账户登录。

Terminal
$ claude mcp add --transport http nameocean https://nameocean.net/mcp

然后在 Claude Code 中运行 /mcp 并选择 nameocean 进行登录。Claude Desktop、claude.ai、Cursor 及其他客户端的连接方式相同:请参阅MCP 指南。

🔑 第一次使用?

还没有账户?请先在 nameocean.net 注册。连接应用需要您的账户启用两步登录。

2

在 NameOcean 上创建服务器

登录您的 NameOcean 仪表板并创建新服务器。选择符合您需求的计划:

套餐CPU内存磁盘最适合
初阶 $5/月33 GB30 GB落地页、小型应用
增长 $8/月55 GB50 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 — 全部预先配置完毕,开箱即用,无需任何设置。

3

绑定域名

如果你在 NameOcean 上注册了域名(或转入了域名),将其绑定到服务器只需一个操作。通过 Claude Code 的 MCP 集成,实际上只需一句话:

Claude Code
"Bind mywebsite.com to my Starter server"

幕后,NameOcean 会:

  1. 更新 DNS 记录指向你的服务器
  2. 通过 Let's Encrypt 自动配置 SSL 证书
  3. 配置负载均衡器将 HTTPS 流量路由到你的服务器

几分钟内,你的域名就上线了,并受 HTTPS 保护。无需 Certbot 命令、无需 Nginx SSL 配置、无需 DNS 传播猜谜游戏。

4

用 Vibe 代码打造网站

现在来到有趣的部分。打开你的项目目录并启动 Claude Code:

Terminal
mkdir my-awesome-site && cd my-awesome-site
git init
claude

然后描述你想要什么:

Claude Code prompt
"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 编程的关键在于对想要什么保持具体,而对如何实现保持灵活:

✅ 要具体描述

内容和文案(特别是特定语言的)、品牌色彩和视觉标识、你想要的功能和板块、目标受众和语气。

🎨 让 AI 决定

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."

5

用 Git Push 部署

这就是 Vibe 托管的出彩之处。每个 NameOcean 服务器都预装了 git 远程仓库。只需添加一次:

Terminal
# 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。它会在每次推送后在服务器上运行,其输出会直接显示在您的终端中:

.nameocean/deploy.sh
#!/bin/bash
set -e
npm ci
npm run build
supervisorctl restart app

直接在服务器上编辑的文件会在下次推送时被替换,因此请将您的更改保存在 git 中。

6

用 Vibes 迭代

Vibe 编程 + Vibe 托管的真正力量在于迭代速度。想改变英雄区域?

Claude Code prompt
"Make the hero headline bigger and add a floating animation to the phone mockup"

然后再次部署:

Terminal
git add . && git commit -m "Bigger hero headline + animation" && git push nameocean main

你的更改在几秒内上线。这个反馈循环 — 描述 → 生成 → 部署 → 看到效果 — 正是让 Vibe 托管如此具有变革性的原因。你不仅编码更快;你在交付更快。

超越静态网站

NameOcean 上的 Vibe 托管不仅限于静态 HTML。该平台开箱即支持全栈应用。

服务器架构

🌍 互联网
HTTPS (443)
→
⚖️ 负载均衡器
SSL 终止
→
⚡ Nginx
Port 80
→
🚀 你的应用
Port 8000

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,从对话中触发
  • 检查服务器状态 — 用自然语言监控你的基础设施

这意味着你可以直接说出来:

Claude Code prompt
"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 分钟
4git push nameocean main约 5 秒
5站点已在 https://wordgridoyna.com 上线即时 ✨

结果:一个完全响应式的深色主题落地页,拥有动画英雄部分、App Store 和 Google Play 下载按钮、功能网格、截图库、玩法指南、行动号召部分以及移动端优化布局。全部由 AI 生成,通过单次推送部署。

Vibe 主机使用技巧

1

从简单开始,快速迭代

不要在一个提示中描述整个应用。从结构开始,然后添加功能。每次迭代距离上线只需一次 git push。

2

选择合适的服务器规格

不要过度配置。Starter 服务器可以处理大多数落地页和小应用。仅在需要时才升级。

3

保持 Git 历史整洁

即使是 vibe 编码,也要保持良好的提交信息。当你需要回滚时,git revert 仍然有效。

4

充分利用预装堆栈

Node、Python、Go、PostgreSQL、Valkey、Docker -- 一应俱全。运行 nameocean-info 查看确切版本,并直接使用现有的环境。

5

使用 Supervisor 管理进程

运行 Node.js 或 Python?始终使用 Supervisor。它会在崩溃时自动重启,在服务器重启时自动启动。

6

信任 AI,指导 Vibe

在做什么上要具体,在怎么做上要灵活。AI 处理实现细节 —— 你专注于愿景。

Vibe 主机宣言

传统主机
"How do you want to configure your infrastructure?"
Vibe 主机
"What do you want to build?"

当想法到上线网站的间隔从小时缩短到分钟时,一切都改变了。副业项目得以启动。MVP 在下午就能接触到客户。复杂基础设施造成的技术债务彻底消失。

最好的部署,就是你不需要去想它。
git push,它就上线了。这就是 vibe。

准备好开始 Vibe 主机了吗?

你的下一个项目距离上线只需一次对话。

1
在 nameocean.net 注册
2
一条命令连接 Claude Code
3
创建服务器 (推荐 Starter 套餐)
4
使用自然语言开始构建
5
使用git push部署
NameOcean 入门指南 →

将您的服务器连接到 Claude Code

$ claude mcp add --transport http nameocean https://nameocean.net/mcp