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 Membuat CDN Image Blogger

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

Cara 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
  • jika kalian baru pertama kali menggunakan worker, kalian diminta untuk memasukan sub domain yang akan kalian gunakan, (terserah kalian tapi harus yang masih tersedia)
  • 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.
  • 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 kaki

  • worker cloudflare versi free dibatasi sebanyak 100,000 request harian.
  • system di blogger mendeteksi url gambar pertama yang akan digunakan sebagai thumbnail, jadi jika gambar pertama pada posting kalian custom ada kemungkinan thumbnail post tersebut akan blank (kosong)
Next Post Previous Post
90 Comments
  • Staff Reporter
    Staff Reporter 11 April, 2021

    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

    • Marwanto606
      Marwanto606 11 April, 2021

      sip lah :d

  • Staff Reporter
    Staff Reporter 11 April, 2021

    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?

    • Marwanto606
      Marwanto606 11 April, 2021

      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.

    • Staff Reporter
      Staff Reporter 01 Juni, 2021

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

    • ⠀
      31 Juli, 2021

      minta script nya doang gan, kalau nggak kirimin link nya

    • Staff Reporter
      Staff Reporter 31 Juli, 2021

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

  • Staff Reporter
    Staff Reporter 11 April, 2021

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

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

    • Marwanto606
      Marwanto606 11 April, 2021

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

  • Staff Reporter
    Staff Reporter 11 April, 2021

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

    • Marwanto606
      Marwanto606 11 April, 2021

      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.

    • Staff Reporter
      Staff Reporter 14 April, 2021

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

    • Staff Reporter
      Staff Reporter 14 April, 2021

      mereplace menjadi /category/ atau sejenisnya

    • Marwanto606
      Marwanto606 18 April, 2021

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

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

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

    • Marwanto606
      Marwanto606 15 Mei, 2021

      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.

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

      apa metode yang lain sudah berhasil mas?

    • Marwanto606
      Marwanto606 15 Mei, 2021

      saya pake metode route worker cloudflare, sudah berhasil gan.

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

      maksudnya seperti cara pada pembuatan pwa?

    • Marwanto606
      Marwanto606 15 Mei, 2021

      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

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

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

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

      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

    • Marwanto606
      Marwanto606 15 Mei, 2021

      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.

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

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

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

      kalau di refresh juga tidak terjadi masalah

    • Staff Reporter
      Staff Reporter 15 Mei, 2021

      saya juga sudah beritahukan ke mas Adhy kompiajaib mas

    • Staff Reporter
      Staff Reporter 16 Mei, 2021

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

    • Marwanto606
      Marwanto606 18 Mei, 2021

      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.

    • Staff Reporter
      Staff Reporter 18 Mei, 2021

      kalau sitemap buat sendiri pakai sitemap generator apa bisa mas?

    • Staff Reporter
      Staff Reporter 18 Mei, 2021

      tutorial url labelnya sudah ada mas? saya juga tertarik menerapkannya

    • Staff Reporter
      Staff Reporter 19 Mei, 2021

      kalau pengaturan Custom redirect yang di pengaturan blogger apa bisa di pakai redirect

    • Staff Reporter
      Staff Reporter 20 Mei, 2021

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

    • Staff Reporter
      Staff Reporter 22 Mei, 2021

      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

    • Marwanto606
      Marwanto606 23 Mei, 2021

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

    • Staff Reporter
      Staff Reporter 27 Mei, 2021

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

    • Staff Reporter
      Staff Reporter 27 Mei, 2021

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

  • Staff Reporter
    Staff Reporter 04 Mei, 2021

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

    • Marwanto606
      Marwanto606 10 Mei, 2021

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

  • N M Bayu
    N M Bayu 10 Mei, 2021

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

    • Marwanto606
      Marwanto606 10 Mei, 2021

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

  • Writer
    Writer 14 Mei, 2021

    alhamdulillah work di blog saya mas terimakasih tutorialnya sangat bermanfaat

    • Marwanto606
      Marwanto606 15 Mei, 2021

      sip gan kalo work :d

    • Writer
      Writer 17 Mei, 2021

      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

    • Staff Reporter
      Staff Reporter 17 Mei, 2021

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

    • Writer
      Writer 18 Mei, 2021

      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

    • Staff Reporter
      Staff Reporter 18 Mei, 2021

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

    • Marwanto606
      Marwanto606 18 Mei, 2021

      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.

    • Staff Reporter
      Staff Reporter 18 Mei, 2021

      tapi tidak bisa login pada dashboard blogger

    • Writer
      Writer 18 Mei, 2021

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

  • Writer
    Writer 25 Mei, 2021

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

    • Marwanto606
      Marwanto606 25 Mei, 2021

      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.

    • Writer
      Writer 26 Mei, 2021

      OK mas terimakasih infonya

  • Staff Reporter
    Staff Reporter 07 Juni, 2021

    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

    • Marwanto606
      Marwanto606 08 Juni, 2021

      bisa itu gan,

    • Staff Reporter
      Staff Reporter 08 Juni, 2021

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

    • Marwanto606
      Marwanto606 08 Juni, 2021

      sepertinya bisa gan,

    • Staff Reporter
      Staff Reporter 08 Juni, 2021

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

    • Staff Reporter
      Staff Reporter 09 Juni, 2021

      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?

    • Staff Reporter
      Staff Reporter 11 Juni, 2021

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

    • Staff Reporter
      Staff Reporter 11 Juni, 2021

      kalau itu bisa akan menarik nantinya

  • ⠀
    30 Juli, 2021

    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?

    • Staff Reporter
      Staff Reporter 30 Juli, 2021

      gambarnya masih kesimpan di server google/blogspot mas

  • ⠀
    30 Juli, 2021

    nggak work gan,masih pakai url blogspot

    • ⠀
      30 Juli, 2021

      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

  • ⠀
    30 Juli, 2021

    sekarang error
    400. That’s an error.

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

  • ⠀
    30 Juli, 2021

    sekarang dah bisa gan thaks you mantappp

    • Marwanto606
      Marwanto606 24 Agustus, 2021

      sip lah kalo dah bisa,

  • ⠀
    30 Juli, 2021

    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

  • Staff Reporter
    Staff Reporter 14 Agustus, 2021

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

    • Marwanto606
      Marwanto606 24 Agustus, 2021

      aku belum pernah coba callback gan, jadi kurang tau.

  • Staff Reporter
    Staff Reporter 24 Agustus, 2021

    saya sudah menggunakan rapidapi untuk Api-nya

  • Sajakrerindu
    Sajakrerindu 25 Agustus, 2021

    Punya saya error 400 kenapa ya mas?

    • Marwanto606
      Marwanto606 25 Agustus, 2021

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

    • Sajakrerindu
      Sajakrerindu 28 Agustus, 2021

      Oke mas, coba saya ulangi dari awal

  • İlkay Gürler
    İlkay Gürler 23 Januari, 2022

    I did exactly what you said. I am getting an invalid route error when creating a route? how can i solve it.

    • Marwanto606
      Marwanto606 25 Januari, 2022

      what kind of error, please attach a picture so I can help to solve it.

  • Staff Reporter
    Staff Reporter 04 Februari, 2022

    website loginsk(.)com bisa menggunakan tanpa www. katanya hanya menggunakan redirect dan dns. pemiliknya orang indo.

    • Marwanto606
      Marwanto606 05 Februari, 2022

      apakah di share cara penerapannya gan? sepertinya saya tahu siapa yang punya.

    • Staff Reporter
      Staff Reporter 05 Februari, 2022

      gak mas, yang punya orang ini facebook.com/xilents

      ini diskusi saya dengannya https://web.facebook.com/groups/377251292926061/posts/948871185764066/

  • Staff Reporter
    Staff Reporter 16 Maret, 2022

    itu mas yang terkait kanonikal untuk halaman custom permalink, apakah bisa dengan cara mendapatkan link-nya "window.location.href" lalu merewrite html pakai workers.

  • Staff Reporter
    Staff Reporter 16 Maret, 2022

    saya ada refrensi mas https://nooshu.com/blog/2021/03/02/cloudflare-worker-recipes-for-frontend-performance-testing, https://www.section.io/blog/implementing-service-workers-on-server, https://egghead.io/lessons/cloudflare-render-html-pages-with-cloudflare-workers

  • Staff Reporter
    Staff Reporter 19 Maret, 2022

    sudah tahu caranya mas?

    • Marwanto606
      Marwanto606 20 Maret, 2022

      belum ngulik lagi gan :d

    • Staff Reporter
      Staff Reporter 20 Maret, 2022

      tapi menurut mas, cara seperti itu bisa atau tidak ya? url page yang sudah dicustom itu di ambil link lalu di rewrite ke htmlnya

  • Staff Reporter
    Staff Reporter 21 Maret, 2022

    ini mas ada yang sudah berhasil merewrite canonicalnya dan juga berhasil membuat blogger menjadi subdirektori foreach.id/blog/2020/10/how-to-setup-blog-in-subdirectory-of.html.

    • Marwanto606
      Marwanto606 11 April, 2022

      nah itu tinggal di praktikkan gan.

    • Staff Reporter
      Staff Reporter 12 April, 2022

      sudah mencobanya mas?

  • Staff Reporter
    Staff Reporter 14 April, 2022

    Halo mas, saya sudah menemukan kode yang lebih singkat untuk custom permalink dan rewrite canonicalnya juga. routenya https://www.domain.com/test-page*

    addEventListener("fetch", event => {
    const request = event.request
    event.respondWith(handleRequest(event))
    })
    const OLD_URL = "https://www.domain.com/p/test.html";
    const NEW_URL = "https://www.domain.com/test-page";
    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)
    )
    }
    }
    }
    async function handleRequest(req) {
    const url = 'https://www.domain.com/p/test.html'
    const res = await fetch(url)

    return new HTMLRewriter()
    .on("link", new AttributeRewriter("href"))
    .on("meta", new AttributeRewriter("content"))
    .transform(res)
    }

    • Marwanto606
      Marwanto606 27 Mei, 2022

      itu code rewrite nya masih static kah gan atau untuk semua halaman,

    • Staff Reporter
      Staff Reporter 27 Mei, 2022

      bentar mas saya kirimkan kodenya ke email. kalau saat ini masih halaman statis saja dan label. tapi kalau untuk postingan saya juga masih bingung untuk fetch url dan pengaturan routenya

Add Comment
comment url