Profile Picture

Personal Web dengan Jekyll dan GitHub Page

07 Mar 2025 - Muhammad Fathurrahman

Langkah-Langkah Membuat Personal Web dengan Jekyll dan GitHub Page


Langkah-Langkah Membuat Personal Web

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

  1. Buat akun di GitHub dengan username sesuai nama masing-masing.
  2. Buat repository baru dengan nama username dan github.io contoh:
    jika username nya adalah fyou00
    maka nama repository buat seperti ini fyou00.github.io
  3. Clone repository tersebut ke lokal
    git@github.com:fyou00/fyou00.github.io.git
    
  4. Masuk ke dalam folder repository tersebut kemudian install Jekyll dengan perintah berikut melaui terminal
    gem install jekyll bundler
    
  5. 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
    
  6. Edit file Gemfile dan tambahkan kode berikut pada baris paling bawah
    gem "jekyll"
    
  7. Buat file baru dengan nama index.html, kemudian isi dengan struktur dasar HTML
  8. 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
    
  9. Jika web telah berhasil dibuka, edit file Gemfile.lock dengan menambahkan platform linux pada bagian platform seperti pada gambar berikut.
    PLATFORMS
      x86_64-linux
    
  10. 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: Muhammad Fathurrahman</h1>
    <p>Deskripsi Diri: Saya merupakan mahasiswa semester 2 prodi Teknik Informatika di Politeknik Negeri Lhokseumawe.<br> 

      Saya lahir di Lhokseumawe pada 30 Januari 2006.</p>
       <h2>Berikut list Teman-teman saya di kelas:</h2>
       <ul>
        <li><a href="https://fyou00.github.io/" target="_blank">Muhammad Fathurrahman</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:
- [Muhammad Fathurrahman](https://fyou00.github.io/)
- ...