Langkau ke kandungan
WANCODE
EN

Deploy projek anda

Letak projek WANCode yang dimuat turun dalam talian secara percuma dengan static hosting — langkah demi langkah untuk projek web biasa dan projek React (Vite).

Projek anda ialah laman statik: hanya fail (HTML, CSS, JavaScript, imej) tanpa kod server. Banyak hos menyediakan laman statik secara percuma, termasuk HTTPS. Panduan ini tidak memihak kepada mana-mana penyedia; pilih yang anda suka.

Butiran boleh berubah

Penyedia hosting mengubah peraturan pendaftaran, pelan percuma dan menu mereka dari semasa ke semasa. Langkah di bawah menerangkan cara ia berfungsi semasa panduan ini ditulis — jika sesuatu butang sudah berpindah, semak dokumentasi penyedia itu sendiri.

1. Sediakan fail anda

  1. Muat turun projek daripada Playground (Eksport ZIP) atau lesson/projek (Muat turun projek) dan nyahzip (unzip).
  2. Pastikan index.html berada di peringkat teratas folder yang akan dimuat naik. Hos mencari nama yang tepat itu.
  3. Pastikan path anda relatif (style.css, images/logo.png, bukan C:\Users\…) dan sepadan dengan nama fail dengan tepat — kebanyakan server sensitif huruf besar/kecil, jadi Logo.png ≠ logo.png.
  4. Cari dalam kod anda apa-apa yang rahsia. Semua yang anda deploy boleh dibaca oleh sesiapa yang melawat.

2a. Projek HTML/CSS/JS biasa

Folder yang sudah dinyahzip itu sudah pun laman webnya. Tiga pilihan percuma yang biasa:

  • Netlify Drop — buka app.netlify.com/drop dan seret folder projek anda ke halaman itu. Anda dapat URL langsung dalam beberapa saat. Cipta akaun percuma (atau tuntut laman itu) jika anda mahu ia kekal dalam talian dan boleh dikemas kini kemudian.
  • GitHub Pages — cipta repositori awam di GitHub, pilih Add file → Upload files dan seret fail anda masuk, kemudian commit. Dalam Settings → Pages repositori itu, tetapkan sumber deploy daripada branch main, folder root. Selepas seminit dua, laman anda berada di https://<username>.github.io/<repository>/.
  • Vercel — daftar akaun percuma, kemudian sama ada import repositori Git (push fail anda ke GitHub dahulu) atau jalankan Vercel CLI dari folder projek. Untuk folder statik biasa, tiada tetapan build diperlukan.

2b. Projek React (Vite)

Projek React mesti di-build dahulu. Proses build menukar JSX anda kepada fail biasa yang dioptimumkan dalam folder dist — folder itulah yang anda deploy, bukan src.

Terminal
npm install        # once
npm run build      # creates the dist/ folder
npm run preview    # optional: test the built site locally
  • Netlify Drop: seret folder dist (bukan keseluruhan projek) ke halaman drop.
  • Vercel atau Netlify dengan Git: push keseluruhan projek (tanpa node_modules dan dist) ke GitHub dan import. Biasanya Vite dikesan secara automatik; jika ditanya, arahan build ialah npm run build dan direktori output ialah dist.
  • GitHub Pages: laman anda berada di bawah /<repository>/, jadi tetapkan base: "/<repository>/" dalam vite.config.js sebelum build. Dokumentasi Vite ada workflow GitHub Actions yang sedia untuk deploy dist.

Jangan buka dist/index.html dengan dwi-klik — fail yang sudah di-build perlu dihidangkan oleh web server. Guna npm run preview untuk menyemak build secara tempatan.

3. Selepas ia dalam talian

  • Buka URL itu di telefon dan juga komputer anda.
  • Buka developer tools pelayar dan semak Console untuk ralat 404 (biasanya path atau huruf besar/kecil nama fail yang salah).
  • Untuk mengemas kini laman, deploy semula (seret folder sekali lagi, atau push ke Git jika sudah disambungkan).
  • Domain sendiri (seperti namaanda.my) adalah pilihan dan biasanya berbayar; setiap hos di atas memberi alamat percuma dahulu.

Kod front-end adalah awam

Apa sahaja dalam laman statik — termasuk environment variable yang dimasukkan semasa build, seperti pemboleh ubah VITE_ — boleh dibaca oleh pelawat. Jangan sesekali deploy rahsia API dalam kod front-end; ia sepatutnya berada di server.