Cara deploy website di GitHub Pages gratis dengan custom domain

GitHub Pages adalah cara paling sederhana untuk membuat website online. Kalau project kamu sudah ada di GitHub, kamu cuma butuh beberapa langkah untuk deploy. Gratis, tanpa perlu daftar layanan tambahan.

Panduan ini cocok untuk kamu yang baru selesai membuat landing page dengan Gemini CLI atau punya project statis lainnya yang siap dipublikasikan.

Apa yang kamu butuhkan

• Akun GitHub dengan repository berisi project website kamu
• Domain (opsional) kalau mau pakai custom domain sendiri

Kalau project kamu belum ada di GitHub, baca bagian simpan project di GitHub terlebih dahulu.

Batasan GitHub Pages

Sebelum mulai, ada beberapa batasan yang perlu kamu tahu:

Batasan	Detail
Ukuran repository	Maksimal 1 GB
Ukuran website	Maksimal 1 GB setelah build
Bandwidth per bulan	100 GB
Build per jam	10 kali
Jenis website	Statis saja (tanpa server-side)

Untuk landing page, portfolio, atau blog statis - batasan ini lebih dari cukup. Kalau kamu butuh bandwidth unlimited, pertimbangkan Cloudflare Pages sebagai alternatif.

Deploy project HTML biasa

Kalau project kamu adalah HTML, CSS, dan JavaScript biasa tanpa framework, deploy-nya sangat mudah.

Step 1: Aktifkan GitHub Pages

1. Buka repository kamu di GitHub
2. Klik Settings (tab di bagian atas)
3. Di sidebar kiri, klik Pages
4. Di bagian Source, pilih Deploy from a branch
5. Pilih branch main dan folder / (root)
6. Klik Save

Step 2: Tunggu deploy

GitHub akan memproses website kamu dalam 1-2 menit. Setelah selesai, URL muncul di halaman Settings > Pages:

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

Selesai. Website kamu sudah online.

Deploy project Astro dengan GitHub Actions

Kalau project kamu pakai Astro atau framework lain yang butuh build step, kamu perlu GitHub Actions untuk otomasi prosesnya.

Step 1: Update astro.config

Buka astro.config.mjs dan tambahkan site serta base:

export default defineConfig({
    site: "https://username.github.io",
    base: "/nama-repository",
});

Ganti username dengan username GitHub kamu dan nama-repository dengan nama repo.

Kalau kamu akan pakai custom domain, set seperti ini:

export default defineConfig({
    site: "https://www.domainku.com",
});

Tidak perlu base kalau pakai custom domain.

Step 2: Buat workflow file

Buat file .github/workflows/deploy.yml di project kamu:

name: Deploy to GitHub Pages

on:
    push:
        branches: [main]
    workflow_dispatch:

permissions:
    contents: read
    pages: write
    id-token: write

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v4

            - name: Setup Node
              uses: actions/setup-node@v4
              with:
                  node-version: 20
                  cache: npm

            - name: Install dependencies
              run: npm ci

            - name: Build Astro
              run: npm run build

            - name: Upload artifact
              uses: actions/upload-pages-artifact@v3
              with:
                  path: ./dist

    deploy:
        needs: build
        runs-on: ubuntu-latest
        environment:
            name: github-pages
            url: ${{ steps.deployment.outputs.page_url }}
        steps:
            - name: Deploy to GitHub Pages
              id: deployment
              uses: actions/deploy-pages@v4

Step 3: Aktifkan GitHub Pages dengan Actions

1. Buka repository > Settings > Pages
2. Di bagian Source, pilih GitHub Actions (bukan “Deploy from a branch”)
3. Klik Save

Step 4: Push dan deploy

git add .
git commit -m "Add GitHub Actions deploy workflow"
git push

GitHub Actions akan otomatis build dan deploy. Kamu bisa pantau prosesnya di tab Actions di repository. Setelah selesai, website live di:

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

Mulai sekarang, setiap push ke branch main akan trigger deploy otomatis.

Setup custom domain

Kalau kamu punya domain sendiri dan mau pakai itu alih-alih username.github.io, berikut langkahnya.

Step 1: Tambahkan file CNAME

Buat file public/CNAME (tanpa extension) di project kamu. Isinya cuma satu baris:

www.domainku.com

Ganti dengan domain kamu. File ini harus masuk ke folder public/ supaya ikut ter-copy saat build.

Step 2: Konfigurasi DNS

Login ke panel DNS domain provider kamu (Niagahoster, Namecheap, Cloudflare, dll). Konfigurasi yang perlu ditambahkan tergantung jenis domain yang mau kamu pakai.

Untuk www subdomain (www.domainku.com):

Tambahkan CNAME record:

Type	Name	Value
CNAME	www	username.github.io

Untuk apex domain (domainku.com):

Tambahkan 4 A record yang mengarah ke IP GitHub Pages:

Type	Name	Value
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153

Rekomendasi: Tambahkan keduanya. Set CNAME untuk www dan 4 A record untuk apex domain. GitHub akan otomatis redirect antara keduanya.

Step 3: Daftarkan domain di GitHub

1. Buka repository > Settings > Pages
2. Di bagian Custom domain, ketik domain kamu (misalnya www.domainku.com)
3. Klik Save
4. Tunggu sampai DNS check berhasil (bisa 1-24 jam, biasanya beberapa menit)

Step 4: Aktifkan HTTPS

Setelah DNS berhasil terverifikasi, centang Enforce HTTPS di halaman yang sama. GitHub menyediakan SSL certificate gratis via Let’s Encrypt.

Step 5: Verifikasi domain (opsional tapi disarankan)

Supaya tidak ada orang lain yang bisa klaim domain kamu di GitHub Pages:

1. Buka GitHub Settings (bukan repository settings, tapi account settings)
2. Klik Pages di sidebar
3. Klik Add a domain
4. Masukkan domain kamu
5. GitHub akan berikan TXT record yang perlu kamu tambahkan di DNS
6. Setelah ditambahkan, klik Verify

Perbandingan: GitHub Pages vs Cloudflare Pages

Kalau kamu bingung mau pilih yang mana, berikut perbandingannya:

Fitur	GitHub Pages	Cloudflare Pages
Harga	Gratis	Gratis
Bandwidth	100 GB/bulan	Unlimited
Build per bulan	~7.200 (10/jam)	500
CDN	GitHub CDN	Cloudflare CDN (300+ lokasi)
Preview deploy	Tidak ada	Setiap pull request
Custom domain	Ya	Ya
SSL	Ya (Let’s Encrypt)	Ya (Cloudflare)
Redirect rules	Tidak native	File _redirects

Pilih GitHub Pages kalau project kamu kecil, traffic tidak terlalu tinggi, dan kamu mau setup yang paling simpel.

Pilih Cloudflare Pages kalau kamu butuh bandwidth unlimited, preview deployment per pull request, atau redirect rules. Panduan lengkapnya ada di artikel cara deploy di Cloudflare Pages.

Troubleshooting

Website muncul tapi broken layout: Pastikan base di astro.config.mjs sesuai dengan nama repository. Kalau pakai custom domain, hapus base dan gunakan site saja.

Custom domain belum aktif: Propagasi DNS bisa memakan waktu sampai 24 jam. Cek kembali apakah A record dan CNAME sudah benar di panel DNS provider kamu.

Error 404 setelah deploy: Pastikan Source di Settings > Pages sudah diset ke GitHub Actions, bukan “Deploy from a branch”.

HTTPS tidak bisa diaktifkan: Tunggu sampai DNS fully propagated. Tombol Enforce HTTPS baru bisa dicentang setelah certificate berhasil di-issue.