Membuat Website Statis Gratis dengan Memanfaatkan Github Pages

Mungkin banyak diantara teman-teman kita yang bingung bagaimana cara membuat website. Lebih jauh lagi bahkan tidak tau berapa biaya yang harus disiapkan untuk membuat website. Kalo Kamu adalah orang yang sering dimintai dibuatkan website, tapi tanpa budget atau budget yang sangat terbatas, Kamu bisa memanfaatkan beberapa strategi berikut untuk memangkas biaya produksi. Strategi yang akan saya jelaskan disini mudah-mudahan dapat membantu para web developer yang dapet klien dengan budget terbatas, atau teman-teman non-programmer yang pingin punya website tapi ga punya budget buat membayar jasa web developer dan biaya produksi lainnya.

Dalam tulisan ini saya membatasi pembahasan hanya dalam cakupan pengembangan website statis. Statis disini maksudnya konten tidak dapat diupdate secara realtime melalui halaman panel admin seperti halnya pada penggunaan Content Management System (CMS). Selain itu website statis bersifat satu arah, yakni menginformasikan sesuatu ke pengunjung, tidak memiliki fitur untuk dapat menerima feedback dari pengunjung kecuali dengan menggunakan fasilitas dari pihak ketiga. Untuk itu diperlukan setidaknya skill atau pemahaman terhadap HTML untuk dapat mengetahui bagaimana dan di bagian mana harus memasang dan memperbaharui konten di dalam file HTML. Meski demikian, model pembangunan website seperti ini masih banyak dijumpai dan masih terbilang dapat diterima karena ada beberapa kebutuhan website yang tidak memerlukan fitur managemen konten dinamis. Contohnya seperti website landing page, profil perusahaan, atau halaman promosi yang tidak memiliki intensitas update konten yang tinggi.

Sederhananya, ada minimal 4 langkah inti yang harus disiapkan untuk membangun sebuah website, diantaranya:

• menyiapkan template
• menyiapkan konten
• mengunggah website ke hosting
• mengatur domain

Ada banyak sub-langkah pada poin di atas, tapi saya akan menyederhakan pembahasan dengan target "bagaimana cara membuat website gratis". Saya akan tetap jelaskan apa saja kekurangan oleh sebab kegratisan ini. Meski demikian hasil akhir dari website gratis ini masih dapat diterima sebagai sebuah website yang potensial (dapat menghasilkan sesuatu sesuai tujuan pembangunan website) dan berfungsi sebagaimana website pada umumnya.

Untuk dapat menerapkan teknik di tulisan ini paling tidak Kamu perlu mengetahui:

• cara menggunakan browser dan internet
• cara menulis HTML atau setidaknya mengerti isi HTML

Kalo belum tahu tentang HTML, ada baiknya Kamu kenalan dulu dengan HTML di tutorial Belajar HTML dasar.

1. Menyiapkan Template Website

Kamu tau berapa biaya yang harus disiapkan untuk membuat sebuah halaman template HTML custom? Atau paling tidak berapa banyak langkah-langkah yang harus ditempuh untuk membuat halaman template HTML? Minimalnya ada 2 langkah utama yang harus dilakukan untuk membuat template halaman website: desain web dan templating. Tahap desain web yakni menuangkan gagasan template ke dalam bentuk grafik. Sebagian kalangan bahkan memecah tahapan ini menjadi dua, yakni pembuatan mockup layout dan desain grafis web. Di tahapan ini kita harus membayar jasa web desainer untuk menuangkan ide dan gagasan dari desain halaman web yang kita inginkan sehingga berwujud nyata dan dapat diamati. Setelah desain selesai dibuat, desain ini masih harus dituangkan ke dalam bentuk HTML sehingga nantinya dapat dipasang sebagai halaman web. Saya sebut ini tahapan templating. Sekali lagi kita harus menyiapkan biaya untuk jasa pembuatan template web ini. Besaran harga jasa ini biasanya tergantung dari banyaknya halaman yang dibuat dan tingkat kompleksitas halaman. Sisanya tergantung kesepakatan kedua belah pihak.

Kalo Kamu punya skill untuk melakukan dua hal ini sendiri, berarti Kamu ga perlu mengeluarkan biaya untuk membayar jasa. And, wow, you are a web designer! Tapi gimana kalo belum punya skill ini? Masa harus belajar dulu? Lama doong..

