Cara Membuat CDN Gambar di Blogspot dengan Domain Sendiri

Pernahkah kamu mendengar istilah CDN? Kalau belum, jangan khawatir, kamu tidak sendirian! CDN adalah Content Delivery Network, yang sederhana saja artinya adalah sistem yang membuat konten di situs kamu, seperti gambar, video, atau file lainnya, bisa lebih cepat diakses oleh pengunjung di berbagai lokasi di dunia. Jadi, dengan CDN, pengunjung dari berbagai tempat akan bisa mengakses gambar gambar di blog kamu lebih cepat!

Nah, artikel kali ini akan ngajarin kamu bagaimana cara membuat CDN untuk gambar di Blogspot dengan menggunakan custom domain kamu. Dengan menggunakan teknik ini, gambar gambar di blog kamu bisa lebih cepat diakses, dan pastinya menggunakan domain kamu sendiri, bukan yang punya Google!

Yuk, simak langkah langkahnya!

Persiapan Sebelum Mulai

Sebelum kita mulai, pastikan kamu sudah melakukan beberapa hal berikut:

1. Blog kamu sudah menggunakan custom domain. Kalau belum, kamu bisa baca tutorial cara pasang custom domain di Blogspot.

2. Akun Cloudflare. Cloudflare adalah layanan CDN yang akan membantu kita. Pastikan kamu sudah mendaftarkan domain kamu di Cloudflare.

3. Gambar icon 512×512 px. Gambar ini akan digunakan sebagai referensi atau ikon untuk blog kamu nanti.

Langkah 1: Mengintegrasikan Custom Domain ke Cloudflare

Langkah pertama adalah menghubungkan domain Blogspot kamu dengan Cloudflare. Kalau kamu belum tahu caranya, kamu bisa cek tutorialnya di artikel sebelumnya yang sudah pernah saya buat. Setelah selesai, kamu akan bisa mengakses dashboard Cloudflare untuk domain kamu.

Langkah 2: Menggunakan Cloudflare Workers

Setelah domain kamu terintegrasi dengan Cloudflare, kita akan membuat Cloudflare Workers untuk menangani CDN gambar. Worker ini akan mengalihkan gambar yang diupload ke Blogspot menggunakan domain kamu sendiri.

Berikut langkah-langkah untuk membuat Worker:

1. Login ke Cloudflare.

2. Pilih Workers dari menu Cloudflare Dashboard.

3. Jika kamu baru pertama kali menggunakan Worker, Cloudflare akan meminta kamu untuk membuat subdomain. Pilih subdomain yang tersedia (misalnya, images.domainanda.com).

4. Setelah itu, pilih Plan Free (gratis).

5. Klik Create a Worker.

6. Di halaman editor Worker, hapus seluruh kode yang ada dan ganti dengan kode berikut:

const ORIGINS = {
“images.domainanda.com”: “blogger.googleusercontent.com”,
“www.domainanda.com”: “blogger.googleusercontent.com”,
}

async function handleRequest(request) {
let url = new URL(request.url)
if (url.hostname in ORIGINS) {
const target = ORIGINS[url.hostname]
url.hostname = target
return await fetch(url.toString().replace(‘/image’, ”), request)
}
}

addEventListener(“fetch”, event => {
event.respondWith(handleRequest(event.request))
})

1. Ganti images.domainanda.com dengan subdomain yang kamu buat tadi di Cloudflare (misalnya, images.ccc.workers.dev). Ganti juga www.domainanda.com dengan custom domain kamu.

2. Klik Save and Deploy.

Langkah 3: Menambahkan Route ke Worker

Setelah Worker dibuat, kamu perlu menambahkan route supaya Worker bisa mengakses gambar di domain kamu.

1. Klik Add Route di menu Workers Cloudflare.

2. Masukkan route seperti ini:

https://*.domainanda.com/image/*

Ganti domainanda.com dengan custom domain kamu.

      3. Klik Save.

Langkah 4: Mengganti URL Gambar di Blogspot

