Mengganti Theme Jekyll pada GitHub

Salah satu nilai plus Jekyll adalah fleksibilitas untuk mengubah theme/tema. Meskipun merupakan web statis, nyatanya di jagad internet banyak sekali theme yang bisa digunakan untuk berbagai keperluan, mulai dari halaman biodata sampai web ecommerce. Tidak percaya? Silakan Googling sendiri. Hanya saja, mengganti theme sebuah blog berbasiskan Jekyll ternyata tidak semudah mengganti theme pada Wordpress yang cukup dilakukan dengan beberapa klik saja. Ada “keruwetan” sendiri. Setidaknya itu yang sama alami dalam beberapa hari terakhir saat mengganti theme blog NURANDI.id; yang awalnya beautiful-jekyll saya ganti dengan Pixyll. Sebenarnya kedua theme itu hampir serupa. Sama-sama theme minimalis yang fokus pada readability. Tapi saya merasa Pixyll ini lebih fresh. Baiklah!

Blog NURANDI.id sebenarnya merupakan sebuah Github page. Seluruh tulisan, kode, theme dan material lain untuk membangun blog saya hosting di GitHub. Selain sengaja menjadikan blog bersifat open source, GitHub sebagai layanan version control memberikan keuntungan karena saya bisa mengetahui seluruh perubahan yang terjadi pada blog saya. Sebenarnya mudah saja untuk mengganti theme dengan lima langkah berikut:

1. clone repo blog,
2. download theme Pixyll,
3. ganti theme sebelumnya dengan theme dari Pixyll,
4. atur file _config.yml dan file lainnya,
5. push back ke Github. Selesai.

Hanya saja, cara ini tidak hanya membuat saya kehilangan version history dari Pixyll, tetapi juga “terputus” dari “upstream repository”-nya sehingga sulit mendapatkan update dan menghilangkan kesempatan untuk berkolaborasi. Karena itulah, cara ini tidak saya lakukan karena kedua hal ini bertolak belakang dengan alasan saya berpindah dari Wordpress ke GitHub/Jekyll. Itu yang membuat proses ini sedikit “ruwet”.

Sebagai pengguna Git pemula, saya beruntung menemukan artikel dari Enda dan sebuah jawaban dari Daniel Pelsmaeker di Stackoverflow yang secara ringkas menjelaskan cara mengganti theme Jekyll di GitHub sekaligus secara tidak langsung mengajari saya tentang branching. Dengan menggunakan Git Bash, ini tahapannya:

1. Clone repositori blog ke lokal

   git clone https://github.com/nurandi/nurandi.github.io.git
   cd nurandi.github.io
   

2. Buat orphan branch, misalnya newtheme, pastikan kosong

   git checkout --orphan newtheme
   git rm -rf .
   git clean -dfx
   

3. Pull theme dari upstream remote repository ke branch tersebut. Saya pull master branch dari theme Pixyll

   git remote add upstream https://github.com/johnotander/pixyll.git
   git fetch upstream
   git pull upstream master
   

4. Instal Gems yang diperlukan, lalu jalankan Jekyll

   bundle exec jekyll serve
   

5. Merge post, config, dan lain-lain. Kita dapat menggunakan perintah git checkout untuk meng-copy folder/file dari theme sebelumnya, misalnya

   git checkout master -- _posts
   

   Sebagai alternatif, copy dengan nama baru, lalu merge secara manual

   git show master:_config.yml > _config.yml.old
   

   Restore apabila ada file/folder yang tertimpa

   git checkout upstream/master -- about.md
   

   Beberapa file/folder yang saya copy, merge, modifikasi dan hapus adalah:

   • Artikel di folder _posts
   • Image di folder img
   • File konfigurasi _config.yml
   • File CNAME
   • File Gemfile
   • File favicon
   • File/folder penunjang lain seperti _Rmd, _src, dll

6. Jangan lupa commit

   git add .
   git commit -m "switch theme"
   

   Jalankan kembali Jekyll untuk melihat perubahan sesuai dengan yang diinginkan

7. Ganti seluruh konten pada branch master dengan newtheme

   git checkout newtheme
   git merge -s ours master --allow-unrelated-histories
   git checkout master
   git merge newtheme
   

8. Push ke remote repository

   git push
   

9. Hapus branch newtheme untuk menghilangkan jejak

   git branch -d newtheme
   

Selesai!

Jika suatu saat ingin meng-update theme, termasuk perubahan pada upstream, tinggal jalankan

git pull upstream master

Sesuaikan jika ada conflict .

Semoga bermanfaat :)