Cara Membuat Website dengan ChatGPT: Tiga Cara yang Berhasil

Untuk membuat website dengan ChatGPT, kamu bisa meminta ChatGPT menulis HTML dan CSS situsmu lalu menaruh file-file itu di layanan hosting sendiri. Kamu juga bisa memakainya untuk merencanakan halaman dan menulis teksnya sebelum membangun di website builder, atau menghubungkan AI builder seperti Mythex di dalam ChatGPT supaya situsmu dibangun, dihosting, dan dipublikasikan langsung dari chat yang sama. Cara pertama gratis dan cukup untuk situs satu halaman; cara ketiga adalah pilihan yang tepat saat situsmu butuh formulir yang menyimpan data, login, atau pembaruan rutin. Panduan ini menunjukkan setiap cara dengan prompt, dan jujur tentang titik di mana setiap cara mulai tidak memadai.

Apa yang bisa dan tidak bisa dilakukan ChatGPT sendiri

ChatGPT sangat bagus dalam menulis: kode, judul, teks halaman, dan rencana. Tapi secara bawaan ia bukan penyedia hosting. Ia tidak memberi situsmu alamat publik, tidak menjalankan database, dan tidak menyimpan file situsmu di antara proyek seperti yang dilakukan builder. Setiap cara di bawah ini adalah jawaban berbeda untuk kekurangan tersebut.

Cara 1: ChatGPT menulis kode, kamu yang menghosting

Ini cara klasik dan cocok untuk situs statis yang sederhana: portofolio, halaman arahan, atau halaman pernikahan.

Langkah 1: Minta halaman lengkap dalam satu file

Jelaskan isi dan tata letaknya dengan spesifik:

Tulis website satu halaman yang lengkap sebagai satu file HTML dengan CSS di dalam tag style. Ini untuk Maya Haddad, ilustrator lepas di Amman. Bagiannya: header dengan namanya dan "Ilustrasi untuk buku dan brand", grid enam gambar portofolio (pakai path gambar placeholder yang bisa saya ganti), paragraf singkat tentang dirinya, daftar tiga layanan dengan harga mulai, dan bagian kontak dengan email sebagai tautan mailto. Bersih, modern, banyak ruang kosong, nyaman di ponsel. Tanpa framework JavaScript.

Meminta satu file membuatnya lebih mudah disimpan dan diunggah.

Langkah 2: Simpan dan buka

Salin kodenya ke editor teks, simpan sebagai index.html, lalu buka di browser. Jika ada yang tidak sesuai, jelaskan ke ChatGPT: "grid gambarnya satu kolom di desktop; buat tiga kolom di atas lebar 900px."

Langkah 3: Ganti placeholder

Ganti gambar placeholder dengan gambarmu sendiri dan ganti teks apa pun yang dikarang ChatGPT. Periksa harga, email, dan nama dengan teliti; AI mengisi kekosongan dengan penuh percaya diri.

Langkah 4: Publikasikan

Unggah file ke layanan hosting statis gratis seperti GitHub Pages, atau host web lain yang sudah kamu bayar. Kamu akan mendapat alamat publik. Untuk memakai domain sendiri, ikuti petunjuk dari penyedia hostingmu; panduan kami tentang menghubungkan domain kustom menjelaskan bagian DNS-nya.

Di mana Cara 1 berhenti

• Formulir yang menyimpan data. Formulir kontak butuh tempat untuk mengirim data. Kamu memerlukan layanan formulir atau server.
• Login dan area anggota. Ini membutuhkan backend dan database.
• Banyak halaman. Menjaga header dan menu tetap konsisten di sepuluh file yang ditempel manual itu melelahkan.
• Pembaruan. Setiap perubahan berarti meminta kode baru, menempelkannya, dan mengunggah ulang.

Cara 2: ChatGPT merencanakan, builder yang membangun

Di sini ChatGPT yang berpikir dan menulis, sementara website builder yang membangun dan menghosting.

Langkah 1: Rencanakan situs bersama ChatGPT

Saya punya toko roti keluarga kecil di Manchester yang menerima pesanan kue ulang tahun. Sarankan halaman apa saja yang dibutuhkan website saya, apa isi tiap halaman, dan satu tindakan yang saya inginkan dari pengunjung di setiap halaman. Batasi maksimal lima halaman.

Langkah 2: Tulis teksnya

Minta teks untuk setiap halaman, lalu tulis ulang dengan gaya bahasamu sendiri. Tambahkan detail nyata yang tidak mungkin diketahui ChatGPT: jam buka, harga, area pengantaran, dan apa yang membuat kuemu berbeda.

