Cara Buat Laman Web dengan ChatGPT: Tiga Cara yang Berkesan

Untuk membuat laman web dengan ChatGPT, anda boleh minta ia menulis HTML dan CSS laman itu dan kemudian letakkan fail tersebut di perkhidmatan hosting sendiri, gunakannya untuk merancang halaman dan menulis teks sebelum membina dalam pembina laman web, atau sambungkan pembina AI seperti Mythex dalam ChatGPT supaya ia boleh membina, menghos dan menerbitkan laman untuk anda dari sembang yang sama. Cara pertama percuma dan sesuai untuk laman satu halaman; cara ketiga ialah yang anda mahu apabila laman memerlukan borang yang menyimpan data, log masuk, atau kemas kini yang kerap. Panduan ini menunjukkan setiap kaedah dengan prompt, dan jelas tentang di mana setiap kaedah itu berhenti.

Apa yang ChatGPT boleh dan tidak boleh buat sendiri

ChatGPT sangat bagus dalam penulisan: kod, tajuk utama, teks halaman, dan perancangan. Tetapi ia bukan syarikat hosting. Ia tidak memberi laman anda alamat awam, ia tidak menjalankan pangkalan data, dan ia tidak menyimpan fail laman anda antara projek seperti yang dilakukan oleh pembina. Setiap kaedah di bawah ialah jawapan berbeza kepada jurang itu.

Kaedah 1: ChatGPT menulis kod, anda hoskan

Ini cara klasik dan berfungsi dengan baik untuk laman statik yang ringkas: portfolio, laman pendaratan, laman majlis perkahwinan.

Langkah 1: Minta satu halaman fail tunggal yang lengkap

Nyatakan kandungan dan susun atur dengan spesifik:

Tulis laman web satu halaman yang lengkap sebagai satu fail HTML dengan CSS di dalam tag style. Ia untuk Maya Haddad, seorang ilustrator bebas di Amman. Bahagian: pengepala dengan namanya dan "Ilustrasi untuk buku dan jenama", grid enam imej portfolio (guna laluan imej placeholder yang boleh saya gantikan), perenggan ringkas tentang dirinya, senarai tiga perkhidmatan dengan harga permulaan, dan bahagian hubungan dengan emelnya sebagai pautan mailto. Kemas, moden, ruang putih yang luas, berfungsi di telefon. Tiada rangka kerja JavaScript.

Meminta satu fail menjadikannya mudah untuk disimpan dan dimuat naik.

Langkah 2: Simpan dan buka

Salin kod ke dalam editor teks, simpan sebagai index.html, dan buka dalam pelayar anda. Jika ada yang tidak kena, terangkan kepada ChatGPT: "grid imej ialah satu lajur di desktop; jadikannya tiga lajur di atas lebar 900px."

Langkah 3: Gantikan placeholder

Tukar imej placeholder dengan imej anda sendiri dan gantikan teks yang ChatGPT reka. Semak harga, emel dan nama dengan teliti; AI mengisi jurang dengan yakin.

Langkah 4: Letakkan dalam talian

Muat naik fail ke hosting statik percuma seperti GitHub Pages, atau mana-mana hos web yang anda sudah bayar. Anda akan mendapat alamat awam. Untuk menggunakan domain sendiri, ikut arahan hos anda; panduan kami tentang menyambungkan domain tersendiri menerangkan bahagian DNS.

Di mana Kaedah 1 berhenti

• Borang yang menyimpan data. Borang hubungan perlukan tempat untuk menghantar penyerahan. Anda perlukan perkhidmatan borang atau pelayan.
• Log masuk dan kawasan ahli. Ini memerlukan backend dan pangkalan data.
• Banyak halaman. Mengekalkan header dan menu yang konsisten merentasi sepuluh fail yang ditampal secara manual adalah memenatkan.
• Kemas kini. Setiap perubahan bermakna meminta kod baharu, menampalnya dan memuat naik semula.

Kaedah 2: ChatGPT merancang, pembina membina

Di sini ChatGPT melakukan pemikiran dan penulisan, manakala pembina laman web melakukan pembinaan dan hosting.

Langkah 1: Rancang laman dengan ChatGPT

Saya menjalankan kedai roti keluarga kecil di Manchester yang menerima tempahan kek. Cadangkan halaman yang diperlukan oleh laman web saya, apa yang perlu dikatakan oleh setiap halaman, dan satu tindakan yang saya mahu pelawat ambil pada setiap halaman. Kekalkan kepada lima halaman atau kurang.

Langkah 2: Tulis teks

Minta teks untuk setiap halaman, kemudian tulis semula dalam suara anda sendiri. Tambah butiran sebenar yang ChatGPT tidak tahu: waktu buka, harga, kawasan penghantaran, dan apa yang menjadikan kek anda berbeza.

