Latar Belakang

CMS

WordPress

Website: wordpress.com

“Migrasi Blog 2.0”. Ya, sesuai judul dari post ini, BanditHijo (R)-Chive, bukan yang pertama kali saya migrasikan. Pertama kali saya menulis blog, saya memilih menggunakan WordPress sebagai platform yang saya percayakan untuk menampung tulisan-tulisan saya. Saya perkirakan mungkin sejak 2010 saya mulai membuat post pertama saya dengan WordPress.

Dengan menggunakan WordPress, saya belajar mengenal berbagai macam hal yang berkaitan dengan teknologi web, seperti pengguaan CMS (Content Management System), belajar mengenal shared hosting dan custom domain.

Dengan WordPress, tidak begitu kesulitan bagi saya untuk memodifikasi WordPress theme yang saya unduh dari official website karena sebelum-sebelumnya saya memang sudah mengenal HTML dan CSS sejak masih SMA.

Blogspot

Website: blogger.com

Singkat cerita, tahun 2012, saya berkeinginan untuk mencoba platform lain. Saya memutuskan untuk berpindah platform dari WordPress dan beralih menggunakan Blogger atau yang lebih dikenal dengan Blogspot, sebuah CMS yang dipayungin oleh Google. Saya cukup lama menggunakan Blogspot, hingga 2018 Maret, tepat dimana saya pun bermigrasi untuk yang kedua kalinya.

Static Site Generator

Sejak 2017, saya mendengar beberapa teman-teman di komunitas GNU/Linux, menulis artikel-artikel mereka menggunakan Static Site Generator. Saya pun tertarik dan mulai mencari tahu sendiri dengan modal percakapan yang pernah saya tangkap, yaitu “menggunakan Hexo”. Saya pun mencoba mencari tahu platform static site generator yang bernama Hexo. Dan mulai saat inilah keinginan untuk bermigrasi ke platform lain dimulai. Terlebih lagi dengan menggunakan statis site generator kita dapat meletakkan source dari blog kita di GitHub dan membuatnya menjadi GitHub page yang berdomain username.github.io.

Ketertarikan saya dengan Static Site Generator karena :

1. Kita dapat memproduksi tulisan dengan cepat sekaligus memiliki layout yang sudah otomatis rapi, karena ditulis menggunakan Markdown format.
2. Saya berkesempatan untuk membuat template saya sendiri dari nol.
3. Dengan static site generator saya dapat menggunakan GitHub sebagai hosting dan berganti sub domain, yang menurut saya username.github.io lebih keren ketimbang username.blogspot.com atau username.wordpress.com. Hehe =)
4. Semua orang tidak dapat membuatnya dengan mudah.

Hexo

Language: JavaScript

Templates: EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko

Website: hexo.io

Static Site Generator ini, adalah yang pertama kali memperkenalkan saya tentang konsep dari Static Site Generator. Saya belajar dari berbagai macam sumber, mulai dari YouTube, hingga artikel-artikel di internet. Proses saya belajar memakan waktu lama, hahaha, saya juga tidak begitu mengerti kenapa saya sangat malas dikala itu. Hingga 2018 Januari, saya memutuskan untuk serius mendalami Hexo.

Untuk proses produksi, seperti penerbitan tulisan saya tidak mengalami kendala, karena saya sudah terbiasa menulis menggunakan format Markdown. Konvensi lain seperti pengaturan page, post, draft, assets, dll, tidak membuat saya kebingungan. Namun, begitu sampai tahap “Build your own theme from scratch”, inilah tahap dimana saya mulai kebingungan dengan layout convention yang dimiliki oleh Hexo. Saya yakin, saya kebingungan karena ini pertama kalinya saya mengenal layout formating menggunakan EJS (Embedded JavaScript). Karena kesulitan ini saya mencoba untuk beralih mencoba static site generator lain, yaitu Hugo.

Hugo

Language: Go

Templates: Go

Website: gohugo.io

Selain Hexo, saya juga sudah mengenal nama lain, yaitu Hugo, namun karena saya belum pernah sama sekali belajar bahasa pemrograman Go, saya pikir akan sulit, sehingga saya memutuskan untuk tetap menggunakan Hexo.

