Cara mudah membuat CDN sendiri dengan Dropbox

CDN adalah kependekan dari  content distribution network, yang jika diterjemahkan bebas dalam lingkup Web adalah cara untuk mendistribusikan konten seperti file html, css, javascript, gambar dan lain-lain ke dalam sebuah sistem yang terdistribusi. Harapannya adalah konten tersebut dapat diakses dari segala tempat dengan cepat dan handal.

Nah, dalam beberapa kondisi tertentu, para Blogger khususnya yang menggunakan Blog gratisan seperti Blogspot atau Wordpress, memerlukan tempat untuk menempatkan/upload file css atau javascript-nya sehingga dapat diakses dari banyak blog sekaligus.

Hal ini tidak menjadi masalah jika anda berlangganan jasa hosting atau sejenisnya. Sedangkan untuk para blogger gratisan, solusi paling mudah untuk masalah ini adalah dengan menuliskan kode javascript atau css file atau konten lainnya langsung di template blog. Hal ini memang bisa saja dilakukan, akan tetapi bayangkan jika anda harus menulis atau copy paste kode javascript atau css di semua template blog anda. Akan sangat merepotkan bukan.

Nah, solusi lain yang sangat mudah adalah dengan menyimpan file konten ke dalam CDN dengan menggunakan jasa Cloud Storage. Saat ini terdapat begitu banyak penyedia jasa cloud storage. Beberapa diantaranya adalah, Dropbox, Google Drive, Microsoft Onedrive, Mega dan masih banyak lagi. Secara teori, semua cloud storage tersebut dapat dimanfaatkan sebagai CDN, akan tetapi kali ini kita hanya akan membahas DropBox.

Berikut ini adalah cara mudah memanfaatkan Dropbox sebagai CDN file-file javascript, css atau yang lain. 

1. SignUp/daftar dan SignIn ke Dropbox

Langkah pertama adalah mendaftar ke Dropbox jika anda belum memiliki account Dropbox. Jika sudah, lanjutkan dengan SignIn ke dalam Dropbox anda.

2. Upload file ke dalam Dropbox

Silahkan upload file-file yang anda perlukan ke dalam DropBox. Anda bisa menempatkannya di sembarang tempat, akan tetapi saya sarankan ke dalam folder Public saja, karena file-file tersebut kelak akan menjadi konsumsi publik.

Klik folder Public, setelah itu klik tombol upload di bagian atas.

Tekan tombol Choose File lalu browse dan pilih file-file yang anda perlukan. Tekan Done jika sudah selesai.

3. Share file di DropBox

Agar file-file di dalam DropBox dapat diakses oleh umum, maka file-file tersebut harus di share. Untuk setiap file di dalam dalam folder Public tersebut, silahkan klik/hover di atas file, maka akan muncul tombol Share dibagian kanan. Klik tombol Share tersebut.

Tunggu beberapa saat, sampai muncul link untuk file tersebut. Link inilah yang anda perlukan. Silahkan copy/catat link tersebut ke notepad atau sejenisnya.

Ulangi langkah-langkah di atas untuk semua file yang anda perlukan. Masing-masing file yang sudah ter-share ditandai dengan icon rantai.

4. Ubah URL file

Jika anda langsung menggunakan share URL di atas, maka anda akan kecewa karena URL tersebut tidak akan bisa digunakan di dalam tag <link> , <script> maupun <img>, karena akan selalu di-redirect ke halaman Dropbox anda.

Oleh karena itu, URL tersebut harus dimodifikasi terlebih dahulu agar Dropbox tahu bahwa kita ingin agar file yang kita akses tersebut diperlakukan sebagai source file. Caranya adalah dengan mengganti https://www.dropbox menjadi https://dl.dropbox. Intinya ganti www dengan dl .

Contoh :

URL asal:

https://www.dropbox.com/s/ix59kqster6v7gh/site-6d3d863814.js?dl=0

Diubah menjadi:

https://dl.dropbox.com/s/ix59kqster6v7gh/site-6d3d863814.js?dl=0

Dengan begini maka anda telah memiliki CDN milik anda sendiri. Selanjutnya silahkan gunakan URL modifikasi tersebut di dalam template blog anda. Misalkan seperti contoh di bawah ini.

<link href="https://dl.dropbox.com/s/ub6s43z34ag89v0/site-5662e67bde.css?dl=0" rel="stylesheet"/>
<script src="https://dl.dropbox.com/s/ix59kqster6v7gh/site-6d3d863814.js?dl=0" type="text/javascript"/>

Catatan:

Menggunakan Dropbox sebagai CDN secara teori memang bisa, akan tetapi saya pribadi tidak menyarankan menggunakan cara di atas untuk kebutuhan produksi. Silahkan gunakan cara ini untuk kebutuhan misalkan cadangan/backup atau pengembangan.

Sekian tip/trik kali ini. Semoga yang sedikit ini bermanfaat.