Belajar ya belajarlah. Tapi khusus untuk memenuhi target tulisan ini, saran saya adalah gunakan template html gratis yang bertebaran di internet. Itu sudah lebih dari cukup. Banyak template-template gratis yang bisa kita manfaatkan. Carilah di mesin pencari dengan kata kunci seperti "free html template" atau "free bootstrap template". Pilih-pilih template yang cocok, unduh dan Taraaaa...! Kamu sudah punya template buat website Kamu! :D

Mungkin beberapa waktu selanjutnya Kamu akan mulai menyadari bahwa template-template gratis itu tidak banyak yang desainnya elegan dan berkualitas professional. Mungkin ini salahsatu kekurangannya. Tapi kan yang penting Kamu sudah dapat template dan itu sudah cukup untuk membuat sebuah website. Tapi kalo Kamu atau klien Kamu rada ngotot pengen desain template yang lebih bagus, saran saya ya seperti di atas tadi, hire jasa pembuatan desain template. Itu adalah best deal karena Kamu bisa minta desain yang benar-benar custom dan sesuai kebutuhan. Kalo budgetnya masih terbatas juga, kamu bisa coba cari template berbayar yang dijual di internet. Carilah di mesin pencari dengan kata kunci "premium html template". Maka Kamu akan menemukan banyak marketplace yang menjual template HTML dengan kualitas yang jauh lebih bagus dibanding yang free.

Tapi kalo ga punya dana juga, ya sudahlah, unduh saja template yang free. Jangan terlalu perfeksionis :P

2. Mengisi Konten

Biasanya template yang udah kita dapet tadi sudah ada kontennya, tapi masih konten buat contoh saja. Istilahnya dummy content. Tentunya Kamu ingin kontennya diisi dengan konten yang sesuai dengan keperluan Kamu kan. Maka dari itu silakan ganti konten contoh tersebut dengan kontenmu. Disini Kamu harus menuliskan konten yang informatif, mudah dicerna, tidak berbelit-belit, langsung pada tema websitenya. Umpamanya Kamu mau membuat website tentang bisnis Cilok Goreng punyamu atau temanmu. Maka jelaskanlah semua hal tentang usaha tersebut. Langkah paling sederhana untuk menulis deskripsi adalah dengan menggunakan konsep 5W1H, What, Why, When, Who, Where, How. Syukurlah kita pernah belajar mengarang dulu waktu sekolah. Tambahkan juga informasi lain yang sekiranya masih relevan dan memperkaya website kita. Biasanya di template-template yang udah kita unduh ada bagian-bagian tertentu yang membantu kita menggali ide konten apa saja yang dapat dimasukkan. Umumnya seperti peta lokasi, galeri foto unit usaha, dan testimonial.

Nah, untuk bisa mengedit konten pada template, Kamu harus paham HTML, karena template website ditulis menggunakan format HTML. Seperti saran saya di awal tulisan, Kalo belum tau apa itu HTML, Kamu bisa belajar dulu memahami aturan penulisan serta fungsi-fungsi tag HTML. HTML mudah kok. 1-2 hari belajar juga sudah bisa paham. Saya sangat sarankan untuk mempelajari HTML karena itu akan banyak bermanfaat kedepannya. Kamu bisa mulai dengan mengikuti seri tutorial HTML di CodePolitan, Belajar HTML Dasar. Kamu juga bisa belajar HTML di website W3Schools atau website lain yang menyediakan konten belajar HTML. Nanti kalo sudah belajar HTML, Kamu akan ketemu dengan yang namanya CSS dan JavaScript. Eaaa.. belajar lagi belajar lagi hahaha..

Tapi kalo Kamu ga punya waktu atau belum punya waktu untuk belajar itu, yaa, berarti Kamu harus menyediakan dana juga buat membayar jasa input konten. Kamu tinggal siapkan kontennya apa saja, tulis dalam bentuk .doc atau .pdf, dan berikan kepada si pemberi jasa. Pastikan konten yang Kamu berikan lengkap, paragraf mana dipasang di bagian mana pada template, berikut judul-judul halamannya. Siapin juga file-file gambarnya. Mungkin Kamu bisa minta dibuatkan juga deskripsi kontennya karena mungkin Kamu juga terlalu sibuk buat mengarang bebas, harganya pun akan lebih mahal. Tapi ingat! Kamu yang lebih tau tentang apa yang ingin Kamu sampaikan di websitemu. So, buatlah konten sejelas dan selengkap mungkin sehingga si pemasang konten tinggal menuliskan konten tersebut di templatemu. Itu akan berjalan lebih cepat dan efisien.

