Cara Praktis dan Gratis Hosting File JS, CSS, HTML

Mungkin banyak artikel di luar sana yang membahas "Cara Host File JS dan CSS", tapi pada artikel ini kita tidak menggunakan layanan google drive yang menurut saya caranya cukup ribet, dan saya sudah mencoba tutorial di internet yang banyak tersebut dan akhirnya pusing sendiri dan berakhir percuma.

Yang Diperlukan untuk mengikuti tutorial ini adalah akun GitHub, yang saya yakin semua programer pernah mendengarnya, silahkan kunjungi link berikut ini untuk mendaftar GitHub, dan saya yakin mendaftar github itu sesuatu yang gampang untuk level programer(jika kesusahan cara daftarnya cari di mbah google ya). Langsung saja berikut ini langkah-langkah hosting file JS dan CSS gratis

Gambar dibawah ini adalah beranda saat sudah login, dan yang di kotak merah adalah link yang bertujuan untuk membuat repository baru, bisa juga melewati langkah "Membuat Repository" jika ingin menaruh file di dalam repository yang sudah dibuat/ada.

Silahkan isi nama dan deskripsi(opsional), lalu untuk penjelasan yang berkotak merah pada gambar diatas, kita hanya bisa memilih public jika akun bertipe gratisan, dan untuk yang dibawahnya lagi saya kurang mengerti (sepertinya masalah licensi, cari tau sendiri ya). Saat sudah selesai silahkan klik Create repository.

Jika setelah create repository menemukan halaman seperti gambar diatas, klik saja README (kotak merah)., ini bertujuan untuk membuat file README. Mungkin saja karena kita tidak mencentang initialize this repository with a README pada saat membuat repository tadi (untuk itu silahkan di coba sendiri ya).

Mengupload File JS dan CSS ke GitHub

Setelah semua langkah membuat repository dan  README selesai maka  kita akan diarahkan ke halaman repository tersebut, sekarang saatnya mengupload file JS dan CSS yang sudah kita persiapkan, lihat saja gambar dibawah untuk mempermudah langkah selanjutnya.

Disana terdapat tombol upload file, klik tombol tersebut lalu setelah berpindah halaman klik choose your file untuk memilih file yang ingin di upload. Untuk memilih banyak file, block file yang dinginkan dengan menggunakan CTRL + Click / SHIFT + Click. Setelah semua sudah selesai di upload klik Commit Change.

Menggunakan RawGit

Walaupun sudah di upload tutorial ini masih belum selesai, kita masih belum mendapatkan file JS dan CSS yang bisa dibaca oleh browser sebagai bagian dari website kita dan bisa digunakan, inilah fungsi RawGit yaitu untuk mendapatkan URL JS dan CSS yang bisa dibaca browser (Bagi yang lupa seperti apa "URL CSS dan JS yang bisa dibaca browser" scrool ke paling atas ya).

Pertama kunjungi rawgit.com.

Selanjutnya salin url file pada GitHub dengan klik kanan pada filenya, seperti gambar dibawah ini.

Tempelkan URL yang sudah di copy pada website RawGit, jika koneksi internet bagus akan segera muncul URL baru, yang merupakan URL yang kita inginkan ditutorial ini. Berikut ini URL host JS dan CSS yang bisa digunakan untuk pengembangan website yang diambil dari screenshot diatas.

Link Produksi/Public

https://cdn.rawgit.com/yogojaya/hostfile/fc8f4cf3/jquery.min.js

https://cdn.rawgit.com/yogojaya/hostfile/fc8f4cf3/style.css

Link Pengembang

https://rawgit.com/yogojaya/hostfile/master/jquery.min.js

https://rawgit.com/yogojaya/hostfile/master/style.css

Perbedaan URL yang dikiri dan dikanan bisa dilihat dari judul dan deskripsinya yang berbahasa inggris.

Use this URL in production = URL ini bisa disebarluaskan, tanpa ada trafik data yang dibatasi, kekurangannya jika ada pengeditan di GitHub maka harus mendapatkan URLnya lagi secara manual dengan cara sama saja dengan tutorial diatas.

Use this URL for development = URL ini tidak bisa disebarluaskan karena terdapat batas trafik data, dan hanya digunakan untuk pengembangan saja. Kelebihannya URL pengembangan adalah URL tidak akan berubah dan otomatis memperbaharui datanya jika ada perubahan pada File JS dan CSS akibat pengeditan pada file di GitHub.


Kelebihan menggunakan GitHub dan RawGit adalah memudahkan kita mengedit langsung file JS dan CSS pada GitHub tanpa perlu upload file lagi, jika ingin mendapatkan URL produksinya tinggal salin dan tempel URL GitHub ke Rawgit, sedangkan untuk URL pengembangan kan URLnya sudah tidak berubah dan memperbaharui otomatis.

Walaupun saya sendiri selalu menggunakan URL produksinya bukan URL pengembangan  karena tidak sabar menunggu RawGit memperbarui data, jadi lebih direkomendasikan pakai URL produksinya saja jika tidak sabar menunggu.

Sekarang jika sudah dapat URL JS dan CSS yang diperlukan, kita dapat memasukkan URL yang didapat pada tag head seperti contoh script HTML dibawah ini.

Buat yang nanya?? dimana tutorial hosting htmlnya, maaf ketinggalan, karena saya baru coba saat menulis kesimpulan ini dan ternyata bisa juga, untuk caranya sama persis seperti hosting JS dan CSS. Jika berhasil di host saat dikunjungi maka browser akan menampilkan halaman sesuai format html yang dibuat.bukan script htmlnya.