2018 Maret 18, tepat siang hari, setelah semalaman saya mengalami frustasi dengan Hexo, saya pun langsung berpindah menggunakan Hugo, mencari tutorial-tutorial di YouTube yang dapat saya pelajari dengan cepat. Sekitar jam 10 malam, saya sudah berhasil membuat template saya sendiri. Rasa senang pun menggerogoti, sambil bersantai-santai mencari literatur-literatur yang saya bisa jadikan rujukan untuk menambah pengetahuan saya membuat Hugo layout yang menggunakan Go template. Hingga, akhirnya menemukan sebuah website yang menampilkan statistik terhadap static site generator yang populer, staticgen.com - Top Open-Source Static Site Generators. Website ini menggambarkan statistik bahwa Hugo menduduki peringkat kedua setelah Jekyll, static site generator yang menggunakan bahasa pemrograman Ruby. Lantas saya pun penasaran, karena sebelumnya pun saya sudah pernah belajar Ruby. Saya berfikir, kenapa tidak menggunakan Ruby yang sudah pernah saya pelajari, mungkin akan lebih mudah ketimbang melanjutkan menggunakan Hugo yang menggunakan bahasa Go, yang belum pernah saya pelajarin dasarnya. Tepat tengah malam 2018 Maret 19, saya pun mencari tahu tentang Jekyll.

Jekyll

Language: Ruby

Templates: Liquid

Website: jekyllrb.com

Karena sudah mengenal static site generator dari Hexo dan Hugo, saya tidak begitu kesulitan untuk beradaptasi menggunakan Jekyll dalam memproduksi konten. Terlebih lagi saat membuat Jekyll layout, Jekyll menggunakan Liquid, dimana Liquid ini hampir mirip seperti Jinja template dalam mengambil variable atau filters yang diperlukan, sehingga saya tidak membutuhkan waktu lama untuk mengerti dan beradaptasi.

Seperti ini contoh penggunaan Liquid.

Tags

{% if user %}
  Hello {{ user.name }}!
{% endif %}

Filters

{{ "adam!" | capitalize | prepend: "Hello " }}

Variabels

{{ page.title }}
{{ page.content }}
{{ page.url }}
{{ page.date }}

Tepat tengah malam, layout yang saya develop sudah berhasil dan sesuai dengan yang saya inginkan. Saya juga dengan mudah memahami struktur dan konvensi-konvensi dalam Jekyll layout. Saya merasa Jekyll layout memberikan saya kebebasan yang sangat banyak untuk saya mengatur sendiri mau seperti apa struktur direktori dan penamaan dari layout yang saya bangun. Mungkin karena aspek ini, saya dapat memahami mengapa Jekyll ada diperingkat teratas pada statistik staticgen.com.

Informasi

Serunya lagi, kita dapat membuat sendiri Liquid tags sesuai dengan kebutuhan kita.

Simak catatannya di sini, Membuat Tampilan Command Prompt untuk Blog dengan Jekyll Liquid Tags

Template yang Saya Gunakan

Old Template

Dari cerita-cerita di atas, saya berkali-kali menyinggung kata “layout”. Kenapa saya begitu bersikeras untuk membangun layout saya sendiri ? Karena dengan membangun layout sendiri, kita dapat dengan mudah memodifikasinya, karena kita memahami dengan baik bagaimana struktur dari layout yang kita bangun.

Saya mengadopsi desain dari blog lama saya, yang menggunakan template buatan StyleShout. Yang menurut saya, desain template ini mirip dengan default template Blogspot di awal-awal kemunculannya, hal ini sangat membuat saya bernostalgia dan betah berlama-lama memandangi template ini.

Sederhana dan old school sekali bukan?

Saya memiliki kesan yang sangat baik terhadap bentuk desain template seperti ini. Namun sayangnya, template ini belum menggunakan prinsip responsive design. Sehingga sangat kaku dan tidak fleksibel apabila diakses menggunakan smartphone atau tablet. Hal tersebut dikarenakan template ini sebagian besar mengguanakn element gambar untuk membangun tampilannya, mulai dari header hingga footer.

New Template

Atas dasar kecintaan saya terhadap warna, desain, dan layout dari template sebelumnya, saya memutuskan untuk mencoba meniru desain dari template tersebut. Tentunya sudah menggunakan prinsip responsive design. Dari cerita di atas, saya berhasil membuat template ini dengan menggunakan Go template, namun saya kurang mengerti untuk mengembangkannya lebih jauh, sehingga saya memutuskan untuk mencoba Jekyll yang menggunakan Liquid untuk membangun layout. Dan, jadilah layout yang saya inginkan. Hampir menyerupai template buatan StyleShout.

HomePage

Blog (Post List)

Page

Post

Mobile Device Wide

Hohoho, sejujurnya saya sangat menyukai layout ini. Karena saya bisa melakukan apa saja, meletakkan apa saja, dan memindahkan apa saja.

Struktur dari layout ini adalah :

├── _drafts
│
├── _includes
│   ├── _sidebar
│   │   ├── sidebar_1.html
│   │   ├── sidebar_2.html
│   │   ├── sidebar_3.html
│   │   └── sidebar_toc.html
│   │
│   ├── analytics.html
│   ├── disqus.html
│   ├── footer.html
│   ├── head.html
│   ├── header.html
│   ├── scripts.html
│   └── sidebar.html
│
├── _layouts
│   ├── baseof.html
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
│
├── _posts
│   ├── blog
│   │   └── 2016-12-04-post.md
│   │
│   └── opini
│       └── 2016-12-04-opini.md
│
├── _site
├── .sass-cache
│
├── assets
│   ├── css
│   │   ├── github-markdown.css
│   │   └── style.css
│   │
│   ├── img
│   │   ├── favicon
│   │   │   └── favicon.png
│   │   └── logo
│   │       └── logo_bandithijo.png
│   │
│   └── js
│       ├── jquery.min.js
│       └── toc.js
│
├── pages
│   ├── about.md
│   ├── blog.md
│   └── conact.md
│
├── _config.yml
├── 404.html
├── Gemfile
├── Gemfile.lock
└── index.html

Seperti yang kalian dapat lihat dari struktur di atas, bahwa template ini hanya menggunakan satu buah element gambar untuk dijadikan sebagai logo, dan element lain dikerjakan oleh CSS3. Dengan ini diharapkan dapat membuat template menjadi lebih cepat saat dimuat oleh browser.

Layout yang saya buat ini juga sudah saya obrak-abrik mengikuti kemauan saya, mungkin saja struktur dari layout ini tidak mengikuti aturan atau convention yang ada. Tapi saya senang karena dengan Jekyll, saya bisa mengeksplorasi Jekyll sebebas yang saya mau.

Mungkin soal layout ini akan saya buatkan post tersendiri. Agar lebih mendalam, karena judul dari post ini hanya sekedar memberi tahu bahwa BanditHijo (R)-Chive sudah menggunakan static site generator juga untuk membangun blog.

Akhir Kata

Rumah baru sudah nyaman, sekarang tinggal mengukir kenangan-kenangan di dalamnya.

Saya benar-benar merasakan kemudahan dalam memproduksi tulisan-tulisan dengan menggunakn Markdown format yang nantinya akan di generated oleh Jekyll untuk menjadi sebuat static site. Kemudian saya push ke GitHub agar bisa Online.

Terima kasih, untuk teman-teman yang sudah mampir dan membaca sepenggal kisah mengenai proses migrasi blog saya =)

Ucapan Terima Kasih

Berikut ini adalah nama-nama yang telah menginspirasi saya untuk bermigrasi menggunakan static site generator :

1. sucipto.net
2. epsi-rns.github.io
3. raniaamina.github.io

Lisensi

Tulisan ini dilisensikan dengan :
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)

Penulis

My journey kicks off from reading textbooks as a former Medical Student to digging bugs as a Software Engineer – a delightful rollercoaster of career twists. Embracing failure with the grace of a Cat avoiding water, I've seamlessly transitioned from Stethoscope to Keyboard. Armed with ability for learning and adapting faster than a Heart Beat, I'm on a mission to turn Code into a Product.

- Rizqi Nur Assyaufi