Membuat Blog dengan Jekyll dan Github Pages

Pada artikel kali ini, kita akan membahas cara tercepat untuk membuat blog dengan Jekyll,  menghindari masalah umum ketika menggunakan Jekyll, dan masih banyak lagi.

Apa itu Jekyll?

Jekyll adalah Website Generator yang dirancang untuk membuat blog statis minimalis dan di-host pada GitHub Pages.

Apa Tujuan dari Jekyll?

Tom Preston-Werner menciptakan Jekyll agar dapat digunakan oleh para Blogger untuk membuat Website HTML Statis yang sederhana dengan konten yang di-host dan dikontrol oleh GitHub. Tujuannya adalah untuk menghilangkan kompleksitas dari platform blogging.

Jekyll dapat melihat konten yang ditulis dalam format Markdown kemudian menampilkannya melalui template sebagai Website Statis secara langsung dari GitHub Repository sehingga kita tidak perlu berurusan dengan hosting manapun.

Kelebihan dari Website Jekyll

Berikut adalah beberapa kelebihan dalam menggunakan Website Statis:

Tidak Membutuhkan Database

Tidak seperti WordPress dan Content Managemen System (CMS) lainnya, Jekyll tidak memiliki dan tidak membutuhkan Database. Semua postingan dan halaman akan diubah ke dalam HTML sebelum dipublikasikan.

Tidak Membutuhkan CMS

Kita hanya perlu menulis semua konten dalam format Markdown dan Jekyll akan menjalankannya melalui template agar dapat menghasilkan Website Statis. GitHub dapat berfungsi sebagai CMS  karena kita dapat mengedit konten yang ada di dalamnya.

Cepat

Jekyll dapat dianggap cepat karena tidak memerlukan database, kita hanya perlu menyiapkan halaman statis. Jekyll Now hanya memiliki tiga HTTP Request - termasuk gambar profil dan social icon!

Dapat Mengontrol Design

Kita dapat mengedit Template yang sudah dibuat oleh orang lain atau membuatnya sendiri dengan mudah.

Aman

Hampir semua kemanan yang rentan pada platform seperti WordPress tidak berlaku di Jekyll karena tidak membutuhkan CMS, database, atau PHP. Jadi, kita tidak perlu menghabiskan banyak waktu untuk mengatasi masalah keamanan.

Hosting yang Nyaman

Kenyamanan yang dapat kita rasakan jika sudah menggunakan GitHub yaitu: Tidak memerlukan biaya apapun :D.

Cara Menggunakan Jekyll

Terdapat beberapa cara untuk meulai menggunakan Jekyll. Berikut ini beberapa pilihan untuk menggunakannya:

1. Instal Jekyll secara lokal melalui Command Line, buat boilerplate Website baru dengan menggunakan perintah jekyll new, buat secara lokal dengan jekyll build, lalu tampilkan Website tersebut.
2. Clone poin utama ke dalam PC/Laptop, instal Jekyll secara lokal melalui Command Line, buat pembaruan ke Website, buat secara lokal, lalu tampilkan Website tersebut.
3. Fork poin utama, buat perubahan, lalu tampilkan Website tersebut.

Disini, kita akan mulai dengan opsi tercepat dan termudah: Menggunakan poin utama yang dapat membuat kita tidak perlu menginstal Dependency apa pun kedalam PC/Laptop. Kita akan mulai langsung melalui Website Github.com.

Fork Jekyll Now

Buka halaman Jekyll Now dan tekan tombol "Fork" yang berada di sisi kanan atas untuk membuat salinan file ke dalam akun GitHub kalian.

Fork merupakan pilihan yang tepat karena dapat memberikan perasaan seperti apa itu Jekyll sebelum kita harus mengatur Local Development Environment, menginstal Dependency, dan mencari tahu proses Build dari Jekyll.

Catatan: Membuat Website Jekyll melalui Command Line lokal dapat membuat kita bingung dan menghabiskan banyak waktu karena kita harus menginstal dan mengkonfigurasi Dependency seperti Ruby dan RubyGems. Maka dari itu, kita dapat menggunakan GitHub Pages sampai kita benar-benar harus membuatnya secara lokal.

