Cara Membuat CDN Gambar Blog Blogger dengan Domain Sendiri

Cara Membuat CDN Gambar Blog Blogger dengan Domain Sendiri

CDN merupakan kumpulan server global yang ditujukan untuk mendistribusikan konten statis ke server terdekat dari pengunjung situs web.
Cara Membuat CDN Gambar Blog Blogger dengan Domain Sendiri

Content Delivery Network (CDN) merupakan kumpulan server global yang ditujukan untuk mendistribusikan konten statis ke server terdekat dengan lokasi geografis pengujung situs web.

Konten statis tersebut dapat berupa gambar, video, dll yang biasanya tidak akan berubah setelah diunggah ke internet.

Penyebaran konten statis dengan CDN akan mengurangi latensi yang dirasakan oleh pengujung situs web.

Lalu apa gunanya memanfaatkan CDN di Blogger padahal sudah menggunakan server Google? Silakan baca dulu tulisan tentang penggunaan CDN Cloudflare untuk Blogger.

Fokus tutorial kali ini sebenarnya bukan hanya untuk gaya-gayaan, akan tetapi agar blog Blogger Anda juga terkesan lebih profesional karena gambarnya menggunakan domain sendiri.

Kecuali Anda menambahkan fitur seperti PWA (Prograssive Web Apps), yang mengharusan akses gambar dari domain sendiri.

Tutorial ini akan memanfaatkan fitur Workers yang disediakan oleh Cloudflare. Untuk versi gratisnya, Anda bisa melakukan request hingga 100.000 kali perhari (menggunakan zona waktu Greenwich atau GMT).

Karena sistem URL gambar Blogger mengalami perubahan, Anda harus membuat Workers untuk masing-masing sistem URL: https://1.bp.blogspot.com/ dan https://blogger.googleusercontent.com/.

Sebelum melanjutkan tutorial ini, Anda harus memastikan bahwa:

  • Punya blog Blogger.
  • Punya akun Cloudflare.
  • Domain yang digunakan untuk Blogger sudah terintegrasi dengan Cloudflare.
  • Ikon blog Blogger dengan ukuran 512x512 piksel.

Cara Mengganti Domain Gambar Blogger dengan Domain Sendiri

  • Masuk ke akun Cloudflare Anda.
  • Pilih menu Workers.
Cara Membuat CDN Gambar Blog Blogger dengan Domain Sendiri
  • Jika Anda baru pertama kali menggunakan Workers, Anda akan diminta untuk memasukkan subdomain yang akan digunakan.
  • Selanjutnya klik tombol Manage Workers.
  • Selanjutnya klik Create a Worker.
  • Hapus kode sumber yang terdapat pada tab Script.
  • Salin kode sumber berikut ini:
const ORIGINS = {
  "images.zakiy.workers.dev": "1.bp.blogspot.com",
  "www.zakiy.my.id": "1.bp.blogspot.com",
}

async function handleRequest(request) {
  let url = new URL(request.url)
  // Check if incoming hostname is a key in the ORIGINS object
 if (url.hostname in ORIGINS) {
    const target = ORIGINS[url.hostname]
    url.hostname = target
    // If it is, proxy request to that third party origin
    return await fetch(url.toString().replace('/cdn/image', ''), request)
  }

}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})
  • Ganti bagian yang ditandai dengan milik Anda sendiri:
    • images.zakiy.workers.dev dengan subdomain Anda,
    • www.zakiy.my.id dengan domain Anda, dan
    • /cdn/image dengan apa pun yang Anda mau.
  • Klik Save and Deploy.
  • Berikutnya membuat route untuk Workers. Klik Workers > Add Route.
Cara Membuat CDN Gambar Blog Blogger dengan Domain Sendiri
  • Masukan route dengan https://*.zakiy.my.id/cdn/image/* sesuai dengan domain Anda.
  • Berikutnya unggah favicon ke Blogger dengan ukuran 512x512 px, sesuaikan juga ukuran berkas dengan ketentuan Blogger.

Nanti Anda akan bisa mengakses gambar yang aslinya dengan domain:

https://1.bp.blogspot.com/-4f5MXofhnfo/YNGbDy_dQaI/AAAAAAAAidU/474uFHZiL_A2gzhV04BvvW0nNId8ha6oQCK4BGAYYCw/w150/ZAKIY.my.id.png

menjadi:

https://www.zakiy.my.id/cdn/image/-4f5MXofhnfo/YNGbDy_dQaI/AAAAAAAAidU/474uFHZiL_A2gzhV04BvvW0nNId8ha6oQCK4BGAYYCw/w150/ZAKIY.my.id.png

Ketentuan Tautan Gambar Blogger

Untuk mengganti ukuran gambar dengan ukuran asli, ubah tautan gambar menjadi s0.

https://www.zakiy.my.id/cdn/image/-4f5MXofhnfo/YNGbDy_dQaI/AAAAAAAAidU/474uFHZiL_A2gzhV04BvvW0nNId8ha6oQCK4BGAYYCw/s0/ZAKIY.my.id.png

Selain itu, Anda juga bisa menggunakan gambar berformat WebP yang belakangan populer digunakan dengan menambahkan -rw setelah s0.

https://www.zakiy.my.id/cdn/image/-4f5MXofhnfo/YNGbDy_dQaI/AAAAAAAAidU/474uFHZiL_A2gzhV04BvvW0nNId8ha6oQCK4BGAYYCw/s0-rw/ZAKIY.my.id.png

Langkah terakhir yang harus Anda lakukan adalah mengubah tautan gambar Anda pada postingan secara manual. Workers juga bisa mengubahnya secara otomatis, tetapi ini akan menyebabkan kuota request Workers Anda akan lebih cepat habis.

Otomatisasi Ganti Tautan Gambar Blogger

Meski demikian, Anda juga bisa mengubah tautan gambar pada postingan secara otomatis dengan memanfaatkan Workers. Silakan gunakan kode sumber berikut:


const OLD_URL = "1.bp.blogspot.com"
const NEW_URL = "www.zakiy.my.id/cdn/image"

async function handleRequest(req) {
  const res = await fetch(req)
  return rewriter.transform(res)
}

class AttributeRewriter {
  constructor(attributeName) {
    this.attributeName = attributeName
  }
  element(element) {
    const attribute = element.getAttribute(this.attributeName)
    if (attribute) {
      element.setAttribute(
        this.attributeName,
        attribute.replace(OLD_URL, NEW_URL),
      )
    }
  }
}

const rewriter = new HTMLRewriter()
  .on("a", new AttributeRewriter("href"))
  .on("img", new AttributeRewriter("src"))
  .on("link", new AttributeRewriter("href"))

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})
Bagian .on("a", new AttributeRewriter("href")), .on("img", new AttributeRewriter("src")), dan .on("link", new AttributeRewriter("href")) harus disesuaikan dengan tema yang digunakan.

Berikutnya tambahkan Route:

  • Ganti bagian yang ditandai dengan domain Anda.
  • Kemudian rename misalnya image-rewrite
  • Buat Route > Add a route
Cara Membuat CDN Gambar Blog Blogger dengan Domain Sendiri

Jangan lupa ganti Route dengan nama domain Anda, misalnya: *zakiy.my.id/* dan pilih Workers sesuai dengan yang anda tentukan tadi, misalnya pada tutorial ini: image-rewrite.