Cara Membuat CDN Image Blogger Dengan Domain Sendiri

Cara Membuat CDN Image Blogger Dengan Domain Sendiri

Cara Membuat CDN Image Blogger Dengan Domain Sendiri - CDN (content delivery network) merupakan kumpulan server global yang bertujuan untuk dapat mendistribusikan konten statis seperti gambar, video, dll yang di cache oleh server yang terletak di dekat lokasi geografis user sehingga meminimalisir latency yang terjadi. Ide artikel kali ini berasal dari salah satu komentar yang ada pada artikel "Cara Membuat Blog Blogger Support PWA", ia menanyakan tentang "caranya mengganti domain gambar blogger dengan domain sendiri". Karena fitur PWA (Progressive Web Apps) sepertinya tidak dapat mengakses asset yang berada luar doamian terdaftar pada service worker (sw.js) sehingga asset gambar icon harus dapat langsung diakses melalaui domain tersebut. Pertanyaan ini saya rasa cukup menarik, jadi saya buatkan sebuah artikel agar dapat dibaca dan di praktikkan oleh pembaca yang lainnya. Di tutorial ini akan meggunakan bantuan layanan cloudflare yang terpasang di domain kalian sebagai CDN serta route url, silahkan kalian baca cara Mengintegrasikan Custom Domain Blogger Dengan Cloudflare

Periapan:
  • blogger dengan custom domain yang sudah terintegrasi cloudflare.
  • icon blog ukuran 512x512 px

caranya mengganti domain gambar blogger dengan domain sendiri

  • Setelah custom domain kalian selesai terintegrasi dengan cloudflare
  • selanjutnya kalian masuk ke akun cloudflare kalian, kemudian klik menu Workers
menu Workers Cloudflare
  • jika kalian baru pertama kali menggunakan worker, kalian diminta untuk memasukan sub domain yang akan kalian gunakan, (terserah kalian tapi harus yang masih tersedia)
workers cloudflare setup
  • Dibagian kedua kalian diminta untuk memilih Plan, pilih yang Free saja :d Continue with Free
  • Selanjutnya klik Create a Worker
  • lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini

const ORIGINS = {
  "images.kamto.workers.dev": "1.bp.blogspot.com",
  "www.marwanto606.com": "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('/image', ''), request)
  }

}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})
  • ganti images.kamto.workers.dev dengan subdomain worker kalian, dapat kalian temukan pada kolom sent http request sebelah kanan
  • ganti www.marwanto606.com dengan domain kalian, yang akan mengakses gambarnya
  • lalu klik Save and Deploy
  • Sekarang tinggal membuat route untuk worker nya, klik pada menu Workers > klik add route.
workers cloudflare add route
  • Masukkan route https://*.marwanto606.com/image/* sesuaikan dengan domain kalian ya
  • Selanjutnya kalian upload imege icon 512x512 yang sudah kalian siapkan ke blogger bisa melalui buat posting atau halaman dan ambil url gambarnya .

contoh url source gambar akan seperti ini:

https://1.bp.blogspot.com/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s0/marwanto606.png

ubah menggunakan domain yang sudah kalian buat ex:

https://www.marwanto606.com/image/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s0/marwanto606.png

untuk merubah ukuran gambar silahkan gunakan prefix s0 (ukuran asli) dan rubah sesuai ukuran gambar yang ingin kalian buat ex :

https://www.marwanto606.com/image/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s300/marwanto606.png

dan untuk mengakses gambar menjadi format webp tambahkan prefix -rw setelah s0 menjadi ex :

https://www.marwanto606.com/image/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s0-rw/marwanto606.png
Catatan :

worker cloudflare versi free dibatasi sebanyak 100,000 request harian.

