28 Feb 2025 - M. Hafidz Firansyah
Membuat index.html di Proyek Jekyll
Langkah-langkah ini akan menuntunmu dari cloning repository hingga menjalankan Jekyll secara lokal dengan halaman index.html buatan sendiri.
Buat repository baru di GitHub dengan nama sesuai username kamu, misalnya:
mhafidzfiransyah.github.io
Clone repository tersebut ke lokal:
git clone https://github.com/username/username.github.io.git
cd username.github.io
Gantilah username dengan akun GitHub kamu sendiri.
Di dalam folder repository lokal, jalankan:
gem install jekyll bundler
bundle init
Perintah tersebut akan menghasilkan file Gemfile
.
Buka file Gemfile
, lalu tambahkan baris berikut:
gem "jekyll"
Kemudian install dependensi-nya:
bundle install
index.html
Buat file baru bernama index.html
di folder root dan isi dengan HTML berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Halo Dunia</h1>
</body>
</html>
Build situs dengan:
jekyll build
Perintah ini akan menghasilkan folder _site
yang berisi hasil build website kamu.
Kemudian jalankan server lokal:
jekyll serve
Jika berhasil, akan muncul link seperti:
http://localhost:4000
Buka link tersebut di browser — tadaa! Halaman kamu sudah tampil 🎉
Gemfile.lock
(Opsional)Jika kamu mengalami error platform saat push ke GitHub Pages:
Gemfile.lock
PLATFORMS
x86_64-linux
Jangan sampai typo, dan pastikan indentasinya benar.
Setelah semuanya berjalan lancar, lakukan push ke GitHub:
git add .
git commit -m "pub: first publish"
git push
📌 Sekarang kamu sudah berhasil membuat dan menjalankan proyek Jekyll lokal dengan halaman statis buatanmu sendiri.