< 返回博客

使用 GitHub + jsDelivr 免费托管游戏静态资源

#工具 #CDN #GitHub #jsDelivr #术

使用 GitHub + jsDelivr 免费托管游戏静态资源

在开发 H5 小游戏时，经常需要托管一些较大的静态资源文件（如 HDR 贴图、音频、字体等），但游戏平台本身不一定支持所有文件格式的上传。本文介绍一种完全免费、全球可用的方案：GitHub 仓库 + jsDelivr CDN。

方案优势

  • 完全免费，无需绑定信用卡
  • jsDelivr 在全球有 CDN 节点，中国大陆也可正常访问
  • 无需任何额外注册，有 GitHub 账号即可使用
  • 支持任意文件格式（.hdr、.mp3、.ttf 等平台不支持上传的格式）

操作步骤

第一步：创建 GitHub 公开仓库

  1. 登录 github.com
  2. 点右上角 + → New repository
  3. 填写仓库名，例如 game-assets
  4. 可见性必须选 Public（公开），私有仓库无法通过 jsDelivr 访问
  5. 点 Create repository

仓库也可以建在组织（Organization）下，后续拼 URL 时用组织名替换用户名即可。

第二步：上传资源文件

  1. 进入仓库页面
  2. 点 Add file → Upload files
  3. 将文件拖入上传区域，支持建立子目录（直接上传带路径的文件即可）
  4. 滚动到底部点 Commit changes 确认提交

第三步：拼接 jsDelivr 访问链接

URL 格式如下：

https://cdn.jsdelivr.net/gh/<用户名或组织名>/<仓库名>@<分支名>/<文件在仓库中的路径>

实际示例：

  • GitHub 组织名：AstrocadeProjectsAssets
  • 仓库名：AstrocadeJsDelivrGameAssets
  • 文件路径：PotteryMaster/studio_country_hall_1k.hdr
  • 分支：main

拼接结果：

https://cdn.jsdelivr.net/gh/AstrocadeProjectsAssets/AstrocadeJsDelivrGameAssets@main/PotteryMaster/studio_country_hall_1k.hdr

第四步：验证链接

在浏览器地址栏直接打开拼好的 URL，若触发文件下载或正常显示内容，说明链接有效，可以直接在代码中使用。

在代码中使用

以 Three.js 加载 HDR 环境贴图为例：

const HDRI_URL = 'https://cdn.jsdelivr.net/gh/AstrocadeProjectsAssets/AstrocadeJsDelivrGameAssets@main/PotteryMaster/studio_country_hall_1k.hdr';

new THREE.RGBELoader().load(HDRI_URL, texture => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = new THREE.PMREMGenerator(renderer)
    .fromEquirectangular(texture).texture;
  texture.dispose();
});

建议加上加载失败的兜底处理，网络异常时降级使用程序生成的环境贴图，保证游戏正常运行：

new THREE.RGBELoader().load(
  HDRI_URL,
  texture => { /* 成功：应用 HDRI */ },
  undefined,
  ()      => { /* 失败：使用兜底方案 */ }
);

注意事项

  • 文件名和路径大小写敏感，与仓库中完全一致
  • jsDelivr 有缓存，文件更新后 URL 不变时可能需要等待缓存刷新（建议用版本号或 commit hash 替换 @main 强制刷新）
  • 单文件大小建议不超过 50MB，超过可能影响加载速度
  • 仓库必须保持 Public 状态，改为私有后链接立即失效
[ 返回博客列表 ]