Tutorial GitHub Page – Hosting Gratis Untuk Website Statis

GitHub adalah sebuah layanan gratis untuk meng-hosting dan men-sharing sumber kode suatu program atau website kita kepada orang lain. Atau bisa kita katakan, GitHub adalah social medianya para programmer dan developer.

Feature lain yang ditawarkan GitHub selain menghosting kode program kita adalah GitHub menyediakan layanan yang disebut GitHub Pages. Disana kita bisa memiliki subdomain gratis dan sumber kode yang telah kita upload sebelumnya bisa dipublikasikan dan dilihat secara online. Dengan catatan, kode program tersebut haruslah kode program dari web statis.

github-pages

Website statis artinya, website yang dibuat hanya berisi HTML, CSS dan Javascript. Disana kita tidak diperkenankan untuk menggunakan PHP dan lain sebagainya.

Membuat GitHub Page

Sebelum Anda dapat menggunakan GitHub Pages, Anda harus memiliki akun GitHub terlebih dulu. Silahkan buka halaman github.com untuk mendaftar.

Pada dasarnya GitHub Page bekerja dengan menampilkan sumber kode HTML, CSS dan Javascript dari repository (tempat penyimpanan) Anda. Dan repository yang akan digunakan dan dibaca oleh GitHub Page memiliki aturan yang sedikit berbeda dalam penamaannya. Untuk lebih mudah memahami bagaimana cara kerjanya, langsung saja Anda klik pada tombol New repository untuk membuat repo baru.

new-repo

Selanjutnya, Anda akan melihat halaman pembuatan repo baru. Nah, untuk dapat membuat GitHub Page, nama repository yang digunakan haruslah memiliki format username.github.io. github.io adalah TLD (Top Level Domain) yang akan kita gunakan sedangkan username merupakan sub domain yang akan diberikan kepada kita untuk menampilkan GitHub Page kita. Silahkan isi nama repo sesuai username yang Anda gunakan dan deskripsinya boleh diisi atau dikosongkan.

new-page

Sekarang Anda sudah memiliki sub domain gratis. Untuk mengecek apakah situs yang baru saja Anda buat sudah live, silahkan buat file baru dengan mengklik tombol plus yang ada disebelah nama repo Anda.

new-file

Kemudian isikan nama file dengan index.html (harus index.html, jika tidak GitHub Pages tidak bisa membacanya) dan masukan sediki baris kode ke dalam file, contoh: <h1>Hello World!</p>. Jangan lupa untuk memberikan nama perubahan yang Anda buat di bagian Commit new file. Title harus diisi sedangkan deskripsinya boleh dikosongkan. Lalu klik tombol Commit new file.

new-index

Setelah selesai, silahkan menuju halaman Anda: username.github.io (ganti username dengan nama username yang Anda gunakan). Jika Anda tidak melihat halaman error seperi dibawah, selamat halaman GitHub Pages Anda telah berhasil dibuat.

github-error-pages

Langkah selanjutnya, Anda bisa mengupload project website Anda. Untuk memudahkan proses ini, kita akan menggunakan tools yang disebut GitHub for Windows.

GitHub For Windows

Bila Anda tidak terbiasa dengan Git dan VCS, Anda akan sangat kesulitan sekali menggunakan GitHub. Karena kebanyakan perintah yang digunakan menggunakan terminal atau Command Prompt.

Namun, hal tersebut bisa diatasi dengan salah satu tools bawaan GitHub agar memudahkan Anda menggunakan GitHub. Tool tersebut bernama GitHub for Windows. Seperti namanya, tools ini hanya bisa digunakan di Windows. Bila Anda menggunakan system operasi Mac, silahkan buka GitHub for Mac.

Langsung saja download aplikasinya disini dan install seperti biasa. Setelah selesai instalasi, Anda akan memiliki dua program yang terinstall, yaitu GitHub dan Git Shell. Program yang akan kita gunakan adalah GitHub. Buka program dan login dengan akun GitHub anda.

github-windows-login

Lalu pada pojok kiri atas klik ikon plus dan kloning repository GiHub Pages Anda untuk mengunduh project ke komputer lokal. Kemudian pilih tempat dimana Anda ingin menyimpannya.

clone-repoSetelah kloning selesai, silahkan copy-kan kode website yang ingin Anda pakai kedalam folder repo yang baru saja dikloning. Dan langkah terakhir adalah melakukan commit files ke master GitHub dan klik sinkronisasi files dengan tombol sync di pojok kanan atas. Selesai. Website anda sekarang sudah live.

NB: Dalam setiap project/repo yang ingin anda jadikan home, harus ada file index.html agar GitHub Pages dapat membacanya.

Kesimpulan

GitHub Pages sangatlah berguna bila anda sedang tidak memiliki biaya untuk menyewa hosting berbayar dan ingin segera mempublikasikan hasil karya website anda secara online. Meskipun domain yang digunakan masihlah berupa subdomain dari GitHub, namun Anda bisa mengatur untuk menggunakan TLD (top level domain) Anda sendiri.

Dan GitHub Pages tidak mendukung database, sehingga website yang dapat ditampilkan hanya berupa web statis. Kekurangan ini menyebabkan kita tidak bisa menjadikan website yang telah dibuat menjadi lebih interaktif seperti menjadikannya untuk blogging, menambahkan form untuk contact, input dll.

Semua kekurangan GitHub dapat kita atasi dengan bantuan pihak ketiga, seperti untuk form kita bisa menggunakan layanan form generator online. Sedangkan untuk blogging, Anda bisa menggunakan bantuan dari Jekyll. Semua kekurangan GitHub Pages, akan kita bahas pada artikel lain. So, stay tuned!