多页面静态网站批量标准化与云端部署实战

站点运维 · 视频编码兼容 · CloudBase 托管 · 自动化

本文记录了一个包含 16 个独立页面的课程类静态网站从"一批松散 HTML 文件"到"生产环境就绪"的全过程。重点分享视频编码兼容性排查、CSS/JS 批量注入、以及腾讯云 CloudBase 静态托管的部署实战。

一、问题场景

维护多页面静态网站时常见的一类问题：

• 各页面 CSS/JS 写法不一致，改一处要手动同步到所有页面
• 第三方工具导出的 HTML 带 写死的内联宽度（如 style="width:1152px"），移动端布局崩坏
• 新增视频在手机端黑屏（有声有进度条但画面全黑）
• 修了一个页面发现其他页面也有同类问题
• 部署时临时文件混进去被一起上传

二、素材标准化流程

拿到一批新的页面文件后，通过脚本批量执行以下处理：

实现方式：编写脚本遍历所有 HTML 文件，用 DOM 选择器精确定位目标元素进行修改。

三、视频编码兼容性（重点）

部署后发现视频在手机端黑屏——这是最常见的视频兼容性问题。

3.1 问题原因

iPhone 和微信拍摄的视频默认使用 HEVC（H.265）编码。Chrome/Edge 桌面端和大部分 Android 浏览器不支持硬件解码 HEVC：

• 音频正常播放（进度条可见）
• 画面全黑（仅显示黑色背景）

3.2 排查方法

用 ffprobe 检查视频流编码格式：

ffprobe -v error -select_streams v:0 -show_entries stream=codec_name -of csv=p=0 input.mp4

输出含义：

可以写成脚本批量扫描整个视频目录，一键找出所有不兼容的文件。

3.3 批量转码方案

使用 ffmpeg 将 HEVC 转为 H.264：

ffmpeg -i input.mp4 -c:v libx264 -crf 28 -maxrate 800k \
  -bufsize 1600k -preset fast -pix_fmt yuv420p \
  -movflags +faststart -c:a aac -b:a 96k output.mp4

各参数说明：

3.4 视频避坑要点

• 不信任来源格式：iPhone/微信来的视频默认 HEVC，不要假设是 H.264
• 不看文件后缀：.mp4 只是容器，H.264 和 HEVC 都可以用它
• 不用肉眼验证：电脑能播不代表手机能播，必须 ffprobe 检查
• 先本地验证再部署：线上发现问题返工成本高得多

四、CSS/JS 统一注入

页面数量多时最大的风险是修改遗漏。解决方案：将样式和脚本抽取为模板块，通过脚本自动注入到所有页面。

4.1 核心 CSS（长图缩放）

/* 用 CSS 变量覆盖内联宽度，避免 !important 死锁 */
.long-img {
  width: var(--mlw, 100%) !important;
  max-width: none;
}
.card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
}

关键点：用 CSS 变量 --mlw 配合 !important 覆盖内联宽度。直接设 style.width 在遇到已有 !important 时无效。

4.2 核心 JS（外链卡片 + 图片预览）

// 外链卡片：叠加透明锚点，利用浏览器原生行为打开链接
document.querySelectorAll(".card[data-url]").forEach(function(card) {
  var a = document.createElement("a");
  a.href = card.dataset.url;
  a.target = "_blank";
  a.style.cssText = "position:absolute;inset:0;z-index:5";
  card.style.position = "relative";
  card.appendChild(a);
});

// 图片点击预览
document.querySelectorAll("img").forEach(function(img) {
  img.addEventListener("click", function() {
    openPreview(img.src);
  });
});

外链卡片用透明 <a> 叠加而非 window.open()，因为在移动端 WebView 中程序化弹窗经常被拦截。

五、腾讯云 CloudBase 静态托管部署

5.1 部署命令

# 安装 CLI（如尚未安装）
npm install -g @cloudbase/cli

# 登录
tcb login

# 部署单个目录（必须指定 cloudPath，否则文件平铺到根目录导致 404）
tcb hosting deploy ./lesson1 lesson1 -e your-env-id

关键注意事项：

• cloudPath 参数必须指定，否则所有文件平铺到根目录，相对路径引用全部 404
• 每个独立页面应部署为独立目录（如 lesson1、lesson2），互不干扰
• 部署后务必访问线上 URL 做目视验证（后台任务可能中断导致部署不完整）

5.2 部署前检查清单

六、常见问题速查

编码与格式

操作流程

效率

七、总结

多页面静态网站运维的核心在于方法论的可复用性：

• 批量操作：一条指令完成全站标准化
• 自动巡检：修改后自动检查全站一致性
• 经验固化：转码规则、部署参数形成配置模板
• 可重复：新增页面时同一套流水线直接复用

如果你也在维护类似的多页面静态项目（课程站、文档站、活动页集合），可以参考这套工作流的思路。