Tapi, sekali lagi, saya sarankan buat Kamu belajar tentang HTML. Aslinya gampang banget! Toh ketika Kamu membaca tutorial ini, berarti Kamu punya niat untuk belajar kan. Maka belajarlah. Dan wujudkan website gratismu! Yeaaahh!

3. Mengunggah ke Hosting

Sampai titik ini, berarti Kamu sudah punya template website dengan konten yang sudah lengkap. Saran saya lengkapi dulu kontennya sebelum mengunggah ke hostingan, meskipun di hostingan nanti Kamu masih tetap bisa mengedit file HTML. Hosting adalah layanan penyimpanan data online (online storage) untuk file website kita sehingga website kita dapat diakses dari manapun melalui koneksi internet.

Karena tujuan tulisan ini adalah membuat website gratis, berarti hosting yang akan kita gunakan juga adalah hosting gratis. Ada beberapa provider hosting yang memberikan akses gratis untuk jangka waktu tertentu dalam rangka promosi atau giveaway. Tapi pada tulisan ini saya akan menggunakan layanan Github Pages, yakni layanan hosting website statis dari Github. Kelebihannya adalah kita boleh menggunakan ruang penyimpanan maksimal 1GB secara gratis tanpa batas waktu. Github Pages membolehkan kita untuk menampilkan file HTML yang ada pada repositori git sebagai halaman web online. Github Pages hanya merender file client-side scripting (HTML, CSS, JS) dan tidak menjalankan server side scripting seperti PHP. Jadi untuk proyek kita kali ini web statis masih dapat menggunakan Github Pages. Sebenarnya kita bisa membuat website menggunakan Jekyll (generator website statis berbasis Ruby) yang dapat langsung dieksekusi pada Github Pages, tapi penggunaan Jekyll akan kita bahas di lain waktu.

3.1. Membuat Akun Github

Sebelum dapat menggunakan layanan Github Pages, terlebih dahulu kita harus mendaftar di Github. Kalo kamu sudah punya akun github, langsung saja login dan lanjutkan ke step berikutnya. Untuk mendaftar, masuk melalui tautan https://github.com/join. Isikan username, email dan password yang Kamu inginkan.

Perlu diperhatikan saat memilih username. Nantinya alamat website kita di Github adalah username.github.io. Misalnya username saya toniharyanto, maka URL website saya adalah toniharyanto.github.io. Terkecuali Kamu sudah punya domain sendiri atau hendak menggunakan domain sendiri seperti misalnya toniharyanto.net atau toniharyanto.web.id dan tidak akan menggunakan URL bawaan github, maka username apapun tidak akan jadi masalah. Cuma berarti Kamu harus menyiapkan biaya sekitar 100-130ribuan untuk membeli domainmu sendiri. Untuk saat ini kita akan gunakan domain gratis dari Github.

Seperti saya jelaskan di atas, bahwa satu akun hanya dapat membuat satu website. itu karena alamat domainnya adalah username akun kita. Github tidak dirancang secara khusus sebagai layanan hosting website, melainkan hosting file untuk Versioning Control System (VCS) berbasis Git (kalo Kamu programmer dan belum tau tentang Git, sebaiknya Kamu baca artikel "Belajar Git, Perlu Nggak Sih?"). Hanya saja Github memberikan fitur yang bisa kita manfaatkan untuk mempublis website statis. Adapun kalo Kamu mau bikin website lebih dari satu di Github Pages, Kamu bisa membuat Organization di Github. Organization itu semacam akun Github, tapi untuk keperluan kolaborasi yang dapat dikelola oleh lebih dari satu akun Github. Misalnya saya punya organization codepolitan-lab yang berisi repositori kode program yang disimpan atas nama CodePolitan. Nah, di codepolitan-lab, saya bisa membuat satu website dengan alamat codepolitan-lab.github.io tanpa harus membuat akun baru.

3.2. Buat Repositori Website

Setelah Kamu masuk ke halaman dashboard Github buat repositori untuk website kita denga mengklik tombol + New Repository yang ada di sebelah kanan bawah halaman dashboard. Kamu akan diarahkan ke halaman form untuk membuat repositori. Agar repositori kita dapat berfungsi sebagai Github Pages yang dapat ditampilkan sebagai website, maka syarat dari Github adalah nama repositori mesti berformat username.github.io. Contohnya, karena username saya adalah toniharyanto, maka saya harus membuat repository dengan nama toniharyanto.github.io. Setelah itu klik tombol Create Repository.

Selamat! Sampai disini Kamu sudah punya akun Github, repositori dan hosting gratis untuk website Kamu.

Setelah repositori berhasil dibuat, Github akan menampilkan halaman repositori dengan segenap instruksi untuk menggunakan command line. Tidak perlu bingung dengan hal ini, karena kita akan menggunakan aplikasi Github Desktop untuk managemen repositorinya.

3.3. Unduh dan Instal Aplikasi GithubDesktop

Hmm.. langkah ini khusus untuk Kamu pengguna Windows dan Mac. Github sudah menyediakan aplikasi untuk mengatur repositori Git kita dari desktop, yaitu Github Desktop. Aplikasi ini memudahkan Kamu untuk menggunakan Git tanpa harus menggunakan command line. Silakan unduh aplikasinya di https://desktop.github.com lalu instal di komputermu. Kalo Kamu pengguna Linux, Kamu bisa menggunakan aplikasi managemen Git untuk Linux seperti SmartGit, GitEye dan GitKraken. Daftar lengkap aplikasi GUI untuk Git dapat dilihat pada tautan berikut. Pada tulisan ini saya akan menggunakan Github Desktop.

Setelah Github Desktop terinstal, jalankan aplikasi tersebut. Github Desktop akan meminta kita untuk login terlebih dahulu menggunakan username dan password Github yang sudah kita buat tadi. Setelah login berhasil, Kamu dianjurkan untuk memasukkan nama lengkap dan email untuk identifikasi git. klik Continue. Pada langkah pencarian Repositories, Github Desktop akan mencari dimana repositori git yang sudah ada di dalam komputer kita. Klik skip.

Pada bagian kiri atas aplikasi, ada tombol panah yang bila diklik, akan muncul dropdown berisi daftar repositori kita di server Github. Karena tadi kita sudah membuat repositori untuk website kita, maka disitu akan muncul repositori dengan nama username.github.io. Pilih tab Clone, pilih repositori bernama username.github.io lalu klik Clone Repository. Pilih tempat untuk menyimpan repositori kita lalu klik OK. Clone berarti kita mengunduh repositori tersebut ke komputer kita. Setelah proses clone berhasil, kita bisa menambahkan file apapun di dalam folder hasil clone tersebut yang nantinya bisa langsung disinkronisasikan dan diunggah ke repositori di server Github.

3.4. Unggah Website ke Repositori

Salin semua file template website statis kita ke dalam folder repositori hasil clone tadi. Kemudian buka kembali aplikasi Github Desktop. Aplikasi akan mendeteksi adanya perubahan pada folder repositori kita. Saatnya mengunggah website kita ke Github.

Pada form Uncommitted Changes, isi judul commit, dengan apa saja. Ini untuk menandai kapan kita mengunggah dan perubahan apa saja yang dilakukan pada repo kita. Setelah itu klik Commit to master. Aplikasi akan menandai file apa saja yang mengalami perubahan pada repositori, apakah penambahan file baru, penghapusan atau perubahan baris konten di dalam suatu file.

Setelah commit selesai, klik tombol Publish yang ada di sebelah kanan atas aplikasi untuk mengunggah perubahan tersebut ke server Github.

Setelah proses unggah selesai, Kamu boleh mengecek pada browser dengan mengetikkan domain repo Kamu, pada contoh saya berarti http://toniharyanto.github.io. Kadangkala ada jeda 1-2 menit sampai Github mendeteksi perubahan pada repo. Kalo websitemu muncul, itu artinya Kamu berhasil membuat website menggunakan Github Pages. Dan kalo Kamu mengikuti semua langkah-langkah gratisan yang ada pada tulisan ini, berarti Kamu berhasil membuat WEBSITE GRATIS! Selamat! :D