Langkah 3: Bina dalam pembina

Tampal rancangan dan teks ke dalam pembina laman web. Dalam alat seret dan lepas, anda letakkan teks ke dalam templat. Dalam pembina AI, anda boleh beri keseluruhan rancangan sebagai satu mesej dan ia akan membina halaman-halamannya; contohnya, dalam pembina laman web Mythex:

Bina laman web untuk kedai roti keluarga di Manchester menggunakan rancangan dan teks ini: [tampal]. Sertakan borang permintaan tempahan yang menyimpan setiap permintaan (nama, telefon, jenis kek, tarikh diperlukan, mesej) supaya saya boleh melihatnya dalam halaman admin yang hanya saya boleh log masuk. Reka bentuk yang hangat dan mesra, berfungsi di telefon.

Borang tempahan di sini disimpan ke pangkalan data sebenar, sesuatu yang fail HTML yang ditampal tidak boleh lakukan. Untuk lebih lanjut tentang laluan ini, lihat cara membina laman web dengan AI.

Kaedah 3: Bina dan terbitkan dari dalam ChatGPT

Pilihan terbaru ialah menyambungkan pembina ke ChatGPT supaya ChatGPT boleh menggunakan alat pembina itu secara terus. Anda kekal dalam perbualan ChatGPT; pembina menyediakan projek, pratonton, pangkalan data dan hosting.

Mythex berfungsi begini melalui aplikasi ChatGPTnya (penyambung MCP). Anda menyambungkannya dari Tetapan akaun dalam Mythex; sambungan berfungsi pada mana-mana pelan, dan alat yang menjalankan sandbox projek anda memerlukan Pro. Setelah bersambung, anda boleh bertanya sesuatu seperti:

Menggunakan Mythex, cipta laman web baharu untuk kedai roti saya dengan halaman utama, halaman menu dengan kek dan harga, dan borang permintaan tempahan yang menyimpan ke pangkalan data. Tunjukkan pratonton, dan terbitkan apabila saya kata ia sudah kemas.

Kemudian ChatGPT mencipta projek, menulis kod, menjalankannya, dan menerbitkannya ke URL awam apabila anda meluluskannya. Perubahan hanyalah lebih banyak mesej dalam sembang yang sama. Pendekatan penyambung yang sama juga berfungsi dari Claude, Cursor dan Codex. Untuk latar belakang tentang cara ini berfungsi dan pembina mana yang menyokongnya, lihat aplikasi pembina AI dengan MCP.

Kaedah mana patut anda pilih?

Tip prompt yang berfungsi untuk mana-mana kaedah

• Beri fakta sebenar di awal. Nama, lokasi, perkhidmatan, harga, butiran hubungan. Kurang butiran yang direka bermakna kurang kerja membersihkan.
• Terangkan pelawat dan matlamat. "Seorang ibu bapa yang mencari kek hari jadi, yang sepatutnya akhirnya menghantar permintaan tempahan."
• Minta susun atur utamakan telefon. Kebanyakan pelawat menggunakan telefon.
• Tukar satu perkara setiap mesej setelah versi pertama wujud.
• Minta asas SEO secara nyata: tajuk dan penerangan unik untuk setiap halaman, pengepala sebenar, teks alt pada imej. Lihat SEO untuk laman web yang dibina dengan AI.

Panduan kami tentang menulis prompt untuk pembina aplikasi AI mempunyai lebih banyak corak.

Masalah biasa dan penyelesaiannya

• Reka bentuknya kelihatan generik. Beri rujukan: "seperti kafe Scandinavia yang tenang, banyak putih dan satu hijau lembut."
• Kod terpotong. Minta ChatGPT sambung dari baris terakhir, atau bahagikan halaman kepada beberapa bahagian dan minta satu demi satu.
• Ia mereka testimoni atau statistik. Buang. Ulasan palsu merosakkan kepercayaan, dan di banyak tempat ia melanggar peraturan perlindungan pengguna.
• Laman rosak selepas perubahan. Simpan salinan versi kerja terakhir sebelum menampal kod baharu. Pembina seperti Mythex menyimpan checkpoint supaya anda boleh kembali semula.

Sebelum anda menerbitkan

Baca setiap perkataan pada setiap halaman. Pastikan butiran hubungan berfungsi. Buka laman di telefon. Pastikan mana-mana imej adalah milik anda atau dilesenkan dengan betul. Kemudian terbitkan, dan kongsikannya di tempat pelawat anda sudah berada. Jika anda mahu keseluruhan perkara ini tanpa kos, cara membuat laman web secara percuma menerangkan pilihan hosting percuma dengan lebih terperinci.

Soalan lazim