Membuat Personal Website dengan GitHub dan Jekyll

Dalam dunia digital yang terus berkembang, memiliki personal website menjadi semakin penting bagi individu, profesional, dan bahkan pemula dalam industri teknologi informasi. Personal website adalah sarana yang efektif untuk memperkenalkan diri, memamerkan karya, dan berbagi informasi dengan audiens global.

Dalam artikel ini, saya akan membahas cara membuat personal website menggunakan GitHub dan Jekyll. Dengan menggunakan GitHub sebagai platform hosting, website Anda akan menjadi publik dan dapat diakses oleh siapa saja. Anda juga akan belajar cara menggunakan fitur GitHub Pages untuk hosting website secara gratis.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Pemilihan Template

Pilih template yang diinginkan disini:

Free Jekyll Themes

Tutorial kali ini akan menggunakan template berikut:

GitHub - alshedivat/al-folio: A beautiful, simple, clean, and responsive Jekyll theme for academics

Instalasi Ruby

Pertama-tama, silahkan buat environment conda baru, aktivasi, dan ikuti tutorial instal Ruby menggunakan Rbenv pada web berikut.

How to Install Ruby on Ubuntu 20.04 {Step-by-Step}

Pembuatan repository github.io

Fork repository dari template yang diinginkan dan diberi nama {username}.github.io.

Setelah sukses fork template tersebut, salin link HTTPS-nya.

Clone repository yang telah dibuat di lokal mesin.

Masuk ke folder tersebut.

cd {name}.github.io

Instalasi bundle

Instalasi bundle dilakukan menggunakan perintah berikut.

bundle install

Setelah instalasi sukses, jalankan aplikasinya dengan perintah berikut.

bundle exec jekyll serve --lsi

Lalu buka Server address tersebut di browser.

Ganti isi website sesuai keinginanmu

Buka folder hasil clone di text editor favoritmu. Disini saya menggunakan VS Code. Untuk mengganti isi website, cara yang paling mudah adalah dengan menggunakan Search pada VSCode. Sebagai contoh kita ingin mengganti biography kita di website, maka dapat dicari dengan keyword “biography” dan akan muncul file yang memiliki kata tersebut, yaitu di about.md file. Selanjutnya ubah isi biography sesuai keinginan.

Untuk melihat hasil perubahannya, simpan file dan refresh (F5) browser. Hasilnya perubahannya akan muncul di browser.

Deploy website ke GitHub

Sebelum bisa deploy website, kita perlu mengatur Workflow permissions. Caranya masuk ke GitHub repository dan Pilih Settings > Actions > General.

Set Workflow permissions menjadi Read and write permissions. Lalu, centang bagian Allow GitHub Actions to create and approve pull requests.

Untuk melakukan deploy, silahkan stage, commit, dan push perubahan terlebih dahulu di lokal komputer.

git add *
git commit -m "Revise the website."
git push

Lalu, masuk kembali ke repository GitHub dan pilih tab Action. Disini anda akan melihat progress deploy yang telah di push.

Tunggu hingga proses deploy selesai dan Pilih tab Settings > Pages.

Lalu, set bagian Branch dengan gh-pages, bukan master!

Setelah disimpan dan refresh halaman (F5), maka link situs akan muncul di bagian atas.

Silahkan buka link tersebut untuk menuju website github.io.

Contoh hasil personal website saya dapat dilihat disini:

Tirana Noor Fatyanosa

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Terima kasih telah membaca artikel ini. Semoga bisa memberikan wawasan dan inspirasi untuk membuat personal website yang mudah dan menarik.