Sekarang kamu bisa mulai mengganti URL gambar di Blogspot. Misalnya, gambar yang diupload ke Blogspot biasanya punya URL seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ULBXlUzoGZ-Q4m16VLKl5MoxL9-EsU4B__7Hscg9YU5cl7-ihim95-lUbGzeN0WbE0iePerC-QWB2bUCZxAT6p7CfksA-B3urEEu6LRAq1wEVHY5YTeGWdS5MfPu2vNwbMsoeGWOMUXyawaezJScDrxQfcEGKV_WqI5ZHrc384fq8es7btJBnqzFTiDm/s1024/ccc.my.id.png

Nah, untuk menggunakan domain kamu sendiri, cukup ganti URL tersebut menjadi:

https://www.domainanda.com/image/img/b/R29vZ2xl/AVvXsEj7ULBXlUzoGZ-Q4m16VLKl5MoxL9-EsU4B__7Hscg9YU5cl7-ihim95-lUbGzeN0WbE0iePerC-QWB2bUCZxAT6p7CfksA-B3urEEu6LRAq1wEVHY5YTeGWdS5MfPu2vNwbMsoeGWOMUXyawaezJScDrxQfcEGKV_WqI5ZHrc384fq8es7btJBnqzFTiDm/s1024/ccc.my.id.png

Selain itu, kamu juga bisa mengatur ukuran gambar dengan mengubah bagian s0 sesuai dengan ukuran yang kamu inginkan, misalnya:

https://www.domainanda.com/image/img/b/R29vZ2xl/AVvXsEj7ULBXlUzoGZ-Q4m16VLKl5MoxL9-EsU4B__7Hscg9YU5cl7-ihim95-lUbGzeN0WbE0iePerC-QWB2bUCZxAT6p7CfksA-B3urEEu6LRAq1wEVHY5YTeGWdS5MfPu2vNwbMsoeGWOMUXyawaezJScDrxQfcEGKV_WqI5ZHrc384fq8es7btJBnqzFTiDm/s1024/ccc.my.id.png

https://www.domainanda.com/image/img/b/R29vZ2xl/AVvXsEj7ULBXlUzoGZ-Q4m16VLKl5MoxL9-EsU4B__7Hscg9YU5cl7-ihim95-lUbGzeN0WbE0iePerC-QWB2bUCZxAT6p7CfksA-B3urEEu6LRAq1wEVHY5YTeGWdS5MfPu2vNwbMsoeGWOMUXyawaezJScDrxQfcEGKV_WqI5ZHrc384fq8es7btJBnqzFTiDm/s1024/ccc.my.id.png

https://www.domainanda.com/image/img/b/R29vZ2xl/AVvXsEj7ULBXlUzoGZ-Q4m16VLKl5MoxL9-EsU4B__7Hscg9YU5cl7-ihim95-lUbGzeN0WbE0iePerC-QWB2bUCZxAT6p7CfksA-B3urEEu6LRAq1wEVHY5YTeGWdS5MfPu2vNwbMsoeGWOMUXyawaezJScDrxQfcEGKV_WqI5ZHrc384fq8es7btJBnqzFTiDm/s0-rw/ccc.my.id.png

Catatan

• Cloudflare Worker versi gratis hanya memungkinkan hingga 100.000 request per hari, jadi pastikan traffic blog kamu tidak melebihi batas ini.

• Blogger akan mengenali gambar pertama di setiap post sebagai thumbnail. Jika gambar pertama adalah gambar dengan domain custom, pastikan thumbnail tampil dengan baik di halaman postingan kamu.

Dengan menggunakan cara ini, kamu bisa membuat CDN untuk gambar di Blogspot dengan custom domain, yang pastinya lebih cepat diakses oleh pengunjung blog kamu! Gimana, gampang banget kan?

Semoga tutorial ini membantu dan bisa kamu praktikkan di blog kamu sendiri. Kalau ada yang bingung atau mau ditanyakan, jangan ragu untuk komentar ya!