Deploy Website Gratis dengan GitHub Pages

Apa itu GitHub Pages?

GitHub Pages adalah layanan hosting gratis dari GitHub untuk website statis (HTML, CSS, JavaScript tanpa backend). Setiap push ke branch yang ditentukan, websitemu otomatis ter-update. Cocok untuk: portofolio, landing page, dokumentasi proyek, dan blog statis.

Kapan dipakai? Saat kamu butuh website online cepat tanpa bayar hosting dan tanpa urus server. Tidak cocok untuk aplikasi yang butuh database atau API backend (untuk itu pakai Vercel, Railway, atau sejenisnya).

Cara termudah: deploy dari branch

1. Pastikan repository berisi file website dengan index.html di root (atau di folder docs/).
2. Di GitHub, buka Settings → Pages.
3. Pada "Build and deployment", pilih Deploy from a branch.
4. Pilih branch (misal main) dan folder (/ (root) atau /docs), klik Save.

# contoh struktur repo yang siap deploy
portofolio/
  index.html
  style.css
  script.js

git add .
git commit -m "Siap deploy ke GitHub Pages"
git push origin main

Tunggu 1-2 menit, websitemu live di:

https://username.github.io/nama-repo/

Setiap push berikutnya otomatis me-redeploy. Tidak ada tombol deploy manual.

Trik repository khusus: username.github.io

Kalau kamu membuat repository persis bernama username.github.io (ganti username dengan username GitHub-mu), websitenya live di root domain:

https://username.github.io/

Tanpa nama repo di belakangnya. Ini pola standar untuk website portofolio pribadi.

Deploy dengan GitHub Actions (lebih fleksibel)

Untuk proyek yang butuh proses build (misalnya Vite, Next.js static export, atau Tailwind), pakai Actions:

1. Settings → Pages → pilih GitHub Actions sebagai source.
2. GitHub menawarkan workflow template sesuai framework-mu.
3. Setiap push menjalankan build otomatis lalu deploy hasilnya.

Contoh workflow sederhana untuk situs statis tanpa build:

# .github/workflows/pages.yml
name: Deploy ke Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/upload-pages-artifact@v3
        with:
          path: .
      - uses: actions/deploy-pages@v4

Kamu tidak perlu menghafal file ini, GitHub menyediakan template siap pakai saat kamu memilih source GitHub Actions.

Custom domain (opsional)

Punya domain sendiri seperti www.namadomain.com? Bisa dipakai:

1. Tambahkan file bernama CNAME di root repo berisi domainmu (tanpa https).
2. Di DNS domainmu, buat CNAME record ke username.github.io.
3. Di Settings → Pages, aktifkan Enforce HTTPS.

# isi file CNAME (satu baris saja)
www.namadomain.com

Batasan yang perlu diketahui

• Hanya website statis, tidak ada kode backend yang jalan di server.
• Repository harus publik untuk Pages gratis (repo privat butuh plan berbayar untuk Pages).
• Limit wajar: 1 GB penyimpanan dan 100 GB bandwidth per bulan, lebih dari cukup untuk portofolio.
• Build dari branch dibatasi 10 kali per jam.

Catatan teknis: Jangan commit file rahasia ke repo Pages dengan alasan "kan cuma frontend". Semua file di repository publik bisa dilihat siapa pun, termasuk lewat URL mentah raw.githubusercontent.com. API key yang harusnya rahasia tidak boleh ada di kode frontend yang di-deploy ke Pages, pakai backend atau serverless function untuk itu.

Ringkasan

GitHub Pages = hosting gratis untuk web statis, deploy otomatis setiap push. Mulai dari Settings → Pages → Deploy from a branch, atau pakai repo username.github.io untuk domain root. Untuk proyek portofolio dan dokumentasi, ini cara tercepat punya website online tanpa biaya.