[Cloudflare-R2][hugo] Cloudflare R2 worker for Hugo Shortcode

前言

最近發現 cloudflare r2 的可玩性，就想說來調整一下過去撰寫 hugo 文章時，關於 image 的嵌入方式。

廢話不多說，直接來吧！

實作

  • hugo shortcode -> cloudflare worker -> r2

Cloudflare Worker

  • 記得 worker 要先去設定變數裡頭做 r2 binding
    • 範例截圖 
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const objectName = url.pathname.substring(1);

    // 從 R2 獲取圖片
    let object = await env.R2_BLOG_IMG.get(objectName);

    if (object === null) {
      return new Response("Image not found", { status: 404 });
    }

    // 設定 Cache-Control
    const headers = new Headers();
    object.writeHttpMetadata(headers);
    headers.set('Cache-Control', 'public, max-age=31536000'); // 快取一年

    return new Response(object.body, {
      headers: headers,
    });
  },
};

Hugo Shortcode

  • 在你的 hugo 專案目錄裡頭創建 layouts/shortcodes/r2image.html
{{ $imageKey := .Get "key" }}
{{ $altText := .Get "alt" }}
<img src="https://your-worker-url.workers.dev/{{ $imageKey }}" alt="{{ $altText }}" loading="lazy">

使用

接下來使用上只要在文章裡頭加上 shortcode 呼叫就可以快速遷入圖片了

{{< r2image key="cyber-pikachu.png" alt="我是誰" >}}

output:

皮卡丘

總結

  • 因為中間有多串 worker ，接下來要進一步優化調整影像大小或是裁切的功能都有機會。
  • 不用再像過去把 image 塞進 hugo repo 裡頭的 static 目錄底下了，而且 cloudflare 的 dashboard 也可以直接上傳圖片或資料夾，整理起來方便一些。
  • 免費的用起來就是香！