怎么用Github和CloudFlare做一个返回自己图库随机图片的API,并使用jsdelivr进行CDN加速

图片返回其实在很多地方都能使用，比如说你想每天自动换一张壁纸，手动换感觉麻烦。或者有一组或几组的图片需要轮播。或者数据库桶里不想存太多文件，想存到其它地方。这个方案都能一次性完成。我的随机图片API[1]，仅供参考学习。

准备工作

• 一个Github账号：我们会使用Github的仓库实现图片的上传和托管。
• 一个Cloudflare账号：我们需要用Cloudflare的worker来创建服务。

存储图片

我们准备好自己的图片，修改一下后缀，统一一下格式。最好是“数字+webp”。png和jpg后缀也是可以的，webp会小一些，传输速度快一点而已。

然后我们登陆Github，新建一个存储库，随便写一个名字，其他的什么都不需要做，直接创建。创建完成后我们上传新文件。

创建服务

登陆到Cloudflare的官网，登陆之后看左边的Workers，然后直接创建，不需要配置，HelloWorld走起，随便起个名字，把下面的代码按自己的情况修改完粘贴到代码框。

export default {
asyncfetch(request) {
    // --- 您未来需要维护的，只有这一个数字 ---
    // 1. 设置您的图片总数量
    const totalImages = 11; // 您现在有几张就写几张。将来如果增加到了 100 张，就把这个数字改成 100

    // 2. 生成一个从 1 到 totalImages 的随机整数
    // 例如，如果 totalImages 是 4，这里就会随机生成 1, 2, 3, 4 中的一个
    const randomImageId = Math.floor(Math.random() * totalImages) + 1;

    // 3. 动态地构建出随机图片的 URL，你需要修改的是wangzaiwang-hub/picture@main/blog/${randomImageId}.webp，前面的是图片存储的地址，后面的是图片的格式，可以改成png，jpg，看自己的图片格式
    const randomImageUrl = `https://cdn.jsdelivr.net/gh/wangzaiwang-hub/picture@main/blog/${randomImageId}.webp`;

    // 4. 返回一个“重定向”响应，让浏览器跳转到被选中的图片
    returnResponse.redirect(randomImageUrl, 302);
  },
};