Pure Static Project Deployment

This document describes how to deploy pure frontend static projects (HTML, CSS, JavaScript) to CloudBase Static Website Hosting, without requiring build steps - just upload and access.

Use Cases

Pure static project deployment is suitable for the following scenarios:

• Pure HTML/CSS/JavaScript projects without compilation or build requirements
• Static documentation sites
• Landing pages, event pages
• Already-built frontend project artifacts

Quick Start

Prerequisites

• A Tencent Cloud account with completed real-name verification
• A CloudBase environment created
• Static website files ready (HTML, CSS, JS, images, etc.)

Deployment Entry

Go to CloudBase Console - Static Website Hosting

Deployment Methods

Method 1: Online Application Deployment

Suitable for medium to large projects, quick batch deployment.

Prepare Code Package

1. Organize Project Files

Ensure your project contains the necessary static files:

my-website/
├── index.html          # Homepage (required)
├── about.html          # Other pages
├── css/
│   ├── style.css
│   └── responsive.css
├── js/
│   ├── main.js
│   └── utils.js
├── images/
│   ├── logo.png
│   └── background.jpg
└── fonts/
    └── custom-font.woff2

2. Upload and Deploy

1. In the Static Website Hosting page, click "New Deployment"

2. Select "Upload Code Package" or "Project Folder"

3. Upload the ZIP file or folder

4. Key Configuration:

   • Project Name: my-website
   • Install Command, Build Command: Leave empty (no build required for pure static projects)
   • Build Output Directory: . (current directory)
   • Deployment Path: / or /my-website
   

5. Click "Deploy"

Note

If your static files are already build artifacts (e.g., files in the dist/ directory), you can upload that directory directly.

Method 2: Console File Upload

Suitable for small projects or quick deployment of a few files.

Upload Single File

Steps:

1. In the Static Website Hosting page, click "Upload File"
2. Select the file to upload (supports HTML, CSS, JS, images, etc.)
3. The file will automatically upload to the current directory
4. After upload completes, access via the default domain

Example:

Upload files:
- index.html
- style.css
- script.js
- logo.png

Access:
https://your-env-id.xxx.tcloudbaseapp.com/

Upload Folder

Steps:

1. In the Static Website Hosting page, click "Upload Folder"
2. Select the entire folder containing static files
3. The system will maintain the original directory structure during upload
4. After upload completes, access is available

Project Structure Example:

my-static-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── banner.jpg

Access Paths:

https://your-env-id.xxx.tcloudbaseapp.com/
https://your-env-id.xxx.tcloudbaseapp.com/css/style.css
https://your-env-id.xxx.tcloudbaseapp.com/js/main.js
https://your-env-id.xxx.tcloudbaseapp.com/images/banner.jpg

Method 3: CLI Command Line Deployment

Suitable for developers and automated deployment scenarios.

Install CloudBase CLI

npm install -g @cloudbase/cli

Login Authorization

cloudbase login

Deployment Commands

Deploy Entire Project:

# Enter project directory
cd my-static-site

# Deploy to root path
cloudbase hosting deploy . -e <环境ID>

# Deploy to sub-path
cloudbase hosting deploy . /my-site -e <环境ID>

Deploy Specific Directory:

# Deploy only dist directory
cloudbase hosting deploy dist/ -e <环境ID>

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

Common Parameters:

# View deployment history
cloudbase hosting list -e <环境ID>

# Delete file
cloudbase hosting delete /old-file.html -e <环境ID>

# View help
cloudbase hosting -h

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

Configuration

Recommended Directory Structure

Standard Static Website Structure:

website/
├── index.html              # Homepage (required)
├── 404.html                # 404 error page (optional)
├── css/                    # Stylesheet files
│   ├── main.css
│   └── normalize.css
├── js/                     # Script files
│   ├── app.js
│   └── vendor.js
├── images/                 # Image resources
│   ├── logo.svg
│   └── banner.jpg
├── fonts/                  # Font files
│   └── custom-font.woff2
└── assets/                 # Other resources
    ├── videos/
    └── documents/

Access Rules

Default Index Document:

• Accessing a directory automatically returns index.html
• Example: /about/ → /about/index.html

Access Examples:

