PANDUAN PRAKTIKAL · 7 BAHAGIAN
Sebelum upload — semak folder website
Pastikan index.html berada di root folder, semua gambar disimpan dengan laluan relatif yang betul dan link WhatsApp menggunakan nombor yang sah. Jangan upload fail peribadi, password atau API key.
Contoh folder: my-website/index.html dan my-website/images/logo.webp.
Langkah 1 — Daftar atau log masuk Cloudflare
Buka dashboard Cloudflare dan pergi ke kawasan Workers & Pages. Pilih aliran untuk mencipta Pages project menggunakan upload aset statik atau Direct Upload.
Gunakan arahan UI semasa kerana label dan lokasi menu boleh berubah.
Langkah 2 — Upload aset website
Pilih nama project yang sesuai. Upload folder atau fail ZIP yang mengandungi index.html pada root. Semak preview senarai fail jika disediakan, kemudian deploy.
Jika ZIP mempunyai satu folder tambahan sebelum index.html, sesetengah deployment boleh menyebabkan homepage gagal ditemui.
Langkah 3 — Buka URL pages.dev
Selepas deployment berjaya, Cloudflare menyediakan URL seperti nama-project.pages.dev. Buka URL tersebut dan periksa menu, imej, layout mobile serta semua CTA.
URL contoh hanyalah ilustrasi; nama subdomain sebenar bergantung kepada project anda.
Langkah 4 — Sambung domain sendiri jika perlu
Jika anda memiliki domain, gunakan tetapan Custom domains pada Pages project dan ikuti arahan pengesahan DNS yang dipaparkan Cloudflare. Masa propagasi bergantung pada konfigurasi domain.
Jangan ubah DNS website bisnes yang sedang aktif tanpa menyemak impaknya dahulu.
Langkah 5 — Uji sebelum kongsi
Buka website melalui rangkaian dan peranti berbeza. Semak title, description, gambar, form jika ada, dan CTA WhatsApp. Tetapkan sambungan HTTPS dan semak paparan selepas refresh.
Untuk perubahan seterusnya, deploy versi baharu dan semak sekali lagi.
Langkah 6 — Tingkatkan visibility Google selepas publish
Google mungkin belum jumpa atau index website baharu. Sediakan metadata yang jelas, kandungan berguna dan pertimbangkan Google Search Console. Usaha SEO berterusan diperlukan jika sasaran anda pelanggan daripada search.
Semak indexing dan prestasi carian secara berkala sebelum menentukan keutamaan SEO seterusnya.
WI-03 · WORK INSTRUCTION · 20–40 MINIT
Publish dan sahkan website live
Gunakan folder Sinar Bina Renovasi (contoh latihan fiksyen) daripada WI-02. Prasyarat: akaun Cloudflare dan fail index.html yang sudah lulus ujian browser.
Demo latihan yang boleh dicuba: Buka Sinar Bina Renovasi ↗. Bisnes fiksyen; CTA simulasi sahaja, tiada data dihantar. Muat turun fail demo (ZIP).
01 — Verify bahan upload
Pastikan folder latihan mempunyai index.html pada root, dan images/ jika ada. Buang .env, password, backup SQL dan fail pelanggan. Folder atau ZIP boleh digunakan untuk dashboard drag-and-drop.
sinar-bina-demo/
├── index.html
└── images/
└── projek-sendiri.webpExpected result: index.html boleh dibuka dalam browser sebelum diupload.
02 — Login dan pilih Direct Upload
Panduan dashboard: Log masuk ke akaun Cloudflare anda dan ikuti langkah teks di bawah. Rujuk dokumentasi rasmi untuk label menu semasa.
Pergi ke dashboard Cloudflare → Workers & Pages → Create application → Get started → Drag and drop your files. Menu mungkin berubah; rujuk dokumentasi rasmi di bawah.
Documentation: https://developers.cloudflare.com/pages/get-started/direct-upload/Expected result: Anda melihat skrin untuk namakan Pages project dan upload fail.
03 — Namakan project dan upload
Panduan dashboard: Log masuk ke akaun Cloudflare anda dan ikuti langkah teks di bawah. Rujuk dokumentasi rasmi untuk label menu semasa.
Masukkan nama unik seperti sinar-bina-latihan-anda. Drag folder output atau ZIP yang berisi index.html di root. Pastikan tiada error berkaitan saiz fail.
Nama project menentukan URL: [nama-project].pages.dev
Alamat ini contoh, bukan URL yang sudah diwujudkan.Expected result: Cloudflare menerima aset tanpa amaran merah.
04 — Deploy site
Panduan dashboard: Log masuk ke akaun Cloudflare anda dan ikuti langkah teks di bawah. Rujuk dokumentasi rasmi untuk label menu semasa.
Tekan Deploy site. Tunggu deployment siap dan simpan URL pages.dev yang sebenar. Jika deployment gagal, baca mesej error sebelum cuba semula.
URL contoh: https://nama-project.pages.dev/Expected result: Deployment menunjukkan status berjaya, URL boleh diakses dari tab lain.
05 — Acceptance test website live
Buka alamat pages.dev pada tab incognito dan telefon. Test homepage, menu, contact, gambar, mobile dan HTTPS. Jangan anggap 'success deploy' bermaksud link dan content semua betul.
[ ] HTTP 200 / tiada 404
[ ] HTTPS aktif
[ ] Tiada gambar rosak
[ ] Navigation berfungsi
[ ] WhatsApp nombor sebenar
[ ] Mobile tiada overflowBuka demo desktop ↗ · Cuba viewport 375px ↗
Demo interaktif ini dihoskan pada website COE.my untuk latihan. Ikuti WI-03 untuk menerbitkan salinan anda sendiri melalui Pages Direct Upload.
Expected result: Semua enam pemeriksaan lulus. Kalau gagal, betulkan fail tempatan dan deploy versi baharu.
06 — Kemas kini atau tambah domain
Panduan dashboard: Log masuk ke akaun Cloudflare anda dan ikuti langkah teks di bawah. Rujuk dokumentasi rasmi untuk label menu semasa.
Dalam Pages project pilih Create a new deployment untuk upload versi baharu. Untuk domain sendiri buka Custom domains dan ikut verifikasi DNS. Jangan ubah DNS domain produksi tanpa semak rekod berkaitan.
Penting: Project Direct Upload tidak boleh ditukar terus ke Git integration. Untuk automasi Git kemudian, sediakan project baharu atau pilih aliran Git dari awal.Expected result: Anda boleh deploy versi baharu dan memahami pilihan domain.
07 — Apa selepas website live?
Selepas website live, bantu Google menemui halaman melalui title, description dan content yang relevan. Jika guna domain sendiri, pertimbangkan Google Search Console dan pantau page indexing sebelum fokus enquiry.
Tiga perkara berbeza:
1. Website live
2. Website ditemui / diindex Google
3. Website menghasilkan enquiryExpected result: Website boleh diakses dan anda tahu langkah seterusnya.
Troubleshooting
404 selepas deployment?
Semak index.html terletak di root bahan upload, bukan dua lapisan folder, kemudian deploy semula.
Gambar / style rosak?
Semak relative path dan nama fail (termasuk huruf besar/kecil). Ulang upload dengan aset yang lengkap.
Masih nampak versi lama?
Semak deployment aktif, refresh tanpa cache dan uji dalam tab incognito.
Tiada menu Direct Upload?
Pastikan anda memilih aliran Pages dan baca dokumen rasmi Cloudflare Direct Upload ↗.
Nota: UI Cloudflare boleh berubah. Rujuk dokumentasi rasmi sebagai sumber utama. Checkbox hanya untuk semakan sesi, bukan rekod yang disimpan.
Soalan lazim
Perlu beli hosting?
Cloudflare Pages menawarkan pilihan penggunaan percuma dengan had tertentu yang boleh berubah. Semak pelan semasa sebelum penggunaan komersial berskala besar.
Boleh guna domain sendiri?
Ya, domain sendiri boleh dikonfigurasi melalui Custom domains dan DNS mengikut arahan dashboard.
Kenapa saya dapat 404?
Semak fail index.html pada root output yang diupload dan pastikan deployment berjaya.
LANGKAH SETERUSNYA
Website dah siap? Pastikan pelanggan boleh jumpa.
Website yang live ialah permulaan. Jika anda perlukan bantuan dengan struktur SEO, visibility Google atau cara mendapatkan enquiry, COE.my boleh bantu kenal pasti apa yang perlu diperbaiki.
Teroka Website SEO ↗Bincang Website Saya ↗