Cara Deploy Website ke GitHub Pages + Custom Domain

 Aku masih ingat betul momen ketika pertama kali berhasil mem-publish website ke internet — tanpa bayar hosting sepeser pun.

Rasanya luar biasa melihat proyek pribadi yang tadinya hanya di laptop, kini bisa diakses siapa saja lewat browser.
Dan semuanya berkat GitHub Pages, salah satu cara termudah untuk deploy website secara gratis.

Kalau kamu ingin tahu langkah-langkahnya dari awal sampai punya custom domain sendiri, tenang — artikel ini akan memandumu dengan cara yang santai tapi tetap rinci.

---

Mengapa GitHub Pages Jadi Pilihan Favorit Developer

GitHub Pages sebenarnya bukan layanan hosting biasa.
Ia adalah fitur bawaan dari GitHub, platform tempat developer menyimpan dan berbagi kode.
Dengan GitHub Pages, kamu bisa meng-host website langsung dari repository-mu.

Beberapa alasan kenapa GitHub Pages populer di dunia website development:

• Gratis dan tanpa batas waktu.

• Cepat diakses karena didukung CDN GitHub.

• Mudah digunakan, cukup upload file HTML/CSS/JS.

• Cocok untuk portofolio, landing page, atau dokumentasi.

Dan kabar baiknya: kamu juga bisa menambahkan custom domain, jadi website-mu tidak harus beralamat username.github.io, tapi bisa jadi namadomain.com.

---

Langkah 1: Siapkan Repository di GitHub

Kalau kamu belum punya akun GitHub, buat dulu di github.com.
Setelah login, klik tombol New Repository, lalu beri nama misalnya my-website.

💡 Tips: kalau kamu memberi nama repository username.github.io, GitHub akan otomatis membuatkan domain gratis untukmu.

Setelah repository dibuat, unggah semua file website-mu ke sana — bisa langsung dari web, atau lewat Git di terminal:

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

Sekarang kode website kamu sudah tersimpan di GitHub.
Langkah berikutnya adalah membuatnya bisa diakses publik.

---

Langkah 2: Aktifkan GitHub Pages

Di halaman repository, klik Settings → Pages.
Kemudian di bagian Source, pilih:

• Branch: main

• Folder: / (root) atau /docs tergantung struktur project-mu

Klik Save, dan tunggu beberapa menit.
GitHub akan otomatis men-deploy situsmu dan menampilkan link seperti:

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

Selamat! Website kamu sekarang resmi online 🎉

Ini adalah titik di mana banyak developer pemula mulai paham — ternyata bagian “deploy” dalam dunia website development tidak sesulit yang dibayangkan.

---

Langkah 3: Tambahkan Custom Domain

Supaya terlihat lebih profesional, sekarang kita pasangkan domain pribadi.
Misalnya, kamu ingin website-mu diakses melalui www.namadomain.com.

1. Beli Domain

Kamu bisa membeli domain di layanan seperti:

• Niagahoster

• Google Domains

• Hostinger

• Namecheap

Biasanya, harga domain .com sekitar Rp150.000 per tahun.

2. Hubungkan Domain ke GitHub

Masuk ke pengaturan domain di penyedia yang kamu gunakan.
Tambahkan record DNS berikut:

Type	Name	Value
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153
CNAME	www	username.github.io

Setelah itu, kembali ke repository GitHub kamu → buka Settings → Pages → Custom Domain, lalu ketik domain milikmu:

www.namadomain.com

GitHub akan otomatis membuat file bernama CNAME di repository.
Tunggu proses propagasi DNS (biasanya 1–24 jam), dan… website-mu sekarang sudah pakai domain pribadi!

---

Langkah 4: Pastikan HTTPS Aktif

Keamanan penting dalam setiap proyek website development.
Untungnya, GitHub Pages menyediakan SSL gratis.

Setelah domain aktif, buka kembali menu Settings → Pages, lalu aktifkan opsi:

✅ Enforce HTTPS

Tunggu beberapa menit hingga sertifikat SSL aktif.
Sekarang website kamu sudah aman dengan URL https:// — bukan lagi http://.

---

Langkah 5: Update Website dengan Mudah

Salah satu hal paling menyenangkan dari GitHub Pages adalah update otomatis.
Setiap kali kamu melakukan git push ke branch main, website kamu akan diperbarui otomatis dalam hitungan detik.

Bayangkan: kamu menambahkan proyek baru di portofolio, lalu tinggal mengetik:

git add .
git commit -m "Tambah proyek baru"
git push

Dan boom — konten website langsung berubah tanpa perlu upload manual ke hosting.

---

Langkah 6: Optimalkan Website untuk Performa dan SEO

Website sudah online, tapi jangan berhenti di situ.
Agar website-mu tampil lebih optimal di mesin pencari, lakukan beberapa langkah tambahan.

Gunakan File Robots.txt dan Sitemap

Buat dua file di root folder:

• robots.txt → memberi tahu bot halaman mana yang boleh diindeks.

• sitemap.xml → membantu Google memahami struktur website-mu.

Tambahkan Meta Tags dan Title Unik

Gunakan meta tag seperti:

<meta name="description" content="Website portofolio profesional dibangun dengan GitHub Pages dan React.js">
<meta name="keywords" content="website development, GitHub Pages, custom domain">

Gunakan Gambar Terkompresi

Gunakan tool seperti TinyPNG untuk memperkecil ukuran gambar tanpa mengorbankan kualitas.
Website yang cepat memuat punya peluang lebih besar menempati posisi atas di hasil pencarian.

---

Langkah 7: Tips Profesional untuk Developer Pemula

• Gunakan branch terpisah (misalnya dev) untuk eksperimen sebelum di-deploy.

• Pelajari Git workflow agar kolaborasi lebih efisien.

• Gunakan README.md sebagai dokumentasi proyek.

• Perhatikan struktur file agar mudah dikelola dalam jangka panjang.

Kebiasaan kecil seperti ini akan membentuk mental profesional dalam dunia website development — bukan hanya bisa membuat website, tapi juga tahu bagaimana mengelolanya dengan rapi dan aman.

---

Penutup — Dari Lokal ke Global, Hanya Butuh Satu Push

Bayangkan ini: kamu duduk santai di depan laptop, mengetik git push, dan dalam beberapa detik, website kamu langsung online untuk seluruh dunia.
Itu bukan sihir — itu GitHub Pages.

Platform ini memberi jalan mudah bagi siapa pun, baik pemula maupun profesional, untuk mempublikasikan karya mereka tanpa ribet.
Dan dengan tambahan custom domain, kamu bisa tampil layaknya perusahaan besar dengan biaya nyaris nol.

Jadi, tunggu apa lagi?
Mulailah sekarang. Unggah kode, atur DNS, dan buat website-mu tampil profesional.
Karena di era digital ini, website development bukan hanya soal membangun halaman web — tapi tentang membangun identitas.