Skip to main content
Supported Regions:上海

Quick Start

This document will guide you to quickly get started with CloudBase static website hosting service, managing and deploying your static website files through the console.

Prerequisites​

Before you begin, please ensure that you have:

Note
  • A Tencent Cloud account with real-name verification completed
  • Created a CloudBase environment

Step 1: Go to Static Website Hosting​

Go to CloudBase Console - Static Website Hosting

静态网站托管控制台

Step 2: Prepare Website Files​

Create a simple HTML file as an example, named 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>
Note

You can also prepare other types of files:

  • CSS style files
  • JavaScript script files
  • Images, fonts and other static resources
  • Single Page Application (SPA) build artifacts

Step 3: Upload Files​

Method 1: CloudBase Platform Upload​

  1. On the static website hosting page, click the "Upload Files" button
  2. Select the prepared index.html file
  3. Click "Confirm" to complete the upload
上传文件

Method 2: Batch Upload​

If you have multiple files to upload:

  1. Click the "Upload Folder" button
  2. Select the entire folder containing the website files
  3. The system will maintain the original directory structure during upload

Method 3: CLI File Management​

Use the CloudBase CLI tool to manage and deploy static website files via command line.

Install CLI tool:

npm install -g @cloudbase/cli

Login authorization:

cloudbase login

Deploy files:

# Deploy all files in the current directory
cloudbase hosting deploy . -e <Environment ID>

# Deploy specific file
cloudbase hosting deploy index.html -e <Environment ID>

# Deploy specific folder
cloudbase hosting deploy dist/ -e <Environment ID>

Advantages:

  • ✅ Supports batch upload, faster speed
  • ✅ Automated deployment, CI/CD integration
  • ✅ Provides more management commands (delete, list, etc.)
  • ✅ Suitable for developers and team collaboration

For detailed usage, please refer to CLI Static Hosting Commands.

Notes
  • Single file size limit is 50MB
  • File names cannot contain special characters, it is recommended to use English, numbers, underscores and hyphens
  • Upload will overwrite files with the same name, please operate with caution

Step 4: Access Your Website​

Access Rules​

The access link format for static resources is: Default Domain/File Path

  • Default Domain: Environment ID.xxx.tcloudbaseapp.com
  • Default Index Document: index.html

Access Examples​

Assuming your environment ID is my-env-123.xxx, the access links are as follows:

File PathAccess LinkDescription
/index.htmlhttps://my-env-123.xxx.tcloudbaseapp.comRoot directory default page
/about/index.htmlhttps://my-env-123.xxx.tcloudbaseapp.com/aboutSubdirectory default page
/css/style.csshttps://my-env-123.xxx.tcloudbaseapp.com/css/style.cssCSS file
/images/logo.pnghttps://my-env-123.xxx.tcloudbaseapp.com/images/logo.pngImage file

Verify Deployment​

  1. Copy your default domain
  2. Open the link in your browser
  3. If you see the page content you uploaded, the deployment is successful
验证部署成功

Next Steps​

Congratulations on successfully deploying your first static website! Next, you can: