Membangun Situs Web Statik dengan Jekyll _static generator_. === Sekedar membagi ilmu seputar web programming, web publishing, dan web development dekade pebakangan ini; saya bagikan pandungan membangun situs web statik (static website) menggunakan software bernama Jekyll. Selama anda membaca artikel ini keseluruhan, mungkin anda akan dibingungkan dengan beberapa kata dan frasa yang saling subtitusi dari Bahasa Indonesia ke Bahasa Inggris. Saya mengaku bahasa saya lemah. Anda bisa Google. ## Prerequirements Sebelum dimulai, anda wajib memenuhi persyaran di bawah ini: - Anda mengerti dasar _file editing_ dengan text editor - Anda mengerti dasar _file system_ (pada kasus ini, yang digunakan adalah Sistem Operasi Windows 7 ke atas) - Jaringan online internet pada komputer yang dipakai - File Editor: - Notepad++ (direkomendasi untuk komputer lawas), - Sublime, - Atom, - Visual Code Studio (direkomendasi), - atau apapun; asal bukan Notepad bawaan Windows! ## Pengetahuan Pendukung (tidak wajib) - **Dasar HTML/CSS web**. Artikel ini tidak membahas web desain, tapi bagaimana web bekerja. **Jangan khawatir:** Pengetahuan ini tidak wajib anda harus kuasai; bayangkan: _nyeblog_ pakai Wordpress.org atau Blogger saja! - **Dasar operasi antarmuka Command Prompt**. Software yang digunakan tidak memiliki antarmuka grafis, melainkan antarmuka printah text. **Jangan khawatir:** Anda tidak dirujuk untuk kuasai dalam, melainkan hanya dasar-dasar, dengan penjelasan ringkas-nan-padat dan dari nol! ## Mengetahui konsep Website Statik ### Website statik vs Website dinamis ### _Main resources_, _Generated pages_, dan _Static Generator_ Katakanlah, dalam sistematika website statik ini, didapati tiga elemen: 1. **Main resources** jika website atau blog umumnya memerlukan database untuk 2. **Generated pages** 3. **Static generator** Dikarenakan web static menghasilkan (_generated_) halaman web dari sumber informasi dasar (_main resource_); ## Jekyll, Static Generator Jekyll adalah Static Generator. ### Installasi Ada banyak cara menginstall Jekyll. Puluhan cara. Dari cara yang tertulis di dokumen situs resmi Jekyll, atau artikel dan video yang bisa didapati di Internet. Dari cara-cara tersebut, dasarnya anda diminta mengingstall dua lapisan program agar bisa memakai Jekyll, yaitu: 1. Bahasa pemprograman Ruby (wajib untuk Ruby Gem) 2. Ruby Gem "jekyll" dan "bundler" Beda Sistem Operasi, beda ruang lingkup, beda cara. Beda cara ini selalu dihadapi pemula-pemula dan menjadikan ini sebagai tembok tidak terlihat sehingga pemula-pemula menyerah angkat tangan. **Jangan khwatir!!** Di sini dijelaskan secara ringkas dan mudah dipahami! Pastikan komputer yang anda pakai terhubung dengan internet. #### 1. Install Scoop.sh Scoop adalah pemasang program berbasis antarmuka teks. Beberapa mengatakan ini adalah Package Manager selaknya yang dimiliki Distro Linux, padahal bukan. Scoop diperlukan untuk installasi Bahasa Pemprograman Ruby di komputer Windows -- **TANPA PERLU IZIN ADMINISTRASI!!** Artinya anda bisa install banyak program tanpa perlu khawatir atas efek sistem operasi, saat instalasi dan penghapusan instalasi. Situs Scoop: https://scoop.sh. 1.1. **Buka Powershell**. Cari Powershell pada Start Menu, lalu buka. Anda bisa membuka Powershell melalui Command Promt (CMD) dengan membuka command promt, lalu jalankan `powershell`. ![Menjalankan powershell di command prompt](https://i.imgur.com/j2aKqZq.png) 1.2. **Install scoop**. Pastikan Powershell 3 (or later) dan .NET Framework 4.5 (or later) terinstall. Lalu jakankan: ```ps3 iex (new-object net.webclient).downloadstring('https://get.scoop.sh') ``` **Catatan:** Bila terjadi error, anda perlu mengubah izin eksekusi powershell, dengan menjalankan `Set-ExecutionPolicy RemoteSigned -scope CurrentUser`. Lalu coba kembali perintah installasi. Setelah scoop terinstall, anda direkomendasikan untuk menutup program Powershell (Command Prompt), lalu buka kembali. Jalankan `scoop -v` untuk verifikasi. Semua program beserta konfigurasi lokal akan berada di `%userprofile%\scoop`. Umumnya `C:\Users\<username>\scoop`. ![Gambar lokasi %userprofile%.](https://i.imgur.com/qZYNIM9.png) ![Gambar lokasi akurat](https://i.imgur.com/PqTz9l4.png) ##### 2. Install Bahasa Pemprograman Ruby dengan Scoop.sh Buka CMD atau Powershell, jalankan: ``` scoop install ruby msys2 ``` Perintah di atas akan program bernama **jekyll** dan **bundler**. 1. **ruby** bahasa pemprograman Ruby. 2. **msys2** adalah software indepedencies management untuk ruang lingkup POSIX, diperlukan untuk setup toolchan dan ruang lingkup C-lang. Proses akan memerlukan waktu untuk download dan installasi program. ![Installasi Ruby](https://i.imgur.com/L8oDrJH.png) Setelah pesan sukses instalasi muncul, harap tutup program Powershell (Command Prompt), lalu buka kembali. Jalankan `ruby -v` untuk verifikasi. 2.1. Install ruby toolchain tool di MSYS2. ``` scoop install msys2 ``` Setelah pesan sukses instalasi muncul, harap tutup program Powershell (Command Prompt), lalu buka kembali. Install toolchain dengan jalankan `ridk install`. Pilih nomor 3. Setelah sukses, "[1,2,3]" akan berubah menjadi "[]", artinya berhasil. Anda hanya perlu tekan ENTER. ![ridk install](https://i.imgur.com/Aq5D06B.png) ##### 3. Install Jekyll gem, beserta Bundler gem. Buka CMD atau Powershell, jalankan: ``` gem install jekyll bundler ``` ![Install gems](https://i.imgur.com/SlsAdBO.png) Perintah di atas akan menginstall Ruby gem bernama **jekyll** dan **bundler**. 1. **jekyll** program utama Jekyll. 2. **bundler** adalah gem depedencies management, jadi kita bisa install banyak gem dengan versi tercatat dan konsisten. Phew. ![](https://i.imgur.com/IiToJg2.png) Jekyll dan Bundler gems terinstall dan siap dipakai. ### Penggunaan Jekyll ## Publikasi dan Penyebaran situs Situs yang dibangun menggunakan Jekyll dapat digunakan dalam banyak cara karena sifat statis dari output yang dihasilkan. Inilah beberapa cara yang paling umum: ### 1. Secara Manual ### 2. Secara Otomatis Meliputi: - _Continuous Integration Service_ - _Git post-receive hook_ Dokumentasi dari Jekyll mengenai ini bisa didapati di halaman: https://jekyllrb.com/docs/deployment/automated/ ### 3. Dengan Pihak Ke-Tiga (3rd Party) Meliputi: - GitHub Pages - CloudCannon - Aerobatic - Netlify Dokumentasi dari Jekull mengenai ini bisa didapati di halaman: https://jekyllrb.com/docs/deployment/third-party/ ## Jekyll (atau sembarang software Static Generator) vs HTMLy Katakanlah, pemuda Indonesia juga mengembangkan software publikasi bernama HTMLy yang di-_maintener_ oleh pendiri forum Bersosial.com sendiri, tidak lain @Dan. Mungkin anda heran bertanya-tanya: apa bedanya? Jekyll dan HTMLy, kedua-duanya tidak memakai database, kedua-duanya juga secara fungsionalitas untuk blogging dan web _publishing_; Keduanya juga menggunakan bahasa pemprograman masing-masing: Ruby untuk Jekyll dan PHP untuk HTMLy. Beda? Jelas beda. Saya ulang lagi. Agar lebih tegas, mungkin anda bisa baca kembali bagian "" ---- Garett PHG, January 2019.