Membuat Web Statis dengan GitHub Pages & Jekyll

GitHub Pages Jekyll

Mungkin sebagian dari kita sudah sering mendengar istilah static site atau static web page yang sedang menjadi trend sekarang ini dalam dunia web. Banyaknya keuntungan yang bisa didapatkan dan juga kemudahan yang diberikan membuat web statis menjadi pilihan utama untuk menggantikan web dinamis dibandingkan dengan menggunakan CMS seperti WordPress, Blogspot dan lain-lain.

Apalagi sekarang sudah adanya dukungan hosting gratis untuk web statis oleh GitHub. Yaitu, GitHub Pages yang memberikan layanan hosting gratis untuk semua pengguna GitHub hanya dengan membuat repositori pada akunnya. GitHub hanya mendukung client-side-scripting hosting saja. Jadi, tidak diperuntukkan untuk server-side-scripting seperti PHP, Ruby dan lain-lain. Pada awalnya semua pengguna akan mendapatkan subdomain berupa username.github.io / organization.github.io . Sebagai contoh, saya sudah mendaftarkan subdomain saya sendiri yang bisa dicek di https://aancw.github.io/ .

GitHub Pages  semakin lengkap dengan adanya generator untuk membuat web statis. Salah satunya adalah Jekyll, static site generator yang banyak digunakan oleh kalangan pengguna GitHub. Salah satu contoh yang menggunakan Jekyll dan GitHub Pages  yaitu situs teman saya yang beralamat di http://rizaumami.github.io.

Saya sendiri belum menggunakan web statis dan masih menggunakan WordPress sebagai media utama dalam menulis blog. Tapi tak apa nanti migrasi ke web statis( Nanti kalau paket hosting nya sudah habis 😛 ).  Sebelum itu, kita diwajibkan untuk mempunyai akun GitHub terlebih dahulu karena akun itu lah yang akan kita gunakan sebagai subdomain dari web statis kita nanti. Silahkan ikuti panduan untuk membuat GitHub Pages  yang ada pada alamat https://pages.github.com/

Oke kita anggap bahwa sudah berhasil untuk membuat GitHub Pages  dengan subdomain yang ditentukan. Misal disini saya akan menggunakan subdomain http://aancw.github.io karena nama pengguna akun GitHub saya adalah http://github.com/aancw . Subdomain atau repositori tersebut yang akan nantinya kita gunakan untuk membuat web statis. Tapi, GitHub Pages  juga bisa untuk domain bebas kok hihi. Contohnya https://pegelinux.id/ yang menggunakan GitHub Pages  beserta domain bebas dan Jekyll.

Kita akan memasuki tahap instalasi untuk Jekyll bila proses pembuatan GitHub Pages  sudah selesai. Namun, sebelum itu kita harus memenuhi syarat terlebih dahulu seperti berikut:

  • Ruby( Ruby v1.9.3 atau lebih untuk Jekyll 2 dan Ruby v2 atau lebih untuk Jekyll 3)
  • RubyGems
  • NodeJS
  • Python 2.7

Pemasangan Jekyll

Untuk melakukan instalasi, kita akan menggunakan RubyGems karena kemudahan yang diberikan. Kita cukup melakukan perintah sebagai berikut:

Semua dependensi Jekyll akan terpasang secara otomatis dengan menggunakan perintah tersebut. Jadi ga perlu khawatir hihi

Konfigurasi Jekyll

Setelah Jekyll terpasang, so what’s next? Langkah selanjutnya adalah membuat project, asumsikan namanya adalah startproject.

Maka Jekyll akan membuat beberapa berkas yang dibutuhkan

Oke kita akan coba terlebih dahulu hasil yang dibuat oleh Jekyll dengan menggunakan perintah berikut untuk menjalankan web server

Jekyll sudah menjalankan service dan melakukan binding terhadap port 4000. Bila kita coba akses di browser maka akan menampilkan seperti berikut:

Tampilan Bawaan Jekyll
Tampilan Bawaan Jekyll

Adapun beberapa berkas penting yang wajib diperhatikan saat melakukan konfigurasi sebagai berikut:

  • Berkas _config.yml berguna sebagai tempat konfigurasi utama dari Jekyll seperti nama blog, judul blog dan lain sebagainya. Bila kita lihat akan seperti berikut:

  • Berkas yang berada pada _includes akan selalu dipanggil oleh halaman utama dan lain-lain. Karena berisi footer, header, dan lain-lain. Silahkan dicoba untuk ganti sesuai dengan kebutuhan masing-masing
  • Berkas yang berada pada _layouts berisi pengaturan tata letak blog
  • Berkas yang berada pada _posts berisikan berkas ber-format markdown yang nantinya akan dikonversi kedalam html. Misal kita akan membuat postingan baru. Maka, terlebih dahulu membuat berkas dengan format YEAR-MONTH-DAY-title.markdown ( contoh : 2016-06-13-membuat-web-statis-dengan-jekyll.markdown ) dengan isi sebagai berikut:

Jalankan kembali jekyll serve dan juga jekyll build (opsional bila konten tidak berubah) bila service sebelumnya sudah dimatikan. Halaman jekyll pun akan berubah seperti yang kita lakukan perubahan sebelumnya.

Tema untuk Jekyll

Untuk tema bisa merujuk ke alamat http://jekyllthemes.org/ agar web statis nya bisa lebih cantik dan bagus dilihat hihi

Unggah ke GitHub Pages

Setelah kita selesai melakukan perubahan terhadap bawaan dari jekyll. Tahap terakhir adalah melakukan unggah data ke GitHub Pages  yang sudah kita buat sebelumnya. Tapi sebelumnya kita harus melakukan inisialisasi git repositori.

Kita lakukan perubahan terlebih dahulu terhadap berkas _config.yml untuk menyesuaikan url menjadi sesuai yang ditentukan. Misal menjadi seperti berikut:

Push jekyll kedalam repositori yang sudah kita buat

Akhirnya web statis kita sudah sukses mengudara dengan subdomain github.io . Akhir kata, semoga artikel ini bermanfaat.

Referensi:

  • https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/
  • https://help.github.com/articles/using-jekyll-as-a-static-site-generator-with-github-pages/
  • https://pages.github.com/
  • http://www.kunocreative.com/blog/bid/88040/Static-Dynamic-and-Interactive-Content-Pros-and-Cons
  • https://www.taniarascia.com/make-a-static-website-with-jekyll/
  • http://jekyllrb.com/
Aan Wahyu

Aan Wahyu

Hanya seorang penyuka Wayang( Terutama Wayang Golek) dan penggiat Open Source serta penikmat dan pembuat puisi. Saat ini memakai distro Arch Linux sebagai OS yang digunakan untuk kebutuhan sehari-hari. Founder dari Sinau Development. Tertarik dengan Research Development dan Non-Profit Organization yang bersifat Open Source dan juga sebagai kontributor di RumahVOIP serta Indonesian Research and Development Center( RNDC ) dan aktif juga diforum Open Source lainnya.
Aan Wahyu