Host Jekyll Now ke Akun Github

Sebagai pengguna GitHub, kita berhak atas satu Website "user" yang dapat digunakan secara gratis (sebagai lawan dari Website "project"), yang beralamat di https://username.github.io/.

Bagian terbaiknya adalah kita hanya perlu meletakkan blog Jekyll yang belum dibuat pada Master Branch dan GitHub Pages akan membuat Website Statis serta dapat menampilkannya. Kita tidak perlu khawatir tentang proses pembuatannya sama sekali karena semuanya sudah diatur.

Klik tombol "Settings" pada Repository yang telah kalian Fork (di Menu sebelah kanan atas) dan ubah nama Repository tersebut menjadi username.github.io - ubah username menjadi Username GitHub kalian.

Website kalian mungkin akan langsung dapat ditampilkan. Kalian dapat mengeceknya dengan membuka https://username.github.io/. Jangan khawatir jika kalian hanya melihat halaman 404 (belum aktif) karena pada langkah berikutnya, kita akan dapat mengaktifkannya.

Kita telah melakukan segala cara dengan cepat. Disini, kita sudah memiliki Website Jekyll dan sudah berhasil dijalankan! Sekarang, mari kita lihat beberapa masalah paling umum yang harus diperhatikan ketika kita meng-Hosting Website Jekyll di GitHub Pages.

Masalah Umum pada Website Statis Github

Berikut adalah beberapa masalah ketika kita menggunakan Github Pages:

• Kita harus memperhatikan perbedaan antara User dan Project Website di GitHub. Pada User Website (yang telah kita siapkan), kita tidak perlu melakukan Branching apa pun. Master Branch sudah dikonfigurasi untuk dapat menjalankan apa pun yang ada di dalamnya melalui Jekyll.
• Menggunakan Project Website untuk Website Jekyll dapat menjadi kompleks karena Website tersebut akan diterbitkan ke subdirektori. URL akan terlihat seperti https://username.github.io/nama-repository, yang dapat menyebabkan masalah pada template Jekyll.
• Jekyll memiliki Plugin yang tersedia, tetapi GitHub Pages hanya mendukung sebagian saja. Jika kalian memasukkan plugin yang tidak didukung, maka Jekyll akan gagal membuat Website. Jadi, gunakanlah Plugin yang didukung.

Mengkustomisasi Website Jekyll

Sekarang, kita dapat mengubah Nama, Deskripsi, Avatar/Logo, dll pada Website Jekyll dengan mengedit file _config.yml. Variabel khusus tersebut telah diatur untuk kenyamanan dan di Pull ke dalam tema kita ketika Website dibuat.

Membuat perubahan pada _config.yml (atau file apa pun yang ada di repositori) akan memaksa GitHub Pages untuk Rebuild Website dengan Jekyll. Website yang sudah di Rebuild akan dapat dilihat setelah beberapa detik kemudian di https://username.github.io. Jika Website kalian tidak langsung aktif setelah melakukan langkah yang sudah saya sebutkan diatas, kalian dapat mengikuti langkah ini.

Masuk ke Repo (Repository) dan atur Website kalian dengan cara memperbarui dan buat perubahan pada variabel yang ada di dalam file _config.yml.

Disini, kalian dapat mengubah File Blog dengan menggunakan salah satu dari tiga cara. Pilihlah sesuai dengan cara yang kalian sukai:

1. Edit File yang ada di dalam repositori username.github.io kalian langsung melalui Website GitHub.com.
2. Menggunakan 3rd Party Content Editor GitHub seperti Prose yang telah dioptimalkan untuk Jekyll dan dapat memudahkan kita untuk mengedit Markdown, menulis konsep, dan mengupload gambar.
3. Clone Repository dan buat pembaruan secara lokal, lalu Push ke repositori GitHub kalian.

