跳到主要内容

快速开始

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

概述​

云开发静态网站托管为您提供便捷的静态资源（HTML、CSS、JavaScript、图片等）托管服务，支持自定义域名、HTTPS、CDN 加速等功能。

前置条件​

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

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

第 1 步：开通静态网站托管​

  1. 进入 云开发CloudBase/静态网站托管
  2. 选择您的环境，点击左侧菜单中的「静态网站托管」
  3. 点击「开通静态网站托管」按钮

开通静态网站托管

提示
  • 首次开通过程大约需要 1-3 分钟
  • 开通后会自动分配一个默认域名，格式为：环境ID.xxx.tcloudbaseapp.com
  • 静态网站托管服务容量等具体请参考 计费说明

第 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. 系统会保持原有的目录结构进行上传
注意事项
  • 单个文件大小限制为 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. 如果看到您上传的页面内容，说明部署成功

下一步​

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