Cara deploy file HTML statis ke GitHub Pages dapat dilakukan dengan mudah melalui dua metode utama: langsung mengunggah file melalui antarmuka web (browser) atau menggunakan Git melalui terminal/command line. GitHub Pages adalah layanan hosting gratis yang disediakan oleh GitHub untuk mempublikasikan situs web statis langsung dari repositori Anda.
Sebelum memulai, pastikan Anda telah memiliki akun GitHub yang aktif dan file proyek web statis Anda (minimal berisi file index.html) sudah tersimpan di dalam komputer atau direktori lokal.
Metode 1: Deploy Melalui Web Browser (Tanpa Git)
Metode ini sangat cocok bagi pemula yang tidak ingin menggunakan command line atau terminal. Anda hanya perlu membuat repositori baru dan mengunggah file HTML secara manual.
- Login ke akun GitHub Anda di github.com.
- Klik tombol New di pojok kiri atas untuk membuat repositori baru.
- Beri nama repositori Anda (misalnya:
portofolio), pilih opsi Public, lalu centang "Add a README file". Klik Create repository. - Di halaman repositori, klik tombol Add file lalu pilih Upload files.
- Seret dan letakkan (drag and drop) seluruh file HTML, CSS, dan aset gambar Anda ke area unggah. Pastikan file utama Anda bernama
index.htmldi direktori root. - Klik tombol hijau Commit changes di bagian bawah.
- Masuk ke tab Settings di menu atas repositori Anda.
- Di bilah sisi kiri, cari dan klik menu Pages (di bawah bagian Code and automation).
- Pada bagian Build and deployment > Branch, ubah pilihan dari None menjadi main (atau master), biarkan direktori tetap
/ (root), lalu klik Save. - Tunggu 1-2 menit, muat ulang halaman. Tautan (URL) situs web Anda akan muncul di bagian atas halaman Settings > Pages tersebut.
Metode 2: Deploy Menggunakan Git (Terminal / Command Line)
Bagi pengembang yang ingin memperbarui kode secara berkala dengan cepat, menggunakan Git adalah cara standar industri yang paling efisien.
# 1. Buka terminal di folder project Anda dan inisialisasi Git
git init
# 2. Tambahkan semua file ke staging area
git add .
# 3. Lakukan commit pertama
git commit -m "Commit pertama website statis"
# 4. Hubungkan dengan repositori GitHub Anda
git remote add origin https://github.com/username-anda/nama-repo.git
# 5. Ubah branch utama menjadi main dan dorong ke GitHub
git branch -M main
git push -u origin main
Setelah kode terdorong ke GitHub, masuk ke menu Settings > Pages di repositori Anda, lalu atur sumber deployment ke branch main seperti pada langkah nomor 9 dan 10 di Metode 1.
Tabel Perbandingan Metode Deployment GitHub Pages
| Parameter | Upload via Browser | Deploy via Git Terminal |
|---|---|---|
| Tingkat Kesulitan | Sangat Mudah (Pemula) | Menengah (Butuh Instalasi Git) |
| Kecepatan Update | Lambat (harus drag-drop ulang) | Cepat (cukup git push) |
| Kebutuhan Software | Hanya Browser | Git CLI terinstal di komputer |
| Skalabilitas Proyek | Kurang cocok untuk proyek besar | Sangat ideal untuk proyek kompleks |
Troubleshooting & Tips Lapangan
Jika situs web Anda menampilkan error 404 Not Found setelah proses deploy selesai, periksa beberapa hal berikut:
- Pastikan nama file halaman utama Anda benar-benar tertulis huruf kecil semua:
index.html(bukanIndex.htmlatauINDEX.HTML). - Periksa apakah Anda telah mengatur sumber branch di menu Settings > Pages dengan benar.
- Jika menggunakan asset eksternal (CSS/JS/Gambar), pastikan path tautan menggunakan relative path (contoh:
<link rel="stylesheet" href="style.css">) alih-alih absolute path lokal komputer Anda.