跳到主要内容
支持地域：上海

快速开始

本文档将指导您快速上手云开发静态网站托管服务，通过控制台管理和部署您的静态网站文件。

前置条件​

在开始之前，请确保您已经：

说明
  • 拥有腾讯云账号并完成实名认证
  • 创建了云开发环境

第 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 步：上传文件​

方式一：云开发平台上传​

  1. 在静态网站托管页面，点击「上传文件」按钮
  2. 选择准备好的 index.html 文件
  3. 点击「确定」完成上传
上传文件

方式二：批量上传​

如果您有多个文件需要上传：

  1. 点击「上传文件夹」按钮
  2. 选择包含网站文件的整个文件夹
  3. 系统会保持原有的目录结构进行上传

方式三：CLI 管理文件​

使用 CloudBase CLI 工具，通过命令行方式管理和部署静态网站文件。

安装 CLI 工具：

npm install -g @cloudbase/cli

登录授权：

cloudbase login

部署文件：

# 部署当前目录下的所有文件
cloudbase hosting deploy . -e <环境ID>

# 部署指定文件
cloudbase hosting deploy index.html -e <环境ID>

# 部署指定文件夹
cloudbase hosting deploy dist/ -e <环境ID>

优势：

  • ✅ 支持批量上传，速度更快
  • ✅ 可自动化部署，集成 CI/CD
  • ✅ 提供更多管理命令（删除、列表等）
  • ✅ 适合开发者和团队协作

详细使用方法请参考 CLI 静态托管命令。

注意事项
  • 单个文件大小限制为 50MB
  • 文件名不能包含特殊字符，建议使用英文、数字、下划线和连字符
  • 上传会覆盖同名文件，请谨慎操作

第 4 步：访问您的网站​

访问规则​

静态资源的访问链接格式为：默认域名/文件路径

  • 默认域名：环境ID.xxx.tcloudbaseapp.com
  • 默认索引文档：index.html

访问示例​

假设您的环境 ID 为 my-env-123.xxx，则访问链接如下：

文件路径访问链接说明
/index.htmlhttps://my-env-123.xxx.tcloudbaseapp.com根目录默认页面
/about/index.htmlhttps://my-env-123.xxx.tcloudbaseapp.com/about子目录默认页面
/css/style.csshttps://my-env-123.xxx.tcloudbaseapp.com/css/style.cssCSS 文件
/images/logo.pnghttps://my-env-123.xxx.tcloudbaseapp.com/images/logo.png图片 文件

验证部署​

  1. 复制您的默认域名
  2. 在浏览器中打开该链接
  3. 如果看到您上传的页面内容，说明部署成功
验证部署成功

下一步​

恭喜您成功部署了第一个静态网站！接下来您可以：