Dalam pengembangan web, menggunakan CDN (Content Delivery Network) untuk file statis seperti CSS, JavaScript, gambar, atau font bisa meningkatkan kecepatan dan efisiensi loading website. Tapi bagaimana jika kamu tidak memiliki server CDN sendiri atau ingin solusi gratis tanpa ribet? Tenang, kamu bisa memanfaatkan GitHub dan layanan jsDelivr untuk menyajikan file statis kamu secara global.
Apa itu jsDelivr?
jsDelivr adalah layanan CDN global yang bisa menayangkan file dari berbagai sumber seperti npm, GitHub, dan WordPress. Layanan ini sepenuhnya gratis, tidak memiliki batasan bandwidth, dan didukung oleh jaringan server global (CDN) yang cepat dan stabil. Cocok sekali untuk developer, blogger, atau siapa pun yang ingin menyimpan dan menyajikan file statis tanpa biaya.
Mengapa Memakai GitHub + jsDelivr?
- Gratis 100% tanpa langganan atau biaya tersembunyi
- Mudah digunakan — cukup upload ke GitHub dan ubah link-nya
- Cepat dan aman, didukung oleh CDN Cloudflare dan lainnya
- Mendukung semua file statis — JS, CSS, gambar, font, dan lainnya
Langkah-langkah Membuat Link CDN dari GitHub
-
Siapkan file kamu dan upload ke GitHub
Buat repositori publik di akun GitHub kamu. Upload file yang ingin dijadikan CDN, misalnyamain.cssatauapp.js. File bisa ditempatkan di folder apa pun.
-
Salin URL file GitHub
Setelah diupload, klik file tersebut dan salin link-nya. Biasanya bentuknya seperti ini:
https://github.com/username/nama-repo/blob/main/path/to/file.js
-
Ubah menjadi link CDN jsDelivr
Format dasar URL jsDelivr untuk GitHub adalah:
https://cdn.jsdelivr.net/gh/username/nama-repo@branch/path/to/file
Contoh:https://cdn.jsdelivr.net/gh/rahmatdev/cdn-assets@main/js/script.js
-
Gunakan CDN di website atau blog
Sekarang kamu bisa langsung menggunakan file itu di HTML kamu seperti ini:<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rahmatdev/cdn-assets@main/css/main.css"> <script src="https://cdn.jsdelivr.net/gh/rahmatdev/cdn-assets@main/js/script.js"></script>
Contoh Kasus Sederhana
Misalkan kamu membuat halaman landing sederhana dan ingin menggunakan file CSS dari GitHub. Kamu hanya perlu upload file CSS ke repositori, ambil link CDN-nya, dan gunakan seperti ini:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/namamu/repo@main/css/style.css">
</head>
<body>
<h1>Selamat datang di websitemu!</h1>
</body>
</html>
Tips Tambahan
- Gunakan branch
mainataureleaseuntuk file stabil - Tambahkan tag versi di GitHub jika ingin link CDN tetap sama walau repo berubah
- Selalu pastikan repositori kamu public, karena repo private tidak bisa digunakan untuk CDN
- Untuk refresh cache, tambahkan query seperti
?v=2di akhir URL
Kesimpulan
Menggunakan GitHub dan jsDelivr sebagai CDN adalah solusi cerdas dan hemat biaya untuk siapa pun yang membuat website atau aplikasi web. Dengan memanfaatkan repositori publik, kamu bisa menyajikan file statis seperti profesional tanpa harus sewa server atau bayar CDN premium.
Semoga tutorial ini membantu kamu membuat website lebih cepat, efisien, dan profesional. Jangan lupa bagikan artikel ini ke teman-teman kamu jika bermanfaat!
