FaizBlog LogoFaizBlog
Back to all articles
cloudflareworkersurl-shortenertutorial

Membuat URL Shortener dengan Cloudflare Workers + KV

Bikin link pendek custom seperti bit.ly pakai Cloudflare Workers dan KV — gratis, cepat, dan bisa pakai domain sendiri.

AI Insights

Generate a summary and suggested tags for this post.

Bosan pakai bit.ly yang punya limit? Bikin URL shortener sendiri pakai Cloudflare Workers + KV cuma butuh ~50 baris kode dan bisa pakai domain sendiri.

URL Shortener dengan Cloudflare Workers

Cara Kerja

  1. User submit URL panjang → Worker generate slug pendek (misal abc)
  2. Simpan mapping abc → https://url-panjang.com di KV
  3. User buka domainmu.co/abc → Worker baca KV → redirect 301

Setup KV

npx wrangler kv namespace create LINKS
# wrangler.toml
[[kv_namespaces]]
binding = "LINKS"
id = "xxxxxxxxxxxx"

Kode Lengkap (Pakai Hono)

import { Hono } from "hono";

const app = new Hono();

// Redirect
app.get("/:slug", async (c) => {
  const slug = c.req.param("slug");
  const url = await c.env.LINKS.get(slug);
  if (!url) return c.text("Link tidak ditemukan", 404);
  return c.redirect(url, 301);
});

// Bikin link pendek
app.post("/api/shorten", async (c) => {
  const { url, custom } = await c.req.json();
  if (!url) return c.json({ error: "URL wajib diisi" }, 400);

  // Validasi URL
  try { new URL(url); } catch { return c.json({ error: "URL tidak valid" }, 400); }

  const slug = custom || Math.random().toString(36).slice(2, 8);

  const exists = await c.env.LINKS.get(slug);
  if (exists) return c.json({ error: "Slug sudah dipakai" }, 409);

  await c.env.LINKS.put(slug, url);
  return c.json({ slug, short: `https://${c.req.header("host")}/${slug}`, url });
});

export default app;

Test

curl -X POST https://short.mydomain.co/api/shorten \
  -H "Content-Type: application/json" \
  -d '{"url":"https://blog.izz.my.id/posts/apa-itu-cloudflare-workers"}'

Response:

{ "slug": "a3f9k2", "short": "https://short.mydomain.co/a3f9k2", "url": "..." }

Buka https://short.mydomain.co/a3f9k2 → redirect ke URL panjang.

Custom Domain

Di dashboard Cloudflare Workers → Custom Domain → tambah short.domainmu.co. Cloudflare auto-setup SSL.

Fitur Tambahan yang Bisa Ditambah

FiturCara
Analytics klikSimpan counter per slug pakai KV atau D1
Expired linkSimpan expiresAt, cek di handler redirect
Password protectedSimpan hash password, redirect kalau match
QR CodeGenerate pakai library qrcode di response
Preview pageKasih HTML preview sebelum redirect

Kelebihan vs bit.ly

AspekPunya Sendiribit.ly Free
HargaGratis (100rb req/hari)Gratis (limit)
Custom domain✅ Bebas❌ Berbayar
Custom slug✅ Unlimited❌ Terbatas
Data ownership✅ Punya sendiri❌ Milik bit.ly
Kecepatan⚡ Edge 300+ kota⚡ Cukup cepat

Kesimpulan

URL shortener sendiri = gratis, custom domain, data punya sendiri. Pakai Cloudflare Workers + KV, deploy sekali, jalan seumur hidup di free tier untuk usage normal.