Kata Pengantar
Selepas mencipta laman web dengan alat AI seperti ChatGPT, Canva, Gemini Canvas, Claude Artifacts, atau Sider Web Creator, soalan besar seterusnya ialah cara mengendalikan pengehosan web di GitHub Pages supaya anda boleh melawati laman web melalui domain anda sendiri. Panduan ini membimbing anda langkah demi langkah melalui perjalanan—dari mengeksport projek dalam Sider Web Creator hingga menghasilkan laman web yang lengkap di bawah domain peribadi anda—sambil merungkai pengehosan web dan konfigurasi GitHub Pages sepanjang jalan.
🎯 Perkara Yang Akan Anda Pelajari
Cara memuat turun dan memahami fail projek dijana AI dengan betul sebelum memilih aliran kerja pengehosan web GitHub Pages.
Arahan langkah demi langkah untuk melancarkan laman web secara percuma di GitHub Pages.
Cara membeli dan mengikat domain tersuai anda sendiri di dalam tetapan GitHub Pages dan menyambungkannya ke rekod DNS amalan terbaik.
Petua pro untuk menjadikan laman web kelihatan benar-benar profesional dan boleh dipercayai sebaik sahaja persediaan GitHub Pages disiarkan secara langsung.
📥 Langkah 1: Muat Turun Laman Web Anda daripada Sider Web Creator
Kebanyakan platform pengehosan statik—termasuk GitHub Pages—menjangkakan folder binaan yang bersih, jadi pertama anda perlu mengumpulkan fail anda.
1.1 Muat Turun Fail Projek
Selepas Web Creator selesai menjana laman web, klik butang Muat Turun di sudut kanan atas.
Tunggu sementara sistem membungkus projek anda.
Anda akan menerima fail .zip yang sedia untuk muat naik GitHub Pages.
Ekstrak zip di mana-mana sahaja pada komputer anda.
1.2 Fahami Struktur Fail (Penting!)
laman-web-saya/
├── dist/ ⭐ Binaan pengeluaran untuk **GitHub Pages**
│ ├── index.html → Halaman utama
│ ├── assets/ → Stail & skrip
│ └── …
├── src/ 📝 Folder kod sumber
├── package.json 📦 Konfigurasi projek
└── …fail lain
Peringatan penting: Hanya kandungan di dalam dist/ diterbitkan di GitHub Pages.
1.3 Ujian Pratonton Tempatan
Masukkan folder dist/.
Klik dua kali index.html.
Laman web dibuka dalam penyemak imbas anda.
Sahkan semuanya berfungsi sebelum menolak ke GitHub Pages.
🚀 Langkah 2: Pilih Platform Pelancaran
Walaupun GitHub Pages ialah wira panduan ini, berikut ialah perbandingan pantas:
| |
|---|
🌟 GitHub Pages (fokus panduan ini) | Percuma sepenuhnya • Pelancaran seret dan lepas atau git push • HTTPS percuma • CDN global • Domain tersuai • CI asli dengan GitHub Actions |
| Rangkaian pinggir global • 100 % percuma • Sangat pantas |
| UI yang digilap • Kaya dengan ciri |
📤 Langkah 3: Lancarkan ke GitHub Pages (Panduan Terperinci)
Walaupun GitHub Pages berada di dalam platform pembangun, anggap ia sebagai pengehosan web ultra-moden dengan kemudahan menekan butang.
3.1 Daftar & Cipta Repositori
Lawati github.com dan log masuk.
Klik + Repositori baharu.
Namakan ia laman-web-saya dan pilih Awam (atau Peribadi jika anda mempunyai pelan berbayar; GitHub Pages kini menyokong repositori peribadi).
Biarkan Mulakan dengan README tidak ditanda jika anda bercadang untuk menolak kemudian.
3.2 Tambah Fail Laman Web Anda
Kaedah A: Muat Naik Seret dan Lepas (terbaik untuk pemula)
Dalam tab Kod repositori, klik Tambah fail → Muat naik fail.
Lepaskan segala-galanya di dalam dist/.
Tatal ke bawah dan klik Serahkan perubahan.
Kaedah B: Git CLI (terbaik untuk pembangun)
# Klon repositori kosong
git clone https://github.com/<pengguna>/laman-web-saya.git
cd laman-web-saya
# Salin output binaan
cp -r /laluan/ke/dist/* .
# Serahkan & tolak
git add .
git commit -m "Pelancaran **GitHub Pages** awal"
git push origin main
Sama ada laluan meninggalkan anda dengan fail statik di akar repositori—sesuai untuk GitHub Pages.
3.3 Dayakan GitHub Pages
Pergi ke Tetapan → Pages.
Di bawah Sumber, pilih Lancar dari cabang → main (/akar).
Klik Simpan. GitHub Pages membina dalam ~30 saat dan mengembalikan URL seperti https://<pengguna>.github.io/laman-web-saya/.
3.4 Dapatkan URL Lalai Anda
Lawati pautan untuk mengesahkan semuanya dimuatkan. GitHub Pages berkhidmat secara automatik melalui CDN global.
🌐 Langkah 4: Beli dan Ikat Domain Anda Sendiri
4.1 Beli Domain
Pendaftar yang dicadangkan (semua berfungsi dengan baik dengan GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Pilih .com pendek jika boleh.
4.2 Tambah Domain dalam GitHub Pages
Masih dalam Tetapan → Pages, cari Domain tersuai.
Masukkan lamanwebsaya.com atau www.lamanwebsaya.com.
Klik Simpan. GitHub Pages menulis fail CNAME secara automatik.
4.3 Konfigurasikan Rekod DNS
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Tunggu 10 min–24 jam untuk perambatan. IP ini adalah malar untuk GitHub Pages. |
4.4 Kuatkuasakan HTTPS
Selepas DNS merambat, segarkan semula tetapan Pages dan togol Kuatkuasakan HTTPS. Sijil Let’s Encrypt dikeluarkan secara automatik.
✨ Langkah 5: Jadikan Laman Web Kelihatan Profesional
5.1 Tambah Favicon Tersuai
Sediakan ikon 32×32 px bernama favicon.ico.
Letakkannya di akar repositori.
Serahkan dan tolak; GitHub Pages menyediakannya serta-merta.
5.2 Masukkan Info Meta Tersuai
Edit index.html dalam akar repositori:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analitis (pilihan)
Tampal coretan GA / Plausible di dalam <head>; GitHub Pages menghormati pengepala cache.
🔧 Penyelesaian Masalah
Halaman kosong? Sahkan index.html berada di akar repositori dan laluan aset adalah relatif.
Gelung domain ke .github.io? Semak semula rekod A/CNAME dan tunggu TTL penuh.
Togol HTTPS dilumpuhkan? DNS belum betul; sahkan dengan dig.
🎉 Ringkasan
Tahniah! Anda kini telah:
✅ Berjaya memuat turun laman web dijana AI anda yang sedia untuk pengehosan GitHub Pages.
✅ Melancarkannya secara percuma ke GitHub Pages.
✅ Mendapatkan domain tersuai anda sendiri.
✅ Menggilap persekitaran GitHub Pages untuk kelihatan benar-benar profesional.
Laman web anda kini:
🌐 Dalam talian 24/7, dikuasakan oleh GitHub Pages CDN.
🏷️ Disediakan di bawah domain profesional.
🔒 Dilindungi oleh penyulitan HTTPS.
⚡ Pantas secara global terima kasih kepada nod pinggir GitHub Pages.
🗝️ Dimiliki dan dikawal sepenuhnya oleh anda.
💡 Langkah Seterusnya
Pengoptimuman SEO: tambahkan kata kunci dan penerangan meta yang disasarkan untuk meningkatkan kedudukan carian untuk persediaan GitHub Pages anda.
Perkongsian sosial: integrasikan butang kongsi untuk platform utama.
Kemas kini berterusan: serahkan perubahan dengan kerap; GitHub Pages melancar semula secara automatik.
Sandaran: dayakan perlindungan repositori GitHub atau cerminkan repositori.
Anda kini pemilik laman web sejati—kongsikan pautan GitHub Pages anda dan tunjukkan ciptaan anda kepada dunia!
