Membuat Web dengan Jekyll Serve

07 Mar 2025 -

Membuat Web dengan Jekyll Serve

Untuk membuat personal web dengan Jekyll dan publish di GitHub Page ikuti langkah-langkah berikut ini:

Buat akun di GitHub dengan username sesuai nama masing-masing.
Buat repository baru dengan nama username dan github.io contoh:
jika username nya adalah mailaazizaa
maka nama repository buat seperti ini mailaazizaa.github.io

Clone repository tersebut ke lokal

git@github.com:mailaazizaa/mailaazizaa.github.io.git

Masuk ke dalam folder repository tersebut kemudian install Jekyll dengan perintah berikut melaui terminal
```
gem install jekyll bundler
```
Jalankan perintah bundle init untuk inisialisasi folder terebut sebagai proyek jekyll seperti perintah berikut ini. Hasil dari perintah tersebut adalah file baru dengan nama Gemfile.
```
bundle init
```
Edit file Gemfile dan tambahkan kode berikut pada baris paling bawah
```
gem "jekyll"
```
Buat file baru dengan nama index.html, kemudian isi dengan struktur dasar HTML
Jalankan jekyll build untuk build web yang telah dibuat sehingga menhasilkan directory _site.
```
jekyll build
```
9.Kemudian jalankan perintah jekyll serve untuk menjalankan web yang telah dibuat di web browser dengan alamat http://localhost:4000 atau 127.0.0.1:4000
```
jekyll serve
```
Jika web telah berhasil dibuka, edit file Gemfile.lock dengan menambahkan platform linux pada bagian platform seperti pada gambar berikut.
```
PLATFORMS
  x86_64-linux
```
Untuk push repositori ke GitHub ketik perintah-perintah berikut
```
git add .
git commit -m "isi pesan commit"
git push
```

Membuat List Teman

Ubah file index.html yang telah dibuat sebelumnya menjadi:

<!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>Nama: Maila Aziza</h1>
    <p>Deskripsi Diri: Saya merupakan mahasiswa semester 2 prodi Teknik Informatika di Politeknik Negeri Lhokseumawe.</p>
       <h2>Berikut list Teman-teman saya di kelas:</h2>
       <ul>
        <li><a href="https://mailaazizaa.github.io/" target="_blank">Maila Aziza</a></li>
       </ul> 
</body>
</html>

Untuk membuat list teman, buat file baru dengan nama friends.md, kemudian isi dengan kode berikut:

---
layout: default
title: Friends
---
# Friends page

Berikut teman-teman saya di kelas:
- [Maila Aziza](https://mailaazizaa.github.io/)
- ...