Langkah 3: Bangun di builder

Tempel rencana dan teks ke website builder. Di builder drag-and-drop, kamu menaruh teks ke dalam template. Di AI builder, kamu bisa memberikan seluruh rencana sebagai satu pesan dan ia membangun halamannya; misalnya di website builder Mythex:

Bangun website untuk toko roti keluarga di Manchester memakai rencana dan teks ini: [tempel]. Sertakan formulir permintaan pesanan yang menyimpan setiap permintaan (nama, telepon, jenis kue, tanggal dibutuhkan, pesan) supaya saya bisa melihatnya di halaman admin yang hanya bisa diakses saya. Desain hangat dan nyaman, bekerja di ponsel.

Formulir pesanan di sini menyimpan data ke database sungguhan, sesuatu yang tidak bisa dilakukan file HTML yang ditempel. Untuk jalur ini, lihat cara membuat website dengan AI.

Cara 3: Bangun dan publikasikan dari dalam ChatGPT

Opsi terbaru adalah menghubungkan builder ke ChatGPT supaya ChatGPT bisa memakai alat builder itu secara langsung. Kamu tetap berada di percakapan ChatGPT; builder yang menyediakan proyek, pratinjau, database, dan hosting.

Mythex bekerja dengan cara ini melalui aplikasi ChatGPT-nya (konektor MCP). Kamu menghubungkannya dari Pengaturan Akun di Mythex; menghubungkan bisa dilakukan di paket mana pun, dan fitur yang menjalankan sandbox proyekmu membutuhkan Pro. Setelah terhubung, kamu bisa meminta ChatGPT sesuatu seperti:

Menggunakan Mythex, buat website baru untuk toko roti saya dengan halaman beranda, halaman menu berisi kue dan harga, serta formulir permintaan pesanan yang disimpan ke database. Tunjukkan pratinjaunya, dan publikasikan ketika saya bilang sudah bagus.

ChatGPT kemudian membuat proyek, menulis kodenya, menjalankannya, dan mempublikasikannya ke URL publik saat kamu menyetujui. Perubahan cukup berupa pesan lanjutan di chat yang sama. Pendekatan konektor yang sama juga bisa dipakai dari Claude, Cursor, dan Codex. Untuk latar belakang cara kerjanya dan builder mana yang mendukungnya, lihat AI app builder dengan MCP.

Cara mana yang harus dipilih?

Tips prompt yang berhasil untuk semua cara

• Berikan fakta nyata di awal. Nama, lokasi, layanan, harga, dan detail kontak. Semakin sedikit detail yang dikarang, semakin sedikit yang harus dibersihkan.
• Jelaskan pengunjung dan tujuannya. "Orang tua yang mencari kue ulang tahun, yang akhirnya mengirim permintaan pesanan."
• Minta tata letak yang mengutamakan ponsel. Kebanyakan pengunjung memakai ponsel.
• Ubah satu hal per pesan setelah versi pertama ada.
• Minta dasar SEO secara eksplisit: judul dan deskripsi unik per halaman, heading yang nyata, dan alt text pada gambar. Lihat SEO untuk website buatan AI.

Panduan kami tentang cara menulis prompt untuk AI app builder punya lebih banyak pola.

Masalah umum dan solusinya

• Desainnya terasa generik. Beri referensi: "seperti kafe Skandinavia yang tenang, banyak putih dan satu hijau muda yang lembut".
• Kodenya terpotong. Minta ChatGPT melanjutkan dari baris terakhir, atau pecah halamannya menjadi beberapa bagian dan minta satu per satu.
• Ia mengarang testimoni atau statistik. Hapus. Ulasan palsu merusak kepercayaan, dan di banyak tempat itu melanggar aturan perlindungan konsumen.
• Situs rusak setelah perubahan. Simpan salinan versi terakhir yang berfungsi sebelum menempelkan kode baru. Builder seperti Mythex menyimpan checkpoint supaya kamu bisa kembali ke versi sebelumnya.

Sebelum mempublikasikan

Baca setiap kata di setiap halaman. Pastikan detail kontak berfungsi. Buka situs di ponsel. Pastikan gambar yang dipakai milikmu sendiri atau berlisensi dengan benar. Lalu publikasikan, dan bagikan di tempat pengunjungmu sudah berada. Jika kamu ingin semuanya tanpa biaya, cara membuat website gratis membahas opsi hosting gratis dengan lebih detail.

Pertanyaan