Miral Achmed
Author of achmiral.id, FPV Drone Racing Pilot, Rubyist, Currently Student at AMIKOM Yogyakarta

Tingkatkan Kecepatan Navigasi Blog Anda Dengan Turbolinks

Tingkatkan Kecepatan Navigasi Blog Anda Dengan Turbolinks

Halo teman-teman, kali ini saya ingin berbagi tutorial mengenai update terbaru pada blog ini. Pada beberapa waktu yang lalu saya menambahkan Turbolinks pada blog ini.

Turbolinks adalah pustaka Javascript yang digunakan untuk meningkatkan performa navigasi pada Website / Blog Anda layaknya Single Page Application (SPA). Versi terbaru turbolinks adalah 5.2.0 (ketika tulisan ini dibuat).

Tutorial ini dibuat untuk teman-teman yang menggunakan jekyll.

Langkah - langkah:

Download Turbolinks Versi Terbaru pada link berikut ini Turbolinks v5.2.0.

Ekstrak dan copy file turbolinks.js yang terdapat pada folder dist/turbolinks.js, ke folder assets/js/turbolinks.js

3. Tambahkan script tag

Tambahkan script tag pada file _layouts/default.html, di dalam tag <head></head>


<script src="{{ site.baseurl }}/assets/js/turbolinks.js" type="text/javascript" charset="utf-8">
</script>

4. Modifikasi file JS

Lakukan modifikasi pada kode javascript yang disediakan oleh template yang Anda gunakan seperti berikut ini. Pada blog ini menggunakan template Mediumish, jadi yang modif adalah file assets/js/mediumish.js

// assets/js/mediumish.js

// Before
jQuery(document).ready(function() {
  // mediumish js code
});

// After
var ready = function() {
  // mediumish js code
}

jQuery(document).ready(ready);
jQuery(document).on("turbolinks:load", ready);
4. Done!

Selesai, saatnya deploy ke github pages :grinning:

Terima kasih untuk teman-teman yang sudah meluangkan waktunya untuk membaca tulisan ini, semoga bisa bermanfaat. Salam Rubyist!! :smile: :smile: :smile:


Referensi:

  • https://github.com/turbolinks/turbolinks
  • https://blog.appsignal.com/2018/05/23/speeding-up-your-apps-navigation-with-turbolinks.html
  • http://patrickoscity.de/blog/turbolinks-with-jekyll

comments powered by Disqus