纯静态项目部署

本文档介绍如何部署纯前端静态项目（HTML、CSS、JavaScript）到云开发静态网站托管，无需构建步骤，直接上传即可访问。

适用场景

纯静态项目部署适用于以下场景：

• 纯 HTML/CSS/JavaScript 项目，无需编译构建
• 静态文档站点
• 落地页、活动页面
• 已经构建完成的前端项目产物

快速开始

前置条件

• 拥有腾讯云账号并完成实名认证
• 前往云开发平台，创建云开发环境
• 准备好静态网站文件（HTML、CSS、JS、图片等）

部署入口

前往 云开发控制台 - 静态网站托管

部署方式

方式一：应用在线部署

适合中大型项目，快速批量部署。

准备代码包

1. 整理项目文件

确保项目包含必要的静态文件：

my-website/
├── index.html          # 首页（必需）
├── about.html          # 其他页面
├── css/
│   ├── style.css
│   └── responsive.css
├── js/
│   ├── main.js
│   └── utils.js
├── images/
│   ├── logo.png
│   └── background.jpg
└── fonts/
    └── custom-font.woff2

2. 上传部署

1. 在静态网站托管页面，点击「新建部署」

2. 选择「上传代码包」或者 「项目文件夹」

3. 上传 ZIP 文件 或 文件夹

4. 关键配置：

   • 项目名称：my-website
   • 安装命令、构建命令：留空（纯静态项目无需构建）
   • 构建产物目录：.（当前目录）
   • 部署路径：/ 或 /my-website
   

5. 点击「部署」

提示

如果您的静态文件已经是构建产物（如 dist/ 目录下的文件），直接上传该目录即可。

方式二：控制台上传文件

适合小型项目或少量文件的快速部署。

上传单个文件

步骤：

1. 在静态网站托管页面，点击「上传文件」
2. 选择要上传的文件（支持 HTML、CSS、JS、图片等）
3. 文件会自动上传到当前目录
4. 上传完成后，通过默认域名即可访问

示例：

上传文件：
- index.html
- style.css
- script.js
- logo.png

访问：
https://your-env-id.xxx.tcloudbaseapp.com/

上传文件夹

步骤：

1. 在静态网站托管页面，点击「上传文件夹」
2. 选择包含静态文件的整个文件夹
3. 系统会保持原有目录结构上传
4. 上传完成后即可访问

项目结构示例：

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

访问路径：

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

方式三：CLI 命令行部署

适合开发者和自动化部署场景。

安装 CloudBase CLI

npm install -g @cloudbase/cli

登录授权

cloudbase login

部署命令

部署整个项目：

# 进入项目目录
cd my-static-site

# 部署到根路径
cloudbase hosting deploy . -e <环境ID>

# 部署到子路径
cloudbase hosting deploy . /my-site -e <环境ID>

部署指定目录：

# 仅部署 dist 目录
cloudbase hosting deploy dist/ -e <环境ID>

# 部署指定文件
cloudbase hosting deploy index.html -e <环境ID>

常用参数：

# 查看部署历史
cloudbase hosting list -e <环境ID>

# 删除文件
cloudbase hosting delete /old-file.html -e <环境ID>

# 查看帮助
cloudbase hosting -h

详细使用方法请参考 CLI 静态托管命令。

配置说明

目录结构建议

标准静态网站结构：

website/
├── index.html              # 首页（必需）
├── 404.html                # 404 错误页（可选）
├── css/                    # 样式文件
│   ├── main.css
│   └── normalize.css
├── js/                     # 脚本文件
│   ├── app.js
│   └── vendor.js
├── images/                 # 图片资源
│   ├── logo.svg
│   └── banner.jpg
├── fonts/                  # 字体文件
│   └── custom-font.woff2
└── assets/                 # 其他资源
    ├── videos/
    └── documents/

访问规则

默认索引文档：

• 访问目录时自动返回 index.html
• 例如：/about/ → /about/index.html

访问示例：

文件路径	访问 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/