Praktikum 2

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.


1. Siapkan Repository GitHub

  1. Buat repository baru di GitHub dengan nama sesuai username kamu, misalnya:

    mhafidzfiransyah.github.io
    
  2. 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.


2. Inisialisasi Jekyll dan Bundler

Di dalam folder repository lokal, jalankan:

gem install jekyll bundler
bundle init

Perintah tersebut akan menghasilkan file Gemfile.


3. Tambahkan Jekyll ke Gemfile

Buka file Gemfile, lalu tambahkan baris berikut:

gem "jekyll"

Kemudian install dependensi-nya:

bundle install

4. Buat File 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>

5. Build dan Jalankan Jekyll

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 🎉


6. Edit Platform di Gemfile.lock (Opsional)

Jika kamu mengalami error platform saat push ke GitHub Pages:

  1. Buka file Gemfile.lock
  2. Cari bagian PLATFORMS
  3. Tambahkan:
x86_64-linux

Jangan sampai typo, dan pastikan indentasinya benar.


7. Push ke GitHub

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.