Cloudflare Workers untuk Blogger: Membuat Backend dan API Gratis Tanpa VPS

---

Blogger enak dipakai untuk menulis, mengelola artikel dan membuat halaman sederhana. Masalah mulai terasa ketika kita ingin menambahkan fungsi yang membutuhkan backend: mengambil API pihak ketiga, menyimpan API key dengan aman, mengolah JSON, mengatasi CORS, atau menyediakan endpoint sendiri untuk widget. Di titik inilah Cloudflare Workers mulai berguna.

Cloudflare Workers memungkinkan kita menjalankan JavaScript di jaringan Cloudflare tanpa menyewa VPS. Untuk pengguna Blogger, konsepnya sederhana: Blogger tetap menjadi frontend, sedangkan Worker menjadi backend kecil yang menangani pekerjaan yang tidak ideal dilakukan langsung di browser.

Ini adalah bagian dari seri Cloudflare untuk Blogger.

Kalau kamu belum mengenal DNS, CDN, Pages, Turnstile dan R2, mulai dari panduan pilar Cloudflare gratis untuk Blogger.

Yang akan kita buat Apa itu Cloudflare Workers? Kenapa berguna untuk Blogger? Batas gratis yang perlu diketahui Membuat Worker pertama Membuat API feed Blogger Memanggil Worker dari Blogger Menyimpan API key dengan Secret Mengatur CORS dengan aman Ide penerapan nyata

Apa Itu Cloudflare Workers?

Workers adalah platform serverless milik Cloudflare. Kita menulis fungsi JavaScript, kemudian Cloudflare menjalankannya ketika endpoint Worker menerima request.

Bedanya dengan JavaScript biasa di Blogger adalah lokasi eksekusinya. JavaScript Blogger berjalan di browser pengunjung. Worker berjalan di sisi server Cloudflare.

Blogger

Worker

API / Feed

Karena berjalan di server, Worker dapat melakukan hal yang sebaiknya tidak dilakukan langsung dari halaman Blogger, misalnya membaca secret, memodifikasi response API, menerapkan validasi, atau mengubah data mentah menjadi JSON yang lebih sederhana.

Kenapa Workers Berguna untuk Blogger?

Mengubah data

Feed atau API besar bisa dipotong menjadi data yang benar-benar dibutuhkan widget.

Menyimpan secret

API key tidak perlu ditulis di HTML atau JavaScript publik Blogger.

Menjembatani CORS

Worker dapat menjadi backend resmi untuk sumber data yang memang kamu izinkan.

Membuat API sendiri

Widget Blogger dapat membaca endpoint JSON milikmu sendiri.

Ini bukan berarti setiap widget membutuhkan Worker. Widget lokal seperti dark mode, daftar isi, bookmark atau efek visual tetap lebih baik dibuat dengan JavaScript biasa. Workers dipakai ketika memang ada kebutuhan backend.

Berapa Batas Cloudflare Workers Gratis?

Pada Workers Free, Cloudflare saat ini menyediakan sampai 100.000 request per hari. CPU time standar gratis adalah 10 ms per request, dengan maksimum 50 subrequest per invocation dan memory 128 MB.

100Krequest / hari

10 msCPU / request

50subrequest

128 MBmemory

Untuk endpoint sederhana, proxy feed terbatas, helper API dan widget blog kecil, limit ini cukup lega. Tetapi tetap anggap Workers sebagai resource terbatas. Jangan membuat endpoint yang bisa dipanggil tanpa kontrol untuk pekerjaan berat.

Membuat Cloudflare Worker Pertama

Kamu tidak membutuhkan VPS atau instalasi server. Cara termudah untuk pemula adalah melalui dashboard Cloudflare.

01Buka Workers & PagesMasuk ke akun Cloudflare lalu buka bagian Workers.

02Buat Worker baruPilih opsi membuat aplikasi atau Worker, lalu gunakan template dasar.

03Edit kodeGanti kode contoh dengan kode di bawah.

04DeployCloudflare akan memberi URL workers.dev untuk pengujian.

Untuk tes pertama, gunakan Worker paling sederhana berikut:

export default {
  async fetch(request) {
    return Response.json({
      status: "ok",
      message: "Worker aktif",
      time: new Date().toISOString()
    });
  }
};

