Cara Men-deploy Website di GitHub Pages: Panduan Lengkap

Apa itu GitHub Pages?

Sebelum membahas penerapannya, ada baiknya memahami apa sebenarnya GitHub Pages. GitHub Pages adalah layanan hosting situs statis gratis yang disediakan oleh GitHub. Layanan ini mengubah file-file di repositori GitHub kita — seperti HTML, CSS, dan JavaScript — menjadi website yang aktif.

Tidak seperti hosting web tradisional, GitHub Pages dirancang khusus untuk situs statis. Ini berarti layanan ini tidak mendukung database atau bahasa sisi server seperti PHP atau Node.js, tetapi sangat cocok untuk proyek front-end, dokumentasi, atau blog yang dibuat dengan alat seperti Jekyll atau Hugo.

Saat kita mengaktifkan GitHub Pages, konten repositori kita secara otomatis dipublikasikan ke web di bawah URL seperti https://username.github.io. Jika diinginkan, kita dapat menghubungkan domain khusus agar terlihat lebih profesional.

Langkah 1: Buat Akun dan Repositori GitHub

Langkah pertama dalam meluncurkan situs kita adalah membuat akun GitHub jika kita belum memilikinya. GitHub adalah platform hosting kode yang membantu developer mengelola dan berbagi proyek menggunakan Git.

Setelah masuk, klik tombol New Repository. Beri nama repositori kita — misalnya, my-portfolio atau my-website. Kita dapat menjadikannya publik atau privat, meskipun GitHub Pages hanya berfungsi dengan repositori publik pada akun gratis.

Jika kita ingin website kita berfungsi sebagai situs pribadi utama, beri nama repositori tersebut menggunakan nama pengguna GitHub kita, seperti username.github.io. Konvensi penamaan ini memberi tahu GitHub untuk menghosting website kita langsung di alamat tersebut.

Setelah membuat repositori, kita dapat mengunggah file website kita langsung melalui antarmuka web GitHub atau mengkloning repositori ke komputer lokal kita dan mengunggah file kita menggunakan Git.

Langkah 2: Menambahkan File Website Kita

Selanjutnya, kita perlu menyertakan konten website kita yang sebenarnya. File-file ini bisa berupa file HTML, CSS, dan JavaScript statis sederhana, atau bisa juga dibuat oleh pembuat situs statis seperti Jekyll, Hugo, atau Next.js (mode ekspor statis).

Jika kita mengunggah secara manual, seret dan letakkan file kita ke repositori menggunakan tombol "Upload files". Jika kita menggunakan Git secara lokal, jalankan perintah berikut di terminal kita:

git init
git add .
git commit -m "Komit awal"
git remote add origin https://github.com/username/my-website.git
git push -u origin main

Setelah file kita berada di repositori, kita siap untuk mempublikasikannya menggunakan GitHub Pages.

Langkah 3: Mengaktifkan GitHub Pages

Untuk meluncurkan situs kita, buka repositori kita di GitHub. Klik tab Settings di bagian atas halaman. Gulir ke bawah ke bagian berlabel Pages.

Di bagian ini, kita akan melihat opsi untuk mengonfigurasi situs GitHub Pages kita. Di bagian Source, pilih cabang tempat file website kita berada — biasanya main — dan pilih direktori root (/) atau folder /docs jika situs kita disimpan di sana.

Setelah memilih cabang, klik Save. GitHub akan secara otomatis mulai menerbitkan situs kita. Dalam beberapa saat, kita akan melihat pesan sukses dengan URL seperti:

https://username.github.io/my-website/

Selesai! Website kita sekarang sudah aktif. Kita dapat mengunjungi URL yang diberikan untuk melihatnya di browser kita.

Langkah 4: Meng-kustomisasi Website Kita (Opsional)

Halaman GitHub memungkinkan kita untuk menyesuaikan situs kita lebih lanjut. Jika kita membangun situs pribadi atau proyek, kita dapat memilih untuk menggunakan Jekyll, generator situs statis terintegrasi GitHub. Jekyll memungkinkan kita menulis konten dalam Markdown dan secara otomatis mengubahnya menjadi website yang bersih dan modern tanpa perlu menulis HTML secara manual.

Untuk mengaktifkan Jekyll, cukup sertakan file _config.yml di root repositori kita dan atur konten kita dalam folder seperti _posts dan _layouts. GitHub akan secara otomatis mendeteksi dan membangun situs Jekyll kita setiap kali kita menerapkan perubahan.

