Hosting assets web anda dengan GitHub + RawGit

​

​

Di thread ini saya jelaskan seacara singkat cara menghosting web assets di Github. Pengetahuan berdasarkan pengalaman pribadi; jika ada salah atau masalah, harap komentar.


Ketahui apa itu GitHub

GitHub adalah layanan hosting Git repositori berbasis web. Ini menawarkan semua kontrol revisi terdistribusi dan manajemen kode sumber (SCM) fungsi dari Git serta menambahkan fitur sendiri.

Git itu sendiri adalah sistem kontrol revisi terdistribusi yang diciptakan oleh Linus Torvalds untuk digunakan dalam mengembangkan kernel Linux. Git menjadi pilihan utama bagi banyak developer dalam kolaborasi dan issue tracking. Saat ini terdapat jutaan repo dan software gratis berkembang dengan bantuan Git.


Hosting Assets ke GitHub

Dengan GitHub kita bisa hosting web assets mendukung direct/hot-lingking. Assets yang dihost biasa digunakan oleh web designer sebagai komponen dari template. Assets yang di-host bersifat static, seperti: .css, .js, .png, .jpg, .gif, dsb.

Keuntungan:

Gratis - tanpa dikenalan biaya apapun.
Presistent - tidak ada masa habis karena masa hosting berakhir.
Cepat - dengan peforma CDN.
Revisionable - bisa direvisi dan segala perubahan tercatat.​

Prosedur -- bagaimana caranya?

Catatan: Pada tutorial ini saya jelaskan cara hotlinking di GitHub melalui antarmuka web. Di thread ini tidak dijelaskan banyak hal mengenai Git. Bagi mereka yang sudah mengerti dan tidak asing dengan Git, harap lompat ke tahap 4.


1. Kunjungi GitHub, dan lakukan pendaftaran. Jika anda sudah terdaftar, harap login.

(Gambar 1: registasi akun GitHub)​

Masukan username, email valid, dan password. Untuk plan, pilih yang free. Lalu lanjut ke tahap terakhir: konfirmasi email di inbox.


2. Ciptakan ciptakan repo untuk assets. Klik ikon "+", pilih "New repository".

(Gambar 2: Navigasi ke New repository)
​

Masukan masukan nama, misal: assets. Privasi "Publik", dan "Create Repository".

(Gambar 3: Buat repo baru.)​

Tujuan dari Git adalah untuk mengelola proyek, atau satu set file, yang berubah dari waktu ke waktu. Git menyimpan informasi ini dalam struktur data yang disebut repositori. Sebuah repositori git berisi, antara lain, sebagai berikut: Satu set objek commit.


3. Upload asset ke repo. Pertama kali pada repo kosong, tidak muncul tombol "upload" atau "new" apapun. Namun jangan khawatir, yang anda perlu lakukan adalah membuka link berikut: "https://github.com/USERNAME/assets/new/master", ganti USERNAME dengan username anda.

Masukan nama berkas beserta ektensinya. Misal: "style.css" untuk membuat berkas CSS bernama "style".

(Gambar 4: ciptakan berkas baru)​

Klik "Commit new file" untuk menambahkan berkas. Berkas berhasil ditambahkan! Optimal: Anda bisa tambahkan pesan pada commit pada bagian commit new file.


4. Lakukan direct/hot-linking! Lakukan ini:

1. Klik berkas yang akan dihotlinking, misal "style.css", maka anda beralih ke soure code "style.css".

2. Pada browser address bar, anda akan dapatkan link seperti berikut:

Code:

https://github.com/garett/assets/blob/master/style.css

3. Copy link tersebut dan buka RawGit. Masukan url ke input text. Anda akan dapatkan dua url sebagai berikut:



(Gambar 5: Layanan GitRaw.)

4. Salin salah satu link tersebut untuk di-hotlinking. Bila files jarang terjadi perubahan, Saya merekomendasi untuk pilih production url, karena lebih cepat. Url yang didapat seperti berikut:

Code:

https://cdn.rawgit.com/garett/assets/master/style.css

5. Selesai. Anda bisa gunakan link tersebut dimana saja! Bila anda ingin mengirit waktu, anda bisa lakukan ini:

• Dari: "https://github.com/garett/assets/blob/master/style.css"
• Diubah menjadi: "https://cdn.rawgit.com/garett/assets/blob/master/style.css"

6. Revisi atau melakukan perubahan pada file. Mengedit file semudah buka, edit, save. Buka berkas, klik ikon pensil, lakukan perubahan, klik "Commit changes". Optimal, anda dapat masukan informasi dari perubahan di textbox Commit changes.

(Gambar 6: Melakukan perubahan.)​

Perbandingan dari perubahan berkas tersimpan pada objek bernama commit. Berikut contoh pesan commit dari perubahan pada style.css.

(Gambar 7: Sebuah commit log pada git)​

Beberapa hal yang perlu anda ketahui tentang hosting di GitHub: segala file bersifat publik. Semua orang dapat melihat source code pada repo. Disarankan untuk menghindari penyimpanan data sensitif, seperti: password, key, akses token, dsb.


Kesimpulan

GitHub adalah layanan hosting Git berbasis web. Ini memiliki fungsi yang memperbolehkan direct-linking pada files dari repo, guna keperluan assets hosting. Perubahan bisa dikalukan dengan GitHub dikarenakan antarmukanya berbasis web dan tampa perlu installasi software di komputer.


- Garett, Juni 2016.
inna sholati wanusuki wamahyaya wamamati lillahi robbil 'aalamiin

 

Wah bagus nih mas Garett tipsnya. Btw biar otomatis static file di wordpress (Themes) otomatis ke RawGit bagaimana caranya ya mas? Mungkin ada settinganya ketika menggunakan w3 total cache

 

RawGit itu layanan CDN untuk assets di Git. Jika anda pakai WordPress, saya percaya ada plug-in tambahan untuk CDN. Atau langsung pakai MaxCDN sebagai solusi. Lagi pula anda pakai WordPress, bila trafic tidak mendemam, pakai CloudFlare saja cukup.

Bicara mengenai CDN. JQuery, Bootstrap, dan banyak framwork front-end popular lainnya juga menggunakan CDN. Banyak yang pakai linking sih, bisa mencapai ratus juta setiap harinya. Peforma diperlukan!

Edit,
thread ini berkaitan dengan yang satu ini:
https://www.bersosial.com/threads/javascript-blog-di-google-code.35530/

 

Sayangnya kalau menggunakan cloudflare free, sslnya tidak support semua browser jadi pengguna windows xp nggak bisa buka situs

 

Coba lakukan ini:

1. Update browser
2. Update waktu/tanggal

 

Bukan masalah di komputernya, tapi memang berasal dari Cloudflarenya https://www.cloudflare.com/ssl/#browsers Yang free hanya support modern browser

 

Apapun selain Internet Explorer!

 

Mantab juga ini tutorialnya lengkap, ane juga menggunakan jasa ini untuk menympan file .js agar lebih enteng soalnya makek yang lainnya sering down dan eror, selama saya menggunakan layanan GitHub lebih aman dan nyaman.

 

Tapi tetap saja kok mas kalau OS kita Windows xp akan ada error

 

Maaf penasaran, walau pakai misal FF / chrome di XP?
Karena denger2 sih hanya kalau pakai IE versi jadul.