Pure Static Project Deployment

This document describes how to deploy pure frontend static projects (HTML, CSS, JavaScript) to CloudBase static website hosting without a build step, allowing direct upload and access.

Applicable Scenarios

Pure static project deployment applies to the following scenarios:

• Pure HTML/CSS/JavaScript projects requiring no compilation or build
• Static Documentation Sites
• Landing pages, campaign pages
• Completed frontend project build artifacts

Quick Start

Prerequisites

• Have a Tencent Cloud account and complete real-name authentication
• Go to CloudBase to create a CloudBase environment
• Prepare static website files (HTML, CSS, JS, images, etc.)

Deployment Portal

Go to CloudBase console - Static Website Hosting

Deployment Methods

Method 1: Application Online Deployment

Suitable for medium to large projects, enabling quick deployment in batches.

Preparing the Code Package

1. Organize project files

Ensure the project contains the necessary static files:

my-website/
├── index.html          # Home page (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. On the Static Website Hosting page, click New Deployment.

2. Select Upload Code Package or Project Folder.

3. Upload ZIP file or folder

4. Key Configuration:

   • Project Name: my-website
   • Install command, build command: Leave blank (No build required for pure static projects)
   • Build output directory: . (current directory)
   • Deployment path: / or /my-website
   

5. Click Deploy.

tip

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

Method 2: Upload Files via Console

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

Upload a Single File

Steps:

1. On the Static Website Hosting page, click "Upload File"
2. Select the files to upload (supports HTML, CSS, JS, images, etc.)
3. Files will be automatically uploaded to the current directory.
4. After the upload is complete, you can access it via the default domain.

Example:

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

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

Upload Folder

Steps:

1. On 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 the upload.
4. After the upload is complete, you can access it.

Project Structure Example:

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

Access path:

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

Deploy Command

Deploy Entire Project:

# Enter Project Directory
cd my-static-site

# Deploy to Root Path
cloudbase hosting deploy . -e <environment ID>

# Deploy to Subpath
cloudbase hosting deploy . /my-site -e <environment ID>

Deploy Specified Directory:

# Only deploy dist directory
cloudbase hosting deploy dist/ -e <environment ID>

# Deploy Specified Files
cloudbase hosting deploy index.html -e <environment ID>

Common Parameters:

# View Deployment History
cloudbase hosting list -e <environment ID>

# Delete files.
cloudbase hosting delete /old-file.html -e <environment ID>

# View Help
cloudbase hosting -h

For detailed usage, see CLI Static Hosting Commands.

Configuration Description

Directory Structure Recommendations

Standard Static Website Structure:

website/
├── index.html              # Home page (Required)
├── 404.html                # 404 error page (Optional)
├── css/                    # Style 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:

• Automatically returns index.html when accessing a directory
• For example: /about/ → /about/index.html

Access example:

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/