Monday, March 6, 2017

Tutorial Cara Membuat CDN sendiri di Dropbox dengan Mudah

CDN merupakan kependekan dari content distribution network, yang apabila diterjemahkan leluasa dalam lingkup Web merupakan tutorial untuk mendistribusikan konten semacam file html, css, javascript, foto serta lain-lain ke dalam suatu  sistem yang terdistribusi. Harapannya merupakan konten tersebut bisa diakses dari segala tempat dengan cepat serta handal.

Nah, dalam berbagai kondisi tertentu, para Blogger terutama yang memakai Blog gratisan semacam Blogspot alias Wordpress, memerlukan tempat untuk menempatkan/upload file css alias javascript-nya jadi bisa diakses dari tak sedikit blog sekaligus.

Hal ini tak menjadi persoalan apabila kamu berlangganan jasa hosting alias sejenisnya. Sedangkan untuk para blogger gratisan, solusi paling mudah untuk persoalan ini merupakan dengan menuliskan kode javascript alias css file alias konten lainnya langsung di template blog. Faktor ini terbukti bisa saja diperbuat, bakal namun bayangkan apabila kamu wajib menulis alias copy paste kode javascript alias css di semua template blog anda. Bakal sangat merepotkan bukan.

Nah, solusi lain yang sangat mudah merupakan dengan menyimpan file konten ke dalam CDN dengan memakai jasa Cloud Storage. Sekarang tersedia begitu tak sedikit penyedia jasa cloud storage. Berbagai diantaranya merupakan, Dropbox, Google Drive, Microsoft Onedrive, Mega serta tetap tak sedikit lagi. Dengan cara teori, semua cloud storage tersebut bisa dikegunaaankan sebagai CDN, bakal namun hari ini kami hanya bakal mengulas DropBox.

Berikut ini merupakan tutorial mudah mekegunaaankan Dropbox sebagai CDN file-file javascript, css alias yang lain.

1. SignUp/daftar dan SignIn ke Dropbox

Langkah pertama merupakan mendaftar ke Dropbox apabila kamu belum mempunyai account Dropbox. Apabila telah, lanjutkan dengan SignIn ke dalam Dropbox anda.

2. Upload file ke dalam Dropbox

Silahkan upload file-file yang kamu butuhkan ke dalam DropBox. Kamu dapat menempatkannya di sembarang tempat, bakal namun saya sarankan ke dalam folder Public saja, sebab file-file tersebut nanti bakal menjadi konsumsi publik.

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





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





3. Share file di DropBox

Supaya file di dalam DropBox dapat diakses oleh umum, maka 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 sejenak, sampai muncul link untuk file tersebut. Link inilah yang anda perlukan untuk share. Silahkan copy/catat link ke notepad atau sejenisnya.

Baca Juga : Cara Install Notepad++ dengan mudah



Ulangi langkah di atas untuk semua file yang diperlukan. Masing - masing file yang sudah ter-share ditandai dengan icon atau tanda 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 dimodif terlebih dulu 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 kamu sudah mempunyai CDN milik kamu sendiri. Selanjutnya silahkan gunakan URL modifikasi tersebut di dalam template blog anda.


<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"/>


Sekian tip/tips hari ini. Semoga yang sedikit ini berguna bagi anda.

3 comments


EmoticonEmoticon