Catatan: Jangan berasumsi bahwa kita perlu Jekyll untuk membuat Website secara lokal untuk menyesuaikan dan mengatur tema Website Jekyll. GitHub Pages dapat melakukannya untuk kita dan kita hanya perlu menempatkan file yang ingin di buat tepat pada Master Branch dari User Repository atau di Branch gh-pages dari repository lainnya, kemudian GitHub Pages akan memprosesnya dengan Jekyll.

Mempublikasikan Postingan Jekyll

Sekarang, kita sudah mengkustomisasi, mengaktifkan, dan menampilkannya. Kali ini, kita perlu mempublikasikan Postingan ke dalam blog. Berikut adalah langkah-langkahnya:

• Edit /_posts/2014-3-3-Hello-World.md, hapus konten Placeholder dan masukkan konten milik kalian sendiri.
• Ubah nama file untuk memasukkan tanggal hari ini dan judul postingan kalian. Jekyll memerlukan postingan yang diberi nama dengan format tahun-bulan-hari-judul.md.
• Perbarui judul di bagian atas file Markdown. Variabel di bagian atas postingan blog disebut dengan istilah Front Matter (Akan kita bahas selanjutnya). Dalam hal ini, mereka telah menentukan Layout mana dan judul postingan apa yang akan digunakan. Terdapat variabel Front-Matter tambahan yang tersedia seperti Permalink, Tag, dan Kategori.

Jika kalian ingin membuat postingan baru melalui halaman GitHub.com, kalian dapat mengeklik icon "+" di direktori /_posts /. Ingatlah untuk memformat nama file dengan benar.

Catatan: Website Jekyll akan bertindak seperti CMS jika kita menggunakan GitHub Pages, karena GitHub sendiri berfungsi sebagai CMS. Kita dapat mengedit postingan di Browser, bahkan di Smartphone.

Cara Memasang Custom Domain di Jekyll

Terdapat dua cara untuk menggunakan Custom Domain pada Github Pages:

1. Masuk ke Root Repo dan edit file CNAME untuk memasukkan nama domain Custom (misalnya, www.namadomain.com).
2. Masuk ke Domain Name Registrar dan tambahkan CNAME DNS Record yang mengarahkan domain kalian ke GitHub Pages:
   type: CNAME
   host: www.namadomain.com
   answer: username.github.io
   TTL: 300

Blogging Secara Lokal dengan Text Editor

Jika kalian lebih suka menulis dengan menggunakan Text Editor seperti Sublime, Vim, Atom, VSCode atau editor lain, yang perlu kalian lakukan hanyalah meng-Clone Repository, membuat postinggan Blog dengan format Markdown baru di folder _posts, dan Push perubahan ke GitHub.
 
GitHub Pages akan secara otomatis Rebuild Website sesegera mungkin setelah file Markdown telah muncul di Repository dan postingan blog yang baru akan langsung ditayangkan setelahnya. Untuk melakukannya, kalian dapat mengikuti beberapa tahap berikut:

• Pertama-tama, kalian harus Clone Repository.
• Buat postingan baru pada folder _posts. Jangan lupa untuk memberi nama dengan format tahun-bulan-hari-judul.md dan cantumkan Front-Matter di atas Postingan.
• Commit Post dari File Markdown dan Push ke Github Repo kalian.
• Tunggu sampai GitHub Pages Rebuild Website kalian. Biasanya akan memakan waktu di bawah 10 detik.

Kesimpulan

Jekyll bukan digunakan untuk setiap Project. Jumlah layanan yang ingin diintegrasikan mungkin dapat digunakan tetapi tidak semua menawarkan fleksibilitas atau kontrol. Jekyll juga tidak cocok digunakan untuk membuat Website berbasis User karena tidak ada database atau Server-Side Logic untuk meng-Handle Register atau Login.

Kekuatan sesungguhnya dari Jekyll adalah kesederhanaan dan minimalisnya yang dapat memberikan apa yang kita butuhkan untuk membuat Content-Focused Website yang tidak memerlukan banyak interaksi pengguna. Sederhana dan minimalis dapat membuatnya sempurna jika digunakan untuk membuat blog dan portofolio.