快速开始
本文档将指导您快速上手云开发静态网站托管服务。根据项目类型，静态托管提供两种使用方式：
| 使用方式 | 适用场景 | 部署特点 |
|---|---|---|
| 📁 文件管理 | 已构建好的静态文件（HTML/CSS/JS）、图片/字体等静态资源、第三方工具构建产物 | 直接上传文件，零构建流程 |
| 🚀 应用部署 | 有安装依赖 + 构建流程的前端项目（React / Vue / Next.js / Nuxt / Vite 等） | 自动完成安装依赖 → 构建 → 上传产物 → 绑定路由 |
💡 如何选择？ 如果您只需要托管现成的静态文件，选择「文件管理」；如果您有前端源码需要构建后部署，选择「应用部署」。
前置条件
在开始之前，请确保您已经：
说明
- 拥有腾讯云账号并完成实名认证
- 前往 云开发平台 创建云开发环境
方式一：文件管理（静态资源托管）
适合已构建好的静态文件或静态资源托管场景。
第 1 步：前往静态网站托管
第 2 步：准备网站文件
创建一个简单的 HTML 文件作为示例，命名为 index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎使用云开发静态网站托管</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container {
max-width: 600px;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
p {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 30px;
}
.btn {
display: inline-block;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid white;
border-radius: 25px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.btn:hover {
background: white;
color: #667eea;
}
</style>
</head>
<body>
<div class="container">
<h1>🎉 恭喜！</h1>
<p>您的静态网站已成功部署到云开发平台</p>
<p>现在您可以开始构建您的网站了</p>
<a href="https://docs.cloudbase.net/" class="btn" target="_blank">查看文档</a>
</div>
</body>
</html>
说明
您也可以准备其他类型的文件：CSS 样式文件、JavaScript 脚本文件、图片、字体等静态资源，或单页应用（SPA）的构建产物。
第 3 步：上传文件
方式 A：控制台上传
- 在静态网站托管页面，点击「上传文件」或「上传文件夹」按钮
- 选择准备 好的
index.html文件或包含网站文件的整个文件夹 - 点击「确定」完成上传（上传文件夹时系统会保持原有的目录结构）
方式 B：CLI 命令上传
使用 CloudBase CLI 通过命令行管理和部署静态网站文件，适合批量上传、自动化部署和 CI/CD 集成。
# 全局安装并登录（详见 CLI 安装文档）
npm i -g @cloudbase/cli
tcb login
# 部署当前目录下的所有文件
tcb hosting deploy . -e <环境ID>
# 部署指定文件或文件夹
tcb hosting deploy index.html -e <环境ID>
tcb hosting deploy dist/ -e <环境ID>
更多命令（
list/delete/detail等）详见 CLI 静态托管命令 → 和 CLI 安装文档 →
注意事项
- 单个文件大小限制为 50MB
- 文件名不能包含特殊字符，建议使用英文、数字、下划线和连字符
- 上传会覆盖同名文件，请谨慎操作
方式二：应用部署（前端项目构建部署）
适合有安装依赖 + 构建流程的前端项目（React / Vue / Next.js / Nuxt / Vite / Angular 等），平台会自动完成 安装依赖 → 构建 → 上传产物 → 绑定路由 全流程。
第 1 步：选择部署入口
进入 云开发控制台 - 静态网站托管，根据项目来源选择以下任一方式：
- 上传代码包 / 文件夹：上传本地前端项目源码（ZIP 或文件夹）
- 从官方模板创建：基于 React / Vue / Next.js / Nuxt 模板快速创建新项目
- Git 仓库部署：连接 GitHub / GitLab / Gitee / 工蜂等仓库，代码更新自动触发部署
- CLI 命令部署：使用 CloudBase CLI 在本地或 CI/CD 流水线中一键部署
第 2 步：配置构建参数
在部署配置页面：
- 项目框架：从下拉列表中选择（支持 React、Vue.js、Angular、Next.js、Nuxt.js、VitePress、Astro、Hugo、Hexo 等 10 种主流框架），平台将自动填充对应的安装命令、构建命令和目标目录
- Node.js 版本：选择构建环境版本（16 / 18 / 20 / 22 / 24）
- 构建产物目录：如
./dist、./build、./out等 - 部署路径：默认
/，多项目场景建议使用子路径如/app1
详细配置说明请参考 部署指南。
第 3 步：使用 CLI 一键部署（可选）
如果您希望在本地或 CI/CD 中使用命令行部署，可使用 tcb app deploy：
# 全局安装并登录
npm i -g @cloudbase/cli
tcb login
# 在项目根目录一键部署（自动完成安装、构建、上传、绑定路由）
tcb app deploy --framework vite -e <环境ID>
# 裸命令：交互式引导部署
tcb
更多参数和
cloudbaserc.json零参数部署配置，详见 CLI 应用部署命令 →
第 4 步：访问您的网站
两种部署方式完成后，均可通过默认域名访问。
访问规则
静态资源的访问链接格式为：默认域名/文件路径
- 默认域名：
环境ID.xxx.tcloudbaseapp.com - 默认索引文档：
index.html
访问示例
假设您的环境 ID 为 my-env-123.xxx，则访问链接如下：
| 文件路径 | 访问链接 | 说明 |
|---|---|---|
/index.html | https://my-env-123.xxx.tcloudbaseapp.com | 根目录默认页面 |
/about/index.html | https://my-env-123.xxx.tcloudbaseapp.com/about | 子目录默认页面 |
/css/style.css | https://my-env-123.xxx.tcloudbaseapp.com/css/style.css | CSS 文件 |
/images/logo.png | https://my-env-123.xxx.tcloudbaseapp.com/images/logo.png | 图片文件 |
验证部署
- 复制您的默认域名
- 在浏览器中打开该链接
- 如果看到您上传的页面内容，说明部署成功
下一步
恭喜您成功部署了第一个静态网站！接下来您可以：