Cara Hosting Gratis GitHub untuk File HTML dan JavaScript

Membuat website statis berbasis HTML, CSS, dan JavaScript kini tidak lagi membutuhkan sewa server bulanan yang mahal. Banyak developer pemula dan siswa kejuruan IT mencari solusi praktis untuk mempublikasikan proyek portofolio mereka secara online. Oleh karena itu, memanfaatkan GitHub Pages merupakan langkah cerdas untuk meluncurkan halaman web tanpa mengeluarkan biaya sepeser pun.

GitHub Pages menyediakan layanan hosting statis langsung dari repositori publik Anda. Selain hemat anggaran, layanan ini telah dilengkapi sertifikat SSL gratis serta integrasi CDN global berkecepatan tinggi.

Keuntungan Memilih Cara Hosting Gratis GitHub

Sebelum masuk ke tahap teknis, Anda perlu memahami alasan platform ini sangat populer di kalangan pengembang web:

• Biaya Nol Rupiah: Anda tidak perlu berlangganan paket hosting cPanel atau VPS untuk memajang proyek statis.
• Keamanan Terjamin (HTTPS): Repositori publik otomatis memperoleh enkripsi SSL aktif tanpa perlu konfigurasi sertifikat manual.
• Performa Tinggi: Konten website dilayani langsung oleh jaringan Content Delivery Network (CDN) milik GitHub.
• Kolaborasi Mudah: Setiap pembaruan kode via Git akan langsung memperbarui tampilan website secara otomatis.

Meskipun demikian, GitHub Pages dirancang khusus untuk file statis. Jika proyek Anda membutuhkan database server-side seperti MySQL atau runtime PHP, Anda perlu menghubungkannya dengan layanan REST API eksternal.

Persiapan Struktur File HTML dan JavaScript

Agar sistem GitHub dapat membaca berkas dengan tepat, susunan direktori proyek harus rapi sejak awal. File titik masuk utama wajib bernama index.html dan diletakkan di folder terluar (root directory).

Struktur direktori standar yang disarankan:

Plaintext

portofolio-web/
├── index.html
├── style.css
├── app.js
└── images/
    └── logo.png

Pastikan Anda memanggil berkas JavaScript menggunakan jalur relatif (relative path) di dalam index.html. Contohnya:

HTML

<script src="app.js"></script>

Hindari penggunaan absolute path seperti /app.js karena hal tersebut sering memicu galat 404 ketika website dibuka pada subdirektori repositori.

Panduan Langkah Demi Langkah Cara Hosting Gratis GitHub

Berikut adalah alur taktis mengunggah dan mengaktifkan website Anda dalam hitungan menit:

1. Buat Repositori Baru di GitHub

• Masuk ke akun Anda di GitHub.com.
• Klik tombol New untuk membuat repositori baru.
• Tulis nama repositori, misalnya web-portofolio.
• Pastikan visibilitas repositori disetel ke Public.
• Centang opsi Add a README file, kemudian klik Create repository.

2. Unggah File HTML dan JavaScript

• Pada halaman repositori yang baru saja dibuat, klik menu Add file lalu pilih Upload files.
• Seret seluruh file proyek Anda (index.html, style.css, app.js, dan folder gambar) ke area unggah.
• Gulir ke bawah, lalu klik tombol Commit changes.

3. Aktifkan Fitur GitHub Pages

• Masuk ke tab Settings pada menu repositori bagian atas.
• Pilih sub-menu Pages pada bilah navigasi sebelah kiri.
• Pada opsi Build and deployment > Source, pilih Deploy from a branch.
• Pada bagian Branch, pilih branch main dan biarkan foldernya pada opsi / (root).
• Klik tombol Save.

Verifikasi dan Pengujian Website

Setelah menekan tombol simpan, GitHub Actions akan menjalankan proses deploy otomatis. Tunggu proses tersebut selama 1 hingga 3 menit.

Segarkan halaman pengaturan Pages. Tautan website Anda akan muncul di bagian atas dengan format:

[https://username.github.io/nama-repositori/](https://username.github.io/nama-repositori/)

Klik tautan tersebut untuk memastikan seluruh elemen HTML dan fungsi logika JavaScript bekerja dengan sempurna. Jika tampilan tampak polos atau interaksi skrip macet, buka menu inspect element browser untuk memeriksa apakah ada aset berkas yang gagal dimuat.

Ingin menghubungkan GitHub Pages ini ke nama domain .my.id atau .com pilihan Anda sendiri? Tunggu untuk pembahasan panduan custom domain berikutnya!