Cara Deploy Website dari GitHub untuk Pemula

Setelah project tersimpan di GitHub, kita dapat menggunakan repository tersebut sebagai sumber deployment.

Untuk website statis yang hanya berisi HTML, CSS, dan JavaScript, salah satu cara sederhana adalah menggunakan GitHub Pages.

Perlu dipahami sejak awal: GitHub Pages ditujukan untuk konten statis. Project PHP dan MySQL tidak dapat dijalankan seperti pada hosting PHP biasa.

Website Apa yang Cocok?

Cocok:

• HTML.
• CSS.
• JavaScript client-side.
• Portfolio statis.
• Landing page.
• Dokumentasi statis.

Tidak cocok untuk runtime server seperti:

• PHP.
• MySQL server-side.
• Session PHP.
• CRUD PHP.

1. Pastikan Repository Sudah Ada

Contoh struktur:

my-website/
├── index.html
├── style.css
└── script.js

Pastikan index.html tersedia pada lokasi yang akan dipublikasikan.

2. Push Project ke GitHub

git add .
git commit -m "Siapkan website untuk deploy"
git push

Periksa repository di GitHub dan pastikan file sudah benar.

3. Buka Settings Repository

Di repository GitHub, buka pengaturan repository lalu cari bagian Pages.

Pilih sumber deployment sesuai opsi yang tersedia untuk repository tersebut.

4. Pilih Branch

Untuk project sederhana, website dapat dipublikasikan dari branch tertentu, misalnya main, dan folder root atau folder publik yang sesuai.

Setelah konfigurasi disimpan, proses build/deploy membutuhkan waktu sebelum URL aktif.

5. Buka URL Website

GitHub Pages akan menyediakan alamat untuk website yang berhasil dipublikasikan.

Pada project site, URL biasanya memiliki path repository. Karena itu path asset perlu diperhatikan.

Masalah CSS Tidak Tampil

Misalnya repository dipublikasikan pada path:

/nama-repository/

Jika HTML menggunakan path absolut:

<link rel="stylesheet" href="/style.css">

browser dapat mencari file dari root domain, bukan root repository.

Untuk project sederhana, path relatif seperti:

<link rel="stylesheet" href="./style.css">

dapat lebih sesuai, tergantung struktur project.

Perhatikan Huruf Besar dan Kecil

File:

Logo.png

berbeda dari:

logo.png

Pastikan path di HTML sama persis dengan nama file.

Update Website Setelah Deployment

Setelah membuat perubahan:

git add .
git commit -m "Update homepage"
git push

Jika deployment terhubung ke branch tersebut, perubahan akan diproses kembali.

Deployment Tidak Langsung Berubah

Jika versi baru belum terlihat:

• Pastikan push berhasil.
• Periksa workflow atau status Pages.
• Tunggu proses deployment selesai.
• Periksa cache browser.
• Pastikan branch sumber benar.

Custom Domain

GitHub Pages dapat digunakan dengan custom domain jika DNS dikonfigurasi sesuai petunjuk layanan.

Sebelum mengubah DNS, pahami record yang dibutuhkan dan pastikan domain memang ingin diarahkan ke deployment tersebut.

HTTPS pada Custom Domain

Setelah DNS benar dan domain dikenali, HTTPS dapat tersedia sesuai dukungan GitHub Pages.

Jangan menghapus konfigurasi DNS secara acak jika verifikasi belum selesai.

Repository Public atau Private

Ketersediaan Pages untuk repository tertentu dapat bergantung pada tipe akun dan konfigurasi platform.

Terlepas dari status repository, jangan memasukkan secret ke source code frontend karena kode yang dikirim ke browser dapat dilihat pengguna.

Jangan Taruh API Secret di JavaScript Frontend

Jika JavaScript berjalan di browser, nilai yang tertanam di source dapat diakses pengguna.

API key rahasia atau credential server harus diproses melalui backend yang sesuai, bukan disembunyikan di file JavaScript publik.

Bagaimana Jika Project Menggunakan PHP?

Gunakan hosting atau platform yang menyediakan runtime PHP dan database.

Repository GitHub tetap dapat dipakai untuk version control, tetapi deployment perlu menuju server yang mendukung aplikasi tersebut.

Bagaimana Jika Project Menggunakan Build Tool?

Project frontend modern dapat menggunakan proses build sebelum menghasilkan file statis.

Dalam kasus tersebut, deployment perlu dikonfigurasi agar menjalankan build dan mempublikasikan folder hasil yang benar.

Checklist GitHub Pages

• Repository berisi website statis.
• index.html tersedia.
• Branch sumber benar.
• Path CSS, JS, dan gambar benar.
• Tidak ada secret di frontend.
• Status deployment berhasil.
• Custom domain dan HTTPS diuji jika digunakan.

Kesimpulan

GitHub dapat menjadi sumber deployment yang praktis untuk website statis. Dengan GitHub Pages, project HTML, CSS, dan JavaScript dapat dipublikasikan tanpa menyiapkan server PHP.

Untuk project dinamis, gunakan layanan hosting yang sesuai runtime aplikasinya.

Setelah menyelesaikan cluster Git & GitHub, berikutnya kita masuk ke AI & Automation.