File Path	Access URL
/index.html	https://your-env.xxx.tcloudbaseapp.com/
/about.html	https://your-env.xxx.tcloudbaseapp.com/about.html
/css/style.css	https://your-env.xxx.tcloudbaseapp.com/css/style.css
/blog/index.html	https://your-env.xxx.tcloudbaseapp.com/blog/

Custom 404 Page

Create 404.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Not Found</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 { color: #333; }
        a { color: #0066cc; }
    </style>
</head>
<body>
    <h1>404 - Page Not Found</h1>
    <p>The page you're looking for doesn't exist.</p>
    <a href="/">Return to Homepage</a>
</body>
</html>

Upload to Root Directory:

Upload 404.html to the root directory of static hosting, and the system will automatically return this page when a file is not found.

Deployment Path Configuration

Root Path Deployment:

Deployment Path: /
Access URL: https://your-env-id.xxx.tcloudbaseapp.com/

Sub-path Deployment:

Deployment Path: /my-site
Access URL: https://your-env-id.xxx.tcloudbaseapp.com/my-site/

Note

When deploying to a sub-path, ensure that resource references in HTML use relative paths or absolute paths with the base path.

Practical Scenarios

Scenario 1: Single Page Website

Project Structure:

landing-page/
├── index.html
├── style.css
├── script.js
└── logo.png

Deployment Configuration:

Deployment Path: /
Build Output Directory: .

Access:

https://your-env-id.xxx.tcloudbaseapp.com/

Scenario 2: Multi-page Website

Project Structure:

company-site/
├── index.html
├── about.html
├── products.html
├── contact.html
├── css/
│   └── main.css
├── js/
│   └── app.js
└── images/
    ├── logo.png
    └── banner.jpg

Deployment Configuration:

Deployment Path: /
Build Output Directory: .

Access:

Homepage: https://your-env-id.xxx.tcloudbaseapp.com/
About: https://your-env-id.xxx.tcloudbaseapp.com/about.html
Products: https://your-env-id.xxx.tcloudbaseapp.com/products.html

Scenario 3: Static Blog

Project Structure:

blog/
├── index.html
├── posts/
│   ├── index.html
│   ├── post1.html
│   └── post2.html
├── css/
│   └── blog.css
└── images/
    └── covers/

Deployment Configuration:

Deployment Path: /blog
Build Output Directory: .

Access:

Blog Homepage: https://your-env-id.xxx.tcloudbaseapp.com/blog/
Post List: https://your-env-id.xxx.tcloudbaseapp.com/blog/posts/
Individual Post: https://your-env-id.xxx.tcloudbaseapp.com/blog/posts/post1.html

Best Practices

1. Resource Compression Optimization

Enable Gzip/Brotli:

CloudBase static hosting automatically enables Gzip and Brotli compression, no additional configuration needed.

Minify Files:

Recommend minifying files before uploading:

# CSS minification
npx cssnano input.css output.min.css

# JavaScript minification
npx terser input.js -o output.min.js

# HTML minification
npx html-minifier input.html -o output.min.html

2. CDN Acceleration

Automatic CDN:

CloudBase static hosting automatically uses CDN distribution, with global node acceleration.

Cache Strategy:

• Static resources (images, CSS, JS): Long-term cache (1 year)
• HTML files: Short-term cache (5 minutes)

3. Security Recommendations

HTTPS Access:

All static hosting domains default to HTTPS, ensuring secure access.

Anti-leech Protection:

Can configure anti-leech protection in the console to prevent hotlinking.

Access Control:

Can configure IP blacklist/whitelist access control in security settings.

FAQ

Page is blank after deployment?

Reason

Incorrect file path or missing index.html.

Solution

• Ensure there's an index.html file in the root directory
• Check deployment path configuration
• Open browser DevTools to check for resource loading errors

How to update files?

Solution

Reupload files directly, the new files will overwrite the old ones. Note: CDN may have a few minutes of cache.

Force refresh:

Add random query string: https://your-env-id.xxx.tcloudbaseapp.com/?v=20240101

Can I deploy built projects?

Solution

Yes, if your project is already built artifacts (such as the dist/ directory after React/Vue build), upload the dist/ directory directly.

Configuration:

Build Output Directory: .
(Or specify the actual output directory path)

Next Steps

• Deployment Guide - Detailed deployment configuration guide
• Custom Domain - Bind custom domain
• FAQ - More common issues and solutions