Read Mode Home  

Cara Menggunakan Jekyll

10 May 2017 » blogging, tutorial, jekyll

Singkat saja, postingan ini akan memberikan sedikit tutorial singkat cara menggunakan jekyll mulai dari installasi sampai menggunakannya.

Mulai dari cara install, paling mudah untuk menggunakan jekyll adalah dengan GitHub Page yang tersedia secara gratis tapi pada artikel akan mulai dari yang paling mendasar yaitu install pada perangkat komputer/laptop secara lokal sama seperti konsep XAMPP yang menjalankan apache server secara lokal. Perlu diketahui pada artikel ini hanya akan menjelaskan cara install secara lokal untuk perangkat Linux/Mac OS saja, jika menggunakan Windows silahkan di skip dan langsung membaca bagian “Menggunakan jekyll pada GitHub Page.

Install jekyll secara lokal

Menurut website resmi jekyll untuk menggunakannya pada perangkat Linux/Unix/Mac OS maka perangkat harus sudah terinstall Ruby Versi 2 atau di atasnya, RubyGems serta GCC dan Make.

Requirements

Installing Jekyll should be straight-forward if all requirements are met. Before you start, make sure your system has the following:

* GNU/Linux, Unix, or macOS
* Ruby version 2.0 or above, including all development headers
* RubyGems
* GCC and Make (in case your system doesn’t have them installed, which you can check by running gcc -v and make -v in your system’s command line interface)

Jika perangkat sudah terdapat program yang disebutkan tadi maka bisa langsung menginstall jekyll melalui terminal, jika belum maka install terlebih dahulu program yang disebutkan sebelumnya. Untuk sistem operasi Linux dapat menggunakan package manager masing-masing pada sistem operasi seperti Ubuntu menggunakan apt-get atau Arch Linux bisa menggunakan pacman atau yaourt, untuk Mac OS bisa menggunakan Homebrew.

Setelah yakin semua program yang dibutuhkan terinstall, ketik perintah di bawah pada terminal untuk memulai install hingga mejalankannya pada perangkat.

# Install Jekyll dan Bundler gems melalui RubyGems
~ $ gem install jekyll bundler

# Membuat website jekyll baru pada folder ./blog-jekyll
~ $ jekyll new blog-jekyll

# Masuk ke dalam folder website yang baru dibuat
~ $ cd blog-jekyll

# Setelah masuk, bangun website dan jalankan pada server lokal
~ $ bundle exec jekyll serve

# Sekarang buka http://localhost:4000 pada browser

Jika mendapatkan pesan seperti gambar di bawah ini maka jekyll telah berjalan secara lokal pada perangkat, setelah berjalan maka Jekyll telah siap untuk di ubah sesuai kreasi.

Terminal Jekyll

Menggunakan jekyll pada GitHub Page

Untuk menggunakan jekyll dengan GitHub Page sebenarnya lebih mudah dibandingkan install secara lokal, dan cara pertama juga sebenarnya tidak terlalu diperlukan jika tidak inging melakukan kostumisasi yang terlalu banyak pada tampilan jekyll. Untuk menggunakan jekyll pada GitHub Page tentunya harus memiliki akun GitHub terlebih dahulu, silahkan daftar secara gratis di halaman ini Join GitHub setelah itu buka halaman Jekyll Now lalu klik tombol fork seperti gambar di bawah ini, fork adalah sebuah cara untuk melakukan duplikasi sebuah project pada GitHub sehingga kita dapat memberikan kontribusi terhadap project tersebut atau dimodifikasi untuk penggunaan pribadi.

Jekyll Now

Setelah selesai fork, ubah nama repository sesuai dengan username GitHub yang digunakan (username.github.io), contoh akun blog ini memiliki username “zerosite” maka pada nama repository menjadi “zerosite.github.io”, setelah mengganti nama repository lalu save maka blog sudah dapat diakses melalui alamat yang telah dimasukkan pada nama repository.

Rename Repository

Jika ingin mengganti template bisa dilakukan dengan mengubah file CSS dasar sesuai dengan keinginan atau memakai template yang sudah jadi, misalnya Template Hyde merupakan salah satu template jekyll yang cukup terkenal karena desainnya yang sederhana tapi elegan, untuk menggunakannya silahkan fork template dari repository GitHub yang telah disediakan (Hyde) atau menggunakan template blog ini silahkan form dari github Zerosite, sebenarnya template ini merupakan hasil modifikasi dari template lainnya dengan terinspirasi dari tampilan hitam putih template Hyde yang elegan hingga akhirnya seperti sekarang ini, silahkan baca bagian README pada repository blog ini untuk informasi lebih lanjut.

Related Posts