Atau, jika kita telah membangun situs kita menggunakan generator situs statis lain seperti Hugo, Gatsby, atau Next.js, kita dapat menggunakan GitHub Actions untuk mengotomatiskan proses pembangunan dan penerapan setiap kali kita memperbarui repositori kita.

Langkah 5: Menambahkan Domain Kustom

Jika kita menginginkan alamat web yang dipersonalisasi (misalnya, www.myportfolio.com, bukan username.github.io), GitHub Pages memungkinkan kita menambahkan domain kustom dengan mudah.

Pertama, beli domain dari registrar seperti Namecheap, Google Domains, atau GoDaddy. Kemudian, kembali ke pengaturan Pages repositori GitHub kita. Di bagian "Custom domain", masukkan nama domain kita dan klik Save.

Selanjutnya, konfigurasikan pengaturan DNS kita dengan registrar domain kita. Tambahkan record berikut:

Untuk domain apex (seperti myportfolio.com), buat record A yang mengarah ke alamat IP GitHub.

Untuk subdomain www, tambahkan record CNAME yang mengarah ke username.github.io.

Setelah pembaruan DNS kita dipropagasi (yang mungkin memakan waktu beberapa jam), situs kita akan aktif di domain kustom kita dengan HTTPS diaktifkan secara otomatis.

Langkah 6: Selalu Perbarui Situs Kita

Salah satu fitur terbaik GitHub Pages adalah kemudahannya memperbarui website. Setiap kali kita membuat perubahan pada file dan mengirimkannya ke cabang utama, GitHub secara otomatis akan membangun ulang dan menerapkan ulang situs kita.

Hal ini menjadikannya sempurna bagi developer yang menginginkan continuous integration and delivery (CI/CD) tanpa mengonfigurasi alur kerja terpisah. Kita bahkan dapat mengotomatiskan tugas — seperti membuat konten atau mengoptimalkan gambar — menggunakan GitHub Actions.

Menjaga repositori kita tetap teratur dan melakukan pembaruan secara berkala memastikan website kita yang aktif selalu mencerminkan karya terbaru kita.

Memecahkan Masalah Umum

Terkadang, situs GitHub Pages mungkin tidak ditampilkan seperti yang diharapkan setelah deployment. Penyebab paling umum adalah file yang hilang, pengaturan cabang yang salah, atau penundaan caching.

Jika situs kita tidak dapat dimuat, periksa kembali apakah repositori kita memiliki file index.html di direktori yang benar. Pastikan pengaturan GitHub Pages kita mengarah ke cabang dan folder yang tepat. Selain itu, tunggu beberapa menit setelah penerbitan — GitHub mungkin memerlukan waktu untuk memproses perubahan baru.

Jika masalah berlanjut, tinjau log build di bawah tab Actions atau periksa dokumentasi resmi GitHub untuk panduan pemecahan masalah.

Mengapa GitHub Pages Ideal untuk Developer dan Mahasiswa

GitHub Pages bukan hanya praktis — melainkan alat yang mendorong praktik terbaik dalam pengembangan web. Dengan mengintegrasikan kontrol versi, kolaborasi, dan hosting ke dalam satu platform, GitHub Pages menyederhanakan proses pengelolaan proyek profesional dan open source.

Bagi mahasiswa, GitHub Pages adalah platform yang sempurna untuk membangun dan berbagi portofolio atau menghosting proyek kelas. Bagi developer, GitHub Pages merupakan cara yang efisien untuk menerapkan dokumentasi atau memamerkan eksperimen tanpa bergantung pada layanan hosting berbayar.

Kesederhanaannya, dipadukan dengan kecanggihan Git, menjadikannya salah satu solusi hosting gratis terbaik untuk website statis di web saat ini.

Jadi, men-deploy website dulunya merupakan tantangan teknis, tetapi GitHub Pages telah mengubah proses tersebut menjadi mudah. ​​Hanya dengan beberapa klik dan komitmen, kita dapat berbagi proyek, portofolio, dan dokumentasi kita dengan dunia — semuanya tanpa mengeluarkan biaya sepeser pun. Baik kita seorang pemula yang mempelajari HTML atau developer berpengalaman yang mengelola proyek open source, GitHub Pages menawarkan keseimbangan sempurna antara kesederhanaan, keamanan, dan kontrol. Dengan menguasai cara men-deploy situs di GitHub Pages, kita memperoleh keterampilan berharga, yaitu kemampuan untuk mewujudkan ide-ide kita secara online dengan cepat, profesional, dan sepenuhnya gratis.