Sudah 2019. Artikel terakhir di blog ini ditulis pada 29 Desember 2017. Artinya, sepanjang 2018 tidak ada satupun artikel yang saya publish. :(

Ketika saya “berniat” menulis kembali beberapa hari yang lalu, saya baru menyadari bahwa laptop yang saya pakai saat ini ternyata belum terpasang “mesin” untuk menulis blog. Memang, sepanjang 2018, laptop sudah 2x berganti. Dulu saya menggunakan Wordpress, salah satu content management system (CMS) populer, untuk menulis blog. Belakangan, Wordpress berkembang tidak hanya sebagai “mesin” blog, tetapi juga dapat digunakan untuk membuat website portal, toko online, bahkan forum. Bagi saya - yang hanya memanfaatkannya untuk blog dan itu pun tidak rutin - Wordpress terlalu overkill alias berlebihan. Terlalu banyak fitur :D Karena itu, setelah menemukan artikel tentang Jekyll sekitar dua tahun lalu dan kemudian membandingkannya dengan Wordpress, saya mantap beralih untuk menjadikan Jekyll sebagai “mesin” di belakang blog saya.

Sekalian install Jekyll, saya tuliskan saja tahapannya. Lumayan, dapat satu artikel kan. Selain sebagai catatan saya, mudah-mudahan bisa bermanfaat ketika ada yang membutuhkan.

Logo Jekyll

Apa itu Jekyll?

Baik, saya mulai dengan perkenalan dulu. Apa itu Jekyll?

Kita tahu bahwa ada dua jenis website: dynamic dan static. Pada dinamic website - misalnya yang dibuat menggunakan CMS seperti Wordpress, Joomla, Drupal dan Blogger/Blogspot - informasi atau konten untuk mengisi sebuah halaman web disimpan dalam database yang kemudian akan ditarik ketika ada “perintah” atau query. Sebagai contoh, ketika kita akan melakukan pencarian produk di Tokopedia, halaman HTML utuh yang berisi hasil pencarian sebenarnya tidak ada. Tetapi Tokopedia mempunyai template khusus untuk memuat hasil pencarian. Sistem akan melakukan query untuk mencari produk pada database sesuai kata kunci, selanjutnya daftar produk yang ditemukan akan dimuat dalam template tersebut.

Di sisi lain, static website tidak menggunakan database. Seluruh informasi yang akan ditampilkan pada suatu halaman web memang sudah ada pada file HTML-nya. Tidak ada lagi proses query. File-file HTML ini dapat ditulis satu-persatu menggunakan text editor seperti Notepad atau Sublime Text, atau dapat pula dihasilkan secara otomatis menggunakan “static site generator” seperti Jekyll.

Jekyll, sesuai tagline-nya “a simple, blog-aware, static site generator” adalah software untuk membuat blog statis. Untuk menghasilkan sebuah blog, Jekyll hanya membutuhkan template, file-file artikel yang ditulis dengan format Markdown dan sebuah file konfigurasi. Kemudian hasilnya kita upload ke server. Itulah blog kita. Sesederhana itu. Mungkin terdengar seperti alternatif yang hanya cocok untuk para “geek”, tapi sebenernya Jekyll (dan juga static blog lainnya) mempunyai banyak kelebihan dibandingkan Wordpress dkk, di ataranya:

  1. Seperti yang sudah saya sampaikan, Wordpress itu overkill. Terlalu berlebihan, setidaknya untuk kebutuhan saya dalam membuat blog. Sementara itu, Jekyll memang dikhususkan sebagai blogging platform. Meskipun jauh lebih simple, Jekyll tetap kaya akan fitur-fitur yang dibutuhkan untuk membuat blog.
  2. Jekyll jauh lebih cepat. Itu karena semua halaman yang ditampilkan memang sudah benar-benar “jadi”. Tidak ada lagi query ke database. Selain itu, memuat file statis pada halaman website membutuhkan sumberdaya yang jauh lebih kecil di sisi server.
  3. Karena server hanya berisi file-file statis, Jekyll lebih aman dari “gangguan” hacker yang tidak bertanggungjawab. Tidak ada sesuatu yang bisa disasar oleh hacker, kecuali mereka punya username dan password-nya :D Bandingkan dengan website berbasis Wordpress yang mempunyai banyak “lubang” untuk dieksploitasi.
  4. Jekyll adalah “mesin” di belakang Github. Karenanya, dengan mudah kita bisa publish blog pada Github. Gratis. Dengan Github, setiap perubahan pada blog kita akan terekam, meskipun hanya merubah satu huruf. Ya, Github adalah salah satu layanan versioning control yang paling populer. Selain itu, dengan Github memudahkan kita untuk kolaborasi.
  5. Jekyll menggunakan Markdown. Artinya saya bisa membuat artikel yang berisi R scripts dengan R Markdown.

Tidak ada yang sempurna. Jekyll pun punya kelemahan dibandingkan Wordpress, di antaranya:

  1. Tidak bisa update blog secara live. Perubahan dilakukan secara “lokal”, baru kemudian blog kita generate ulang.
  2. Menulis artikel pada Jekyll artinya menulis sebuah file teks. Formating dilakukan dengan menggunakan “simbol-simbol” khusus. Bagi yang tidak terbiasa tentu akan terasa merepotkan. Bandingkan dengan Wordpress, menulis artikel dan format-nya (teks tebal dan miring, ukuran huruf, menyisipkan gambar) semudah membuat tulisan dengan Microsoft Word: apa yang kita lihat itulah yang akan kita dapat (what you see is what you get - WYSIWYG).
  3. Tidak seperti template Wordpress yang dapat diganti dengan “sekali” klik, mengubah template Jekyll relatif memerlukan “upaya ekstra”, tricky alias rumit :(

Instalasi Jekyll pada Windows 10

Jekyll pada Windows memang tidak didukung secara resmi. Official-support hanya untuk Linux dan MacOS. Meskipun begitu, bukan berarti kita tidak bisa menginstal dan menjalankan Jekyll pada Windows. Saya berhasil menginstall Jekyll dengan memanfaatkan sumber utama dari sini dan sini plus beberapa upaya ekstra yang sumbernya lupa tidak saya catat. Ya, instalasi pada Windows memang tidak sesederhana pada Linux atau MacOS - yang hanya cukup dengan beberapa baris perintah (dan sambungan internet tentunya). Kabar baiknya, jika menggunakan Windows 10 (versi 1607 atau lebih baru), kita mempunyai opsi lain untuk menginjalankan Jekyll pada Windows dengan memanfaatkan Windows Subsystem for Linux (WSL). Sederhananya, WSL adalah Linux yang diinstal pada Windows. Inilah yang saya jabarkan sekarang: Menginstal dan menjalankan Jekyll pada Windows 10 dengan WSL. Ada dua tahapan:

Pertama, Instal Windows Subsystem for Linux pada Windows 10

Tahapannya:

  1. Dari start menu, klik Settings

  2. Klik Update & Security

  3. Klik For Developer

  4. Pada bagian “Use developer features”, pilih Developer Mode

    Use developer features

  5. Windows akan menampikan konfirmasi untuk mengaktifkan developer mode. Klik Yes

    Konfirmasi developer mode

  6. Windows akan menginstal komponen-komponen yang diperlukan. Setelah selesai lakukan restart/reboot PC

  7. Masuk ke Control Panel

  8. Klik Programs

  9. Klik Turn Windows features on or off

    Turn windows features

  10. Cek Windows Subsystem for Linux (beta), lalu klik OK

    Check WSL

    Update: Seluruh tahapan 1-10 di atas dapat dilakukan dengan menjalankan perintah berikut pada Windows PowerShell (jalankan sebagai Administrator):

    Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

    Instal bash

  11. Windows akan menginstal komponen-komponen yang diperlukan. Setelah selesai lakukan restart kembali.

  12. Dari start menu, buka Command Prompt (dapat dilakukan dengan memasukan kata kunci “cmd”)

  13. Pada Command Prompt, masukan perintah berikut lalu tekan tombol enter

    lxrun /install

  14. Ketikan y untuk melanjutkan. Tekan enter

  15. Windows akan mulai mengunduh komponen-komponen yang diperlukan dan kemudian melakukan instalasi Linux.

  16. Masukkan username lalu tekan enter

  17. Masukan password lalu tekan enter

  18. Masukan kembali password lalu tekan enter

    Instal bash

  19. Instalasi Windows Subsystem for Linux selesai. Restart kembali PC

Kedua, Instal Jekyll pada Windows Subsystem for Linux

Tahapannya:

  1. Dari start menu, buka aplikasi Bash on Ubuntu on Windows

    Bash

    Atau, bisa juga buka Command Prompt, lalu ketikan perintah berikut lalu enter

    bash

  2. Update Ubuntu dengan perintah berikut lalu enter

    sudo apt-get update -y && sudo apt-get upgrade -y

    Masukkan password yang dibuat pada tahapan pertama poin 17. Tunggu hingga proses selesai.

    Update Ubuntu

  3. Jekyll berjalan pada Ruby. Instal Ruby dengan perintah berikut

    sudo apt-get install -y build-essential ruby-full

    Install Ruby

  4. Update Ruby gem

    sudo gem update –system

    Update gems

  5. Instal Jekyll

    sudo gem install jekyll bundler

    Install jekyll

Membuat blog pertama dengan Jekyll

Setelah Jekyll sukses diinstal, saatnya kita membuat blog. Caranya sangat mudah. Masih menggunakan Bash on Ubuntu on Windows :

  1. Masuk ke direktori di mana file-file statis Jekyll akan dibuat. Misalnya saya akan menyimpannya pada folder D:\Personal\Blog, maka masukkan perintah

    cd /mnt/d/Personal/Blog

  2. Buat blog Jekyll baru, misalnya myblog

    jekyll new myblog

    Jekyll akan menginisiasi blog baru. Tunggu sampai proses selesai.

    New jekyll

    Silakan periksa folder D:\Personal\Blog, akan ada folder baru dengan nama myblog. Folder inilah yang berisi file-file statis yang diperluka oleh Jekyll untuk membentuk blog.

    New jekyll Folder

    Perintah jekyll new myblog menginisiasi blog baru dengan template default yaitu minima. Jika ingin menggunakan template lain, bisa download/clone dari Github atau download dari sumber lain seperti ini dan ini. Ganti semua file dan folder di dalam folder myblog dengan template yang diinginkan.

  3. Masuk ke folder myblog

    cd /myblog

  4. Generate blog dan jalankan di server lokal

    bundle exec jekyll serve

    New jekyll

  5. Buka browser. Blog dapat diakses melalui alamat http://127.0.0.1:4000

    New Blog

Selamat, blog statis pertama telah selesai dibuat dengan menggunakan Jekyll. Selanjutnya, kita perlu menyunting file konfigurasi _config.yml untuk mengubah judul, link, maupun catatan kaki (footer). Buka file _config.yml dengan text editor seperti Notepad.

Edit config

Perubahan file konfigurasi tidak langsung dieksekusi oleh. Silakan kembali ke Bash on Ubuntu on Windows, lalu stop Jekyll service dengan cara menekan tombol (keyboard) Ctrl+C, lalu jalankan kembali dengan perintah

bundle exec jekyll serve

Silakan refresh browser. Halaman muka blog akan berubah menjadi seperti ini

Edit config

Selain mengubah title, url dan description, banyak pengaturan yang bisa dilakukan melalui file _config.xml, misalnya menampilkan menu, mengaktifkan komentar dengan Disqus dan lain-lain. Selengkapnya bisa dipelajari di laman dokumentasi template yang digunakan.

Mudah bukan? Jika ada yang ingin didiskusikan, bisa tinggalkan pesan pada kolom komentar di bawah atau bisa hubungi saya melalui email [email protected]. Semoga bermanfaat :)