Deployment Website Statis ke GitHub Pages

GitHub Pages cocok untuk situs statis: browser menerima file HTML, CSS, JavaScript, gambar, dan aset lain tanpa server aplikasi khusus. Karena tidak ada runtime backend umum, form server-side, database, atau secret tidak dapat disimpan begitu saja di JavaScript publik.

Hasil akhir

Repository mempunyai sumber publikasi yang jelas.
Path aset bekerja pada domain bawaan maupun custom domain.
HTTPS dan DNS diperiksa sebelum domain diumumkan.
Halaman 404, sitemap, robots, dan cache ikut diverifikasi.

Periksa proyek sebelum diunggah

Mulai dari struktur sederhana. Pastikan nama file konsisten, halaman utama bernama index.html, dan tidak ada token atau password di source.

website/
├─ index.html
├─ 404.html
├─ about.html
├─ robots.txt
├─ sitemap.xml
└─ assets/
   ├─ css/style.css
   ├─ js/app.js
   └─ images/logo.svg

Buka situs melalui local server, bukan hanya dengan double-click file. Local server meniru resolusi URL HTTP dan memperlihatkan masalah path lebih awal.

# Salah satu pilihan local server
npx serve .

# atau jika Python sudah tersedia
python -m http.server 8000

Pahami root site dan project site

User site biasanya berada di username.github.io. Project site dapat berada di username.github.io/nama-repository/. Path absolut seperti /assets/css/style.css menunjuk ke root domain, sehingga pada project site ia dapat melewati nama repository.

<!-- Aman jika halaman berada di root sumber yang sama -->
<link rel="stylesheet" href="assets/css/style.css">

<!-- Dari folder articles/ naik satu tingkat -->
<link rel="stylesheet" href="../assets/css/style.css">

Jika memakai build tool, atur base path sesuai target deployment. Jangan mencampur pola path tanpa memahami URL akhir yang dihasilkan.

Buat repository dan push proyek

git init
git add .
git commit -m "chore: siapkan situs untuk deployment"
git branch -M main
git remote add origin https://github.com/username/nama-repo.git
git push -u origin main

Sebelum git add ., periksa .gitignore dan jalankan git status. Semua file pada repository publik dapat dibaca orang lain, termasuk riwayat commit lama.

Pilih sumber publikasi

Untuk situs tanpa proses build, pengaturan “Deploy from a branch” adalah pilihan sederhana. Di Settings → Pages, pilih branch dan folder sumber yang berisi index.html. Untuk proyek yang harus dibangun, gunakan GitHub Actions agar output build yang dipublikasikan, bukan source mentah.

Setelah workflow selesai, buka tab Actions dan deployment environment. Jangan hanya melihat status hijau; kunjungi URL publik, buka DevTools Network, dan pastikan CSS, JavaScript, favicon, serta artikel memperoleh status 200.

Tambahkan custom domain dengan urutan aman

Tambahkan domain ke pengaturan GitHub Pages sebelum mengubah DNS. Urutan ini membantu mencegah konfigurasi domain menunjuk ke Pages tanpa ada repository yang mengklaimnya. Untuk apex domain, penyedia DNS dapat memakai record A, ALIAS, atau ANAME sesuai dukungannya; subdomain www biasanya memakai CNAME.

# Contoh isi CNAME pada sumber publikasi
www.example.com

Nilai DNS harus mengikuti alamat resmi GitHub Pages yang terbaru. Jangan menyalin IP dari artikel lama tanpa memeriksa dokumentasi GitHub. Hindari wildcard DNS karena dapat meningkatkan risiko domain takeover.

Aktifkan HTTPS dan satu versi domain

Setelah DNS terdeteksi, aktifkan “Enforce HTTPS”. Pilih satu host canonical—misalnya apex atau www—dan pastikan versi lain mengarah ke versi utama. Seluruh canonical URL, Open Graph URL, sitemap, dan link absolut harus menggunakan host yang sama.

<link rel="canonical" href="https://www.example.com/artikel.html">
<meta property="og:url" content="https://www.example.com/artikel.html">

Mixed content muncul ketika halaman HTTPS masih meminta gambar atau script melalui HTTP. Periksa Console dan Network lalu ubah resource ke HTTPS atau host sendiri.

Siapkan 404 yang tetap membantu

GitHub Pages dapat menggunakan 404.html khusus. Halaman ini sebaiknya memiliki pesan jelas, tautan beranda, pencarian atau daftar artikel populer, tetapi tidak berpura-pura sebagai halaman konten normal. Beri noindex dan hindari menampilkan iklan pada halaman error.

<meta name="robots" content="noindex, follow">
<h1>Halaman tidak ditemukan</h1>
<p>Alamat mungkin berubah atau salah ketik.</p>
<a href="/">Kembali ke beranda</a>

Perbarui file discovery

robots.txt memberi petunjuk crawling dan dapat menunjuk ke sitemap. Sitemap hanya berisi URL canonical yang memang ingin diindeks. Jangan memasukkan halaman pencarian internal, 404, atau parameter filter tanpa nilai mandiri.

# robots.txt
User-agent: *
Allow: /
Sitemap: https://www.example.com/sitemap.xml

Setelah deploy, buka URL file langsung. Kesalahan umum adalah sitemap masih memakai domain contoh atau tanggal pembaruan yang tidak sesuai perubahan konten.

Diagnosis ketika tampilan live berbeda

Gejala	Pemeriksaan
CSS tidak muncul	Status file CSS, huruf besar/kecil nama file, base path
Halaman lama masih terlihat	Commit deployment, cache browser/CDN, query version aset
Artikel 404	Path relatif, nama folder, ekstensi, source branch
Domain tidak aman	DNS sudah propagasi, sertifikat, Enforce HTTPS
Deployment gagal	Log Actions atau Pages build, bukan menebak dari halaman

Sistem file pada hosting biasanya case-sensitive. Logo.svg dan logo.svg dapat dianggap file berbeda walaupun lingkungan lokal tertentu menganggapnya sama.

Checklist setelah publikasi

Buka beranda, semua artikel, halaman legal, dan 404 dari URL publik.
Periksa status resource di Network dan error di Console.
Uji navigasi pada ponsel dan keyboard.
Pastikan canonical, sitemap, dan robots memakai domain final.
Validasi HTTPS dan redirect domain.
Pastikan tidak ada source map, file konfigurasi, atau secret yang tidak seharusnya publik.
Kirim sitemap melalui Google Search Console setelah URL final stabil.

Referensi resmi

Tentang materi ini

Langkah antarmuka GitHub dapat berubah. Konsep sumber publikasi, path, DNS, HTTPS, dan verifikasi URL tetap menjadi dasar; periksa dokumentasi GitHub untuk label menu terbaru.