Pendahuluan
Setelah membuat situs dengan alat AI seperti ChatGPT, Canva, Gemini Canvas, Claude Artifacts, atau Sider Web Creator, pertanyaan besar berikutnya adalah bagaimana menangani hosting web di GitHub Pages sehingga Anda dapat mengunjungi situs tersebut melalui domain Anda sendiri. Panduan ini memandu Anda langkah demi langkah—dari mengekspor proyek di Sider Web Creator hingga mendapatkan situs web yang berfungsi penuh di bawah domain pribadi Anda—sambil menjelaskan secara rinci konfigurasi hosting web dan GitHub Pages.
🎯 Apa yang Akan Anda Pelajari
Cara mengunduh dan memahami file proyek yang dibuat AI dengan benar sebelum memilih alur kerja hosting web GitHub Pages.
Instruksi langkah demi langkah untuk menerapkan situs secara gratis di GitHub Pages.
Cara membeli dan mengikat domain kustom Anda sendiri di dalam pengaturan GitHub Pages dan menghubungkannya ke catatan DNS praktik terbaik.
Kiat pro untuk membuat situs terlihat sepenuhnya profesional dan tepercaya setelah pengaturan GitHub Pages aktif.
📥 Langkah 1: Unduh Situs Anda dari Sider Web Creator
Sebagian besar platform hosting statis—termasuk GitHub Pages—mengharapkan folder build yang bersih, jadi pertama-tama Anda perlu mengumpulkan file Anda.
1.1 Unduh File Proyek
Setelah Web Creator selesai membuat situs, klik tombol Unduh di sudut kanan atas.
Tunggu saat sistem mengemas proyek Anda.
Anda akan menerima file .zip yang siap diunggah ke GitHub Pages.
Ekstrak zip di mana saja di komputer Anda.
1.2 Memahami Struktur File (Penting!)
my‑website/
├── dist/ ⭐ Build produksi untuk **GitHub Pages**
│ ├── index.html → Halaman beranda
│ ├── assets/ → Gaya & skrip
│ └── …
├── src/ 📝 Folder kode sumber
├── package.json 📦 Konfigurasi proyek
└── …file lainnya
Pengingat penting: Hanya konten di dalam dist/ yang dipublikasikan di GitHub Pages.
1.3 Uji Pratinjau Lokal
Masuk ke folder dist/.
Klik dua kali index.html.
Situs terbuka di browser Anda.
Verifikasi semuanya berfungsi sebelum mendorong ke GitHub Pages.
🚀 Langkah 2: Pilih Platform Penerapan
Meskipun GitHub Pages adalah pahlawan dalam panduan ini, berikut adalah perbandingan singkat:
| |
|---|
🌟 GitHub Pages (fokus panduan ini) | Sepenuhnya gratis • Penerapan seret dan lepas atau git push • HTTPS gratis • CDN global • Domain kustom • CI asli dengan GitHub Actions |
| Jaringan edge global • 100% gratis • Sangat cepat |
| UI yang dipoles • Kaya fitur |
📤 Langkah 3: Terapkan ke GitHub Pages (Panduan Terperinci)
Meskipun GitHub Pages berada di dalam platform pengembang, anggap saja itu sebagai hosting web ultra-modern dengan kenyamanan tombol tekan.
3.1 Daftar & Buat Repositori
Kunjungi github.com dan masuk.
Klik + Repositori baru.
Beri nama my‑website dan pilih Publik (atau Privat jika Anda memiliki paket berbayar; GitHub Pages sekarang mendukung repositori pribadi).
Biarkan Inisialisasi dengan README tidak dicentang jika Anda berencana untuk mendorong nanti.
3.2 Tambahkan File Situs Anda
Metode A: Unggah Seret dan Lepas (terbaik untuk pemula)
Di tab Kode repositori, klik Tambahkan file → Unggah file.
Jatuhkan semua yang ada di dalam dist/.
Gulir ke bawah dan klik Terapkan perubahan.
Metode B: Git CLI (terbaik untuk pengembang)
# Klon repositori kosong
git clone https://github.com/<user>/my‑website.git
cd my‑website
# Salin output build
cp -r /path/to/dist/* .
# Commit & push
git add .
git commit -m "Penerapan **GitHub Pages** awal"
git push origin main
Salah satu cara tersebut akan meninggalkan Anda dengan file statis di root repositori—sempurna untuk GitHub Pages.
3.3 Aktifkan GitHub Pages
Buka Pengaturan → Pages.
Di bawah Sumber pilih Terapkan dari cabang → main (/root).
Klik Simpan. GitHub Pages membangun dalam ~30 detik dan mengembalikan URL seperti https://<user>.github.io/my‑website/.
3.4 Ambil URL Default Anda
Kunjungi tautan untuk mengonfirmasi semuanya dimuat. GitHub Pages secara otomatis melayani melalui CDN global.
🌐 Langkah 4: Beli dan Ikat Domain Anda Sendiri
4.1 Beli Domain
Pendaftar yang disarankan (semua berfungsi dengan baik dengan GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Pilih .com pendek jika memungkinkan.
4.2 Tambahkan Domain di GitHub Pages
Masih di Pengaturan → Pages, temukan Domain kustom.
Masukkan mywebsite.com atau www.mywebsite.com.
Klik Simpan. GitHub Pages menulis file CNAME secara otomatis.
4.3 Konfigurasi Catatan DNS
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Tunggu 10 menit–24 jam untuk propagasi. IP ini konstan untuk GitHub Pages. |
4.4 Terapkan HTTPS
Setelah DNS menyebar, segarkan pengaturan Pages dan aktifkan Terapkan HTTPS. Sertifikat Let’s Encrypt diterbitkan secara otomatis.
✨ Langkah 5: Buat Situs Terlihat Profesional
5.1 Tambahkan Favicon Kustom
Siapkan ikon 32×32 px bernama favicon.ico.
Tempatkan di root repositori.
Commit dan push; GitHub Pages menyajikannya secara instan.
5.2 Sisipkan Info Meta Kustom
Edit index.html di root repositori:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analitik (opsional)
Tempel cuplikan GA / Plausible di dalam <head>; GitHub Pages menghormati header caching.
🔧 Pemecahan Masalah
Halaman kosong? Konfirmasikan index.html ada di root repositori dan jalur aset bersifat relatif.
Domain berputar ke .github.io? Periksa kembali catatan A/CNAME dan tunggu TTL penuh.
Tombol HTTPS dinonaktifkan? DNS belum benar; verifikasi dengan dig.
🎉 Ringkasan
Selamat!
✅ Anda sekarang telah berhasil mengunduh situs web yang dibuat AI Anda yang siap untuk hosting GitHub Pages.
✅ Menerapkannya secara gratis ke GitHub Pages.
✅ Mengamankan domain kustom Anda sendiri.
✅ Memoles lingkungan GitHub Pages agar terlihat sepenuhnya profesional.
Situs Anda sekarang:
🌐 Online 24/7, didukung oleh GitHub Pages CDN.
🏷️ Disajikan di bawah domain profesional.
🔒 Dilindungi oleh enkripsi HTTPS.
⚡ Cepat secara global berkat node edge GitHub Pages.
🗝️ Sepenuhnya dimiliki dan dikendalikan oleh Anda.
💡 Langkah Selanjutnya
Optimasi SEO: tambahkan kata kunci dan deskripsi meta yang ditargetkan untuk meningkatkan peringkat pencarian untuk pengaturan GitHub Pages Anda.
Berbagi sosial: integrasikan tombol berbagi untuk platform utama.
Pembaruan berkelanjutan: commit perubahan secara teratur; GitHub Pages menerapkan ulang secara otomatis.
Cadangan: aktifkan perlindungan repositori GitHub atau mirror repositori.
Anda sekarang adalah pemilik situs web sejati—bagikan tautan GitHub Pages Anda dan tunjukkan kreasi Anda kepada dunia!