74 Comment "Cara Membuat CDN Image Blogger Dengan Domain Sendiri"

  1. saya sudah berhasil mas https://www.digitalvy.com/image/-WHFVwutRpto/XrTT6jCv1sI/AAAAAAAAAFo/fLlqY_Y-7NMDLnFCVOh5eZEL4mU0FlcxQCLcBGAsYHQ/s1600/post-thumb-md-a.jpg

    Terima kasih banyak mas

    BalasHapus
  2. jadi harus manual ya mas untuk merubah url dari 1.bp.blogspot.com ke https://www.digitalvy.com/image

    lalu kalau untuk url gambar yang lain 2.bp.blogspot.com, 3.bp.blogspot.com, 4.bp.blogspot.com. apa tinggal dimasukkan saja pada workernya?

    BalasHapus
    Balasan
    1. iya manual gan rubah url nya. semua gambar yang sudah di upload ke blogger dapat diakses lewat 1.bp.blogspot.com kok gan, jadi tidak perlu di tambahkan.

      Hapus
    2. saya sudah tanyakan kepada admin thehackernews cara otomatis merubahnya, katanya bisa menngubah domainnya secara server side melalui worker dengan javascript

      Hapus
    3. minta script nya doang gan, kalau nggak kirimin link nya

      Hapus
    4. tapi itu akan memakan banyak quota harian cloudflare jika website anda memiliki banyak pengunjung. beritahu email anda saya akan kirim melalui email

      Hapus
  3. kalau dengan cara ini apa bisa mas mengubah domainnya otomatis menggunakan javascript?

    https://bytes.com/topic/javascript/answers/652740-change-domain-keep-path-javascript

    BalasHapus
    Balasan
    1. kalo mau rubah gambar otomatis mungkin sorce codenya lebih seperti ini gan, https://www.kompiajaib.com/2018/10/cara-mudah-menggunakan-cdn-staticaly.html

      Hapus
  4. atau dengan adanya fitur baru dari cloudflare transform rules juga bisa ya mas?

    BalasHapus
    Balasan
    1. sepertinya transform rules itu cuma berlaku di domain yang dipasang cloudflare gan, sedangkan url gambar memang otomatis digenerate dari cdn ex: 1.bp.blogspot.com, jadi cara yang paling simple adalah dengan manual.

      Hapus
    2. apa transform rules bisa mereplace /search/label/ pada url blogger juga mas?

      Hapus
    3. mereplace menjadi /category/ atau sejenisnya

      Hapus
    4. saya baru test transform rules, dan gagal gan. tidak bisa mereplace url nya.

      Hapus
    5. mas kalau tutorial ini bisa membantu gak https://developers.cloudflare.com/rules/transform/use-cases

      Hapus
    6. itu metodenya yang "​Rewrite path of moved section of a website" tapi ntah kenapa function regex_replace saya coba masih tidak bisa di simpan, setingannya.

      Hapus
    7. apa metode yang lain sudah berhasil mas?

      Hapus
    8. saya pake metode route worker cloudflare, sudah berhasil gan.

      Hapus
    9. maksudnya seperti cara pada pembuatan pwa?

      Hapus
    10. langkah awal nya sama gan, dengan membuat sebuah workers dan di route. script workernya saya modifikasi dari fetch html ini https://developers.cloudflare.com/workers/examples/fetch-html

      Hapus
    11. jadi nantinya akan seperti apa mas, apa bisa menghilangkan tahun dan bulan pada url postingan blogger atau seperti apa?

      Hapus
    12. kalau memang bisa seperti itu, nantinya akan pada ramai pengguna blogger yang pada pakai cara tersebut dari pada menggunakan javascript milik Kenny Cruz yang memiliki kelemahan saat merefresh halaman

      Hapus
    13. saya terapkan di url label dan url page gan, ex : https://www.marwanto606.com/category/Informasi
      https://www.marwanto606.com/page/daftar-isi
      tidak saya terapkan di post nya. selain ribet, takut limit workernya karna kebanyakan request.

      Hapus
    14. hebat mas akhirnya ada harapan agar blogger lebih profesioanl tidak kalah sama wordpress

      Hapus
    15. kalau di refresh juga tidak terjadi masalah

      Hapus
    16. saya juga sudah beritahukan ke mas Adhy kompiajaib mas

      Hapus
    17. maksud mas yang ribet pada canonical dan sitemapnya atau ribet pada bagian memodifikasi script workernya?

      Hapus
    18. kalo merewrite url post perlu banyak modifikasi di beberapa bagian lainya, kayak feed,sitemap,canonikal url. untuk saat ini saya masih coba fix bug url untuk breadcrumb page.

      Hapus
    19. kalau sitemap buat sendiri pakai sitemap generator apa bisa mas?

      Hapus
    20. tutorial url labelnya sudah ada mas? saya juga tertarik menerapkannya

      Hapus
    21. kalau pengaturan Custom redirect yang di pengaturan blogger apa bisa di pakai redirect

      Hapus
    22. kalau sitemap xml di buat menggunakan workers apa juga bisa mas seperti membuat sitemap yang kebanyakan blogger lain di buat pada halaman statis?

      Hapus
    23. kalau redirect 301 pada url path /search/label/ dan /p/ menggunakan page rules apa bisa mas? kalau bisa jadi saat mengakses /search/label/ akan redirect otomatis ke /category/.

      caranya mungkin hampir sama saat redirect non www. ke www. menggunakan page rules cloudflare. mungkin seperti ini jadinya https://www.marwanto606.com/search/label/* menjadi https://www.marwanto606.com/category/$1

      Hapus
    24. url category masih merequest ke search/label gan kalo di redirect 301 ke category pasti bakalan error.

      Hapus
    25. label dan halaman statis blog ini sudah terindeks google menjadi /category/ dan /page/

      Hapus
    26. yang mas coba redirect itu menggunakan pengaturan dari blogger atau melalui cloudflare page rules?

      Hapus
  5. mas mungkin dengan cara ini bisa mengatasi masalah dari gambar yang di host blogger yang di blokir ISP.

    BalasHapus
    Balasan
    1. sepertinya bisa gan. kalo yang block dari isp lokal dan cloudflare masih dapat mengakses ke file image tersebut.

      Hapus
  6. saya malah error ada keluar tulisan gini Uncaught SyntaxError: Invalid or unexpected token at line 3 (Code: 10021) padahal semua bener

    BalasHapus
    Balasan
    1. coba cek ulang codenya gan, itu keterangan syntax error kemungkinan typo pada line 3 saat merubah url ORIGINS

      Hapus
  7. alhamdulillah work di blog saya mas terimakasih tutorialnya sangat bermanfaat

    BalasHapus
    Balasan
    1. sip gan kalo work :d

      Hapus
    2. oh ya mas coba deh liat website elcreativeacademy.com itu website pake blogger tapi bisa ada fitur submit post pake tinymce terus ada fitur singin/signup pake google auth kalo menurut saya sih fiturnya dibuat pake firebase tapi cara buatnya saya kurang tau coba deh mas dibahas kayaknya seru tuh

      Hapus
    3. kalau untuk login menggunakan google, mas adhy dari kompiajaib.com sudah ada tutorialnya mas

      Hapus
    4. Beda mas kalo yg mas adhy cuman buat sigin adminnya doang kalo yg elcreativeacademy.com semua orang bisa sigin dan bisa submit post dan submit post nya menggunakan tinymce editor langsung di website nya

      Hapus
    5. itu mungkin sudah built-in pada template Materia X2 Premium buatan elcreativeacademy

      Hapus
    6. keren sih itu blog elcreativeacademy itu gan, saya belum ngulik fitur" yang ada di firebase gan, baru coba fdl nya. karna skill coding js saya masih beginner :d jadi masih sulit buat kearah sana.

      Hapus
    7. tapi tidak bisa login pada dashboard blogger

      Hapus
    8. Justru keren ya disitu gan gaperlu login atau diinvite buat jadi author disitu cukup sign up pake Google Auth terus langsung nulis pake tinyMce

      Hapus
  8. mau tanya mas dalam manifest.json untuk pwa lebih baik pake cdn image blogger atau pake cdn statically ya mas mohon pencerahannya, terimakasih

    BalasHapus
    Balasan
    1. untuk icon itu kayaknya yang penting icon dapat dimuat dan selama tidak error maka tidak masalah gan. saya mengunakan github page untuk cdn nya gan agar lebih pendek url nya.

      Hapus
    2. OK mas terimakasih infonya

      Hapus
  9. dengan script worker ini https://developers.cloudflare.com/workers/examples/rewrite-links bisa rewrite domain gambar blogspot 1.bp.blogspot.com ke domain custom, tanpa script javascript atau manual mas

    BalasHapus
    Balasan
    1. apa cara tersebut juga bisa me-rewrite url pada file sitemap yang baru ya mas?

      Hapus
    2. sepertinya bisa gan,

      Hapus
    3. lalu bagaimana cara menambahkan multiple domain pada script worker rewrite link untuk domain gambar blogger yang lainnya mas?

      Hapus
    4. sepertinya kalau ingin merewrite domain gambar itu cukup banyak request pada workernya ya mas, mungkin ini kurang cocok untuk blog yang banyak pengunjungnya. apa ini juga akan banyak request pada sitemap yang memiliki banyak url kalau sudah bisa nantinya mas? atau request hanya berjalan ketika ada bot google atau bot lainnya men-crawler sitemapnya saja?

      Hapus
    5. Halo mas, kalau script worker di atas apa juga bisa di pakai untuk mengakses domain non www blogger?

      Hapus
    6. kalau itu bisa akan menarik nantinya

      Hapus
  10. misal nih mas kalau domain kita mati atau nggak di perpanjang berati gambar pada hilang semua? seperti wp kan?
    dan menyimpan gambar nya di blogspot atai via cloudflare?

    BalasHapus
    Balasan
    1. gambarnya masih kesimpan di server google/blogspot mas

      Hapus
  11. nggak work gan,masih pakai url blogspot

    BalasHapus
    Balasan
    1. error gan
      Error 1101 Ray ID: ********* • 2021-07-30 08:52:35 UTC
      Worker threw exception
      What happened?
      You've requested a page on a website (www.farih.web.id) that is on the Cloudflare network. An unknown error occurred while rendering the page.

      What can I do?
      If you are the owner of this website:
      you should login to Cloudflare and check the error logs fo

      Hapus
  12. sekarang error
    400. That’s an error.

    Your client has issued a malformed or illegal request. That’s all we know.

    BalasHapus
  13. sekarang dah bisa gan thaks you mantappp

    BalasHapus
  14. o iya gan cara redirect
    sebelum nya : https://1.bp.blogspot.com/-LpL4qlDSZKk/YILiIc7ugLI/AAAAAAAABCI/T50HgzQ_qaYZC0guPfhz7XGighKx7t7nQCLcBGAsYHQ/s630/images%2B%252812%2529.jpeg
    menjadi : https://farih.web.id/cdn/-LpL4qlDSZKk/YILiIc7ugLI/AAAAAAAABCI/T50HgzQ_qaYZC0guPfhz7XGighKx7t7nQCLcBGAsYHQ/s630/images%2B%252812%2529.jpeg

    kalau pakai script dari kompi jadi :
    https://farih.web.id/cdn/1.bp.blogspot.com/-LpL4qlDSZKk/YILiIc7ugLI/AAAAAAAABCI/T50HgzQ_qaYZC0guPfhz7XGighKx7t7nQCLcBGAsYHQ/s630/images%2B%252812%2529.jpeg

    BalasHapus
  15. Halo mau tanya mas, apa bisa dengan workers menambahkan sebuah callback pada sebuah api?

    BalasHapus
    Balasan
    1. aku belum pernah coba callback gan, jadi kurang tau.

      Hapus
  16. saya sudah menggunakan rapidapi untuk Api-nya

    BalasHapus
  17. Punya saya error 400 kenapa ya mas?

    BalasHapus
    Balasan
    1. error 400 itu bad request gan, kemungkinan route nya. silahkan di cek lagi.

      Hapus
    2. Oke mas, coba saya ulangi dari awal

      Hapus

Dilarang berkomentar spam.
Request artikel atau ajukan pertanyaan Disqus in.