Setelah deploy, buka URL Worker. Jika muncul JSON dengan status: "ok", backend pertama kamu sudah berjalan.

Contoh Nyata: Membuat API Feed Blogger yang Lebih Ringan

Sekarang kita buat sesuatu yang benar-benar berguna. Worker berikut mengambil feed JSON Blogger, memilih data penting saja, kemudian mengembalikan hasil yang lebih ringan untuk widget.

Ganti www.domainkamu.com dengan domain Blogger milikmu. Contoh ini sengaja memakai satu sumber feed yang sudah ditentukan, bukan menerima URL bebas dari pengunjung.

const BLOG = "https://www.domainkamu.com";
const ALLOWED_ORIGIN = "https://www.domainkamu.com";

export default {
  async fetch(request) {
    if (request.method !== "GET") {
      return new Response("Method Not Allowed", { status: 405 });
    }

    const url = new URL(request.url);
    const limit = Math.min(
      Math.max(Number(url.searchParams.get("limit")) || 5, 1),
      10
    );

    const feedUrl =
      BLOG + "/feeds/posts/default?alt=json&max-results=" + limit;

    const response = await fetch(feedUrl, {
      headers: { "User-Agent": "CodeFlare-Blogger-Worker/1.0" }
    });

    if (!response.ok) {
      return Response.json(
        { error: "Feed Blogger tidak dapat diambil" },
        { status: 502 }
      );
    }

    const data = await response.json();
    const entries = data.feed?.entry || [];

    const posts = entries.map(post => {
      const alternate = (post.link || []).find(
        link => link.rel === "alternate"
      );

      return {
        title: post.title?.$t || "",
        url: alternate?.href || "",
        published: post.published?.$t || "",
        thumbnail:
          post.media$thumbnail?.url?.replace(/\/s72-c\//, "/s320/") || ""
      };
    });

    return Response.json(
      { count: posts.length, posts },
      {
        headers: {
          "Access-Control-Allow-Origin": ALLOWED_ORIGIN,
          "Cache-Control": "public, max-age=300"
        }
      }
    );
  }
};

Endpoint tersebut bisa dipanggil dengan:

https://nama-worker.workers.dev/?limit=5

Responsnya kurang lebih seperti ini:

{
  "count": 2,
  "posts": [
    {
      "title": "Judul Artikel",
      "url": "https://www.domainkamu.com/...",
      "published": "2026-09-27T...",
      "thumbnail": "https://..."
    }
  ]
}

Keuntungan pendekatan ini adalah widget Blogger tidak perlu memahami struktur feed Blogger yang panjang. Frontend cukup membaca array posts.

Memanggil Worker dari Blogger

Setelah endpoint Worker aktif, kita bisa membuat widget sederhana di Blogger.

Artikel dari Worker

Preview akan muncul setelah URL Worker diisi pada script.

<div id="workerPosts">Memuat artikel...</div>

<script>
(() => {
  const endpoint = "https://nama-worker.workers.dev/?limit=5";
  const root = document.getElementById("workerPosts");

  fetch(endpoint)
    .then(r => {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    })
    .then(data => {
      const posts = data.posts || [];

      if (!posts.length) {
        root.textContent = "Belum ada artikel.";
        return;
      }

      root.innerHTML = posts.map(post =>
        '<a href="' + post.url + '">' +
          '<strong>' + post.title + '</strong>' +
        '</a>'
      ).join("<br>");
    })
    .catch(() => {
      root.textContent = "Data belum dapat dimuat.";
    });
})();
</script>

Contoh frontend dibuat sengaja sederhana supaya alur datanya mudah dipahami. Setelah bekerja, tampilannya bisa dikembangkan menjadi kartu artikel, slider, widget berita, atau daftar posting.

Menyimpan API Key dengan Workers Secret

Salah satu kesalahan umum ketika membuat widget Blogger adalah menaruh API key langsung di JavaScript. Kalau kode berada di browser, siapa pun bisa melihatnya melalui DevTools atau source halaman.

Cloudflare menyediakan Secrets untuk nilai sensitif seperti API key dan auth token. Secret disimpan sebagai binding terenkripsi dan dapat dibaca Worker melalui parameter env.

export default {
  async fetch(request, env) {
    const response = await fetch(
      "https://api.example.com/data",
      {
        headers: {
          "Authorization": "Bearer " + env.API_KEY
        }
      }
    );

    const data = await response.json();

    return Response.json(data, {
      headers: {
        "Access-Control-Allow-Origin":
          "https://www.domainkamu.com"
      }
    });
  }
};

Di dashboard Worker, buka pengaturan Variables and Secrets, tambahkan variable bertipe Secret, misalnya API_KEY, kemudian deploy ulang.

Secret menyembunyikan key dari frontend, tetapi bukan berarti endpoint otomatis aman. Kalau response Worker membocorkan data sensitif, secret tetap tidak membantu. Worker harus hanya mengembalikan data yang memang boleh dilihat pengunjung.

Mengatur CORS: Jangan Langsung Pakai Tanda Bintang

Banyak contoh internet memakai Access-Control-Allow-Origin: *. Itu memang praktis untuk API publik, tetapi kalau endpoint hanya dipakai satu blog, lebih baik batasi origin.

const allowedOrigin = "https://www.domainkamu.com";

return Response.json(data, {
  headers: {
    "Access-Control-Allow-Origin": allowedOrigin,
    "Vary": "Origin"
  }
});

Dengan cara ini browser hanya mengizinkan frontend dari domain yang kamu tentukan untuk membaca response melalui JavaScript lintas origin.

Untuk endpoint yang menerima POST, form, token atau data pribadi, validasi harus lebih ketat lagi. CORS bukan sistem autentikasi; ia hanya salah satu kontrol pada browser.

Ide Penerapan Workers yang Nyata untuk Blogger

Feed converter

Mengubah RSS atau JSON kompleks menjadi struktur ringan untuk widget.

API aggregator

Menggabungkan beberapa sumber data yang memang diizinkan menjadi satu endpoint.

Backend Turnstile

Memverifikasi token anti-bot sebelum form diproses.

Form handler

Menerima data form lalu meneruskannya ke layanan yang kamu gunakan.

Scheduled fetch

Mengambil atau memperbarui data ringan secara terjadwal dengan Cron Triggers.

API adapter

Menyamakan struktur data eksternal supaya frontend Blogger tetap sederhana.

Kapan Tidak Perlu Menggunakan Worker?

Worker bukan kewajiban. Kalau fungsi bisa dilakukan sepenuhnya di browser tanpa secret, tanpa masalah CORS, dan tanpa proses server, JavaScript Blogger biasa biasanya lebih sederhana.

Contohnya dark mode, tombol share, localStorage, daftar isi, kalkulator sederhana, animasi, pencarian elemen halaman, atau widget yang datanya sudah tersedia aman untuk browser.

Pakai JavaScript Blogger

Untuk logika frontend, interaksi halaman dan data publik yang memang bisa diakses browser.

Pakai Worker

Untuk secret, API server-side, transformasi data, validasi dan endpoint backend.

Pola Aman untuk Project Blogger

Untuk project kecil, pola yang mudah dirawat adalah memisahkan tanggung jawab:

FrontendBloggerHTML, CSS, widget dan interaksi pengguna.

BackendCloudflare WorkersFetch, secret, validasi dan transformasi data.

DataAPI / FeedSumber eksternal yang memang diizinkan.

Dengan arsitektur seperti ini, Blogger tidak perlu berubah menjadi platform yang bukan dirancang untuknya. Kita hanya menambahkan backend tipis ketika memang dibutuhkan.

Langkah Berikutnya

Setelah Worker pertama berjalan, jangan langsung membuat aplikasi besar. Coba satu fungsi sederhana seperti API feed di atas, hubungkan ke Blogger, cek error, lalu ukur jumlah request.

Seri berikutnya akan membahas Cloudflare Pages untuk Blogger: bagaimana memakai Pages untuk demo widget, landing page tools, dokumentasi dan aset statis tanpa memindahkan artikel utama dari Blogger.

Dokumentasi resmi Cloudflare Workers Limits Fetch Handler Fetch JSON Workers Secrets CORS Header Proxy