Project: Website “Profil Kelas”
Tujuan: Mempraktikkan lebih dari 1 kali upload ke GitHub:
- Upload awal (file pertama)
- Upload kedua (tambah file baru)
- Upload ketiga (ubah isi koding)
Kondisi Awal (Upload Pertama)
Di folder project-pertama, buat index.html:
<!DOCTYPE html>
<html>
<head>
<title>Profil Kelas</title>
</head>
<body>
<h1>Selamat Datang di Kelas Web</h1>
<p>Ini adalah website sederhana.</p>
</body>
</html>
Lalu simpan ke GitHub:
git add .
git commit -m "Upload awal index.html"
git push origin main
Ini adalah upload pertama.
Tahap 2 – Tambah File Baru (Upload Kedua)
Tambahkan file baru bernama about.html:
<!DOCTYPE html>
<html>
<head>
<title>Tentang Kelas</title>
</head>
<body>
<h1>Tentang Kelas Ini</h1>
<p>Kelas ini belajar HTML, Git, GitHub, dan Vercel.</p>
</body>
</html>
Sekarang jalankan:
git status
git add .
git commit -m "Menambah halaman about.html"
git push origin main
Ini adalah upload kedua (karena ada file baru).
Di GitHub akan terlihat file about.html muncul.
Tahap 3 – Ubah Isi Koding (Upload Ketiga)
Ubah isi index.html menjadi:
<!DOCTYPE html>
<html>
<head>
<title>Profil Kelas</title>
</head>
<body>
<h1>Selamat Datang di Kelas Web</h1>
<p>Belajar dari nol sampai website online.</p>
<a href="about.html">Tentang Kelas</a>
</body>
</html>
Lalu simpan perubahan:
git add .
git commit -m "Update isi index.html dan tambah link"
git push origin main
Ini adalah upload ketiga (karena ada perubahan kode).
Hasil Pembelajaran
Siswa memahami bahwa:
| Aksi | Perintah Git |
|---|---|
| Upload pertama | git add . → git commit → git push |
| Tambah file baru | git add . → git commit → git push |
| Ubah isi kode | git add . → git commit → git push |
Intinya:
Setiap ada perubahan (file baru / edit kode),
ulangi 3 langkah sakti:
git add .
git commit -m "pesan perubahan"
git push
Vercel akan otomatis memperbarui website setiap kali git push dilakukan.
