Skip to main content
Supported Regions:上海

Quick Start

This document guides you through getting started with CloudBase Static Website Hosting, allowing you to manage and deploy your static website files via the console.

Overview​

CloudBase Static Website Hosting provides you with a convenient hosting service for static resources (HTML, CSS, JavaScript, images, etc.), supporting features such as custom domains, HTTPS, and CDN acceleration.

Prerequisites​

Before you begin, ensure that you have:

  • Have a Tencent Cloud account and complete real-name authentication
  • You have created a Cloud Development environment

Step 1: Enable Static Website Hosting​

  1. Go to CloudBase/Static Website Hosting
  2. Select your environment, click 'Static Website Hosting' in the left menu.
  3. Click the "Enable Static Website Hosting" button

Enable Static Website Hosting

Tip
  • The initial activation process takes approximately 1-3 minutes
  • After enabling, a default domain will be automatically assigned in the format: env-id.xxx.tcloudbaseapp.com
  • For details such as the capacity of the Static Website Hosting service, please refer to Billing Instructions

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>Welcome to CloudBase Static Website Hosting</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>🎉 Congratulations!</h1>
        <p>Your static website has been successfully deployed to the CloudBase platform</p>
        <p>Now you can start building your website</p>
        <a href="https://docs.cloudbase.net/" class="btn" target="_blank">View Documentation</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: Upload via console​

  1. On the static website hosting page, click the "Upload File" button
  2. Select the prepared index.html file
  3. Click [OK] to complete the upload

Upload File

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 preserve the original directory structure during the upload
Precautions
  • The size of a single file is limited to 50MB
  • File names must not contain special characters. It is recommended to use English letters, digits, underscores, and hyphens.
  • Uploading will overwrite files with the same name. Please proceed with caution.

Step 4: Access Your Website​

Access Rules​

The access link format for static resources is: default domain/file path

  • Default Domain: env-id.xxx.tcloudbaseapp.com
  • Default Index Document: index.html

Access Example​

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

File PathAccess LinkDescription
/index.htmlhttps://my-env-123.xxx.tcloudbaseapp.comDefault page in the root directory
/about/index.htmlhttps://my-env-123.xxx.tcloudbaseapp.com/aboutDefault page in the subdirectory
/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 name
  2. Open the link in the browser
  3. If you see the page content you uploaded, the deployment is successful

Next Steps​

Congratulations! You have successfully deployed your first static website. Next, you can: