Cara Membuat Website dengan ChatGPT: Prompt, Kode, dan Cara Publikasi

ChatGPT dapat membantu menyusun struktur, menulis salinan, dan menghasilkan HTML/CSS untuk website sederhana. Cara paling mudah untuk mencoba hasilnya adalah meminta satu file HTML, menyimpannya, lalu membukanya di browser. ChatGPT tidak otomatis membeli domain atau menerbitkan file itu ke internet: publikasi tetap membutuhkan hosting, domain bila diinginkan, dan pemeriksaan dari Anda.

Contoh proyek: landing page kedai kopi lokal

Kita gunakan contoh hipotetis bernama Kopi Sudut. Tujuan halamannya adalah menjelaskan menu dan mengarahkan calon pelanggan untuk bertanya lewat WhatsApp. Karena merek dan isi ini simulasi, ganti alamat, harga, klaim, foto, dan tautan dengan informasi yang benar sebelum dipakai.

1. Tulis brief sebelum meminta kode

Prompt yang menyebut pembaca, tujuan, konten yang tersedia, dan batas teknis memberi arah yang lebih jelas daripada perintah singkat seperti “buat website keren”. Minta hasil dibagi menjadi bagian kecil supaya Anda dapat menilai struktur sebelum menambah dekorasi.

Saya pemilik kedai kopi fiktif Kopi Sudut di Bandung. Buat landing page satu halaman untuk pelanggan sekitar yang ingin melihat menu dan bertanya sebelum datang.

Bagian: hero dengan satu CTA, 3 menu contoh berlabel simulasi, cerita singkat, jam buka placeholder, lokasi placeholder, FAQ, dan kontak WhatsApp placeholder.

Gaya: editorial hangat, latar krem, teks gelap, aksen hijau; nyaman dibaca di ponsel. Jangan mengarang ulasan, sertifikasi, harga aktual, atau klaim kesehatan.

Teknis: satu file index.html, HTML semantik, CSS di dalam <style>, tanpa framework/CDN/JavaScript eksternal. Semua tombol harus punya tujuan. Tandai data yang perlu saya ganti. Sertakan instruksi cara membuka file dan checklist aksesibilitas.

Contoh output awal yang dapat dijalankan

<!doctype html>
<html lang="id">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kopi Sudut — menu dan lokasi</title>
<style>body{font:17px/1.6 system-ui;margin:0;color:#202820;background:#f8f4ea}main{max-width:860px;margin:auto;padding:48px 22px}h1{font-size:clamp(2.3rem,8vw,4.5rem);line-height:1.05}section{padding:28px 0;border-top:1px solid #ccd2c5}.cta{display:inline-block;background:#28583d;color:white;padding:12px 18px;border-radius:8px;text-decoration:none}:focus-visible{outline:3px solid #9b642d;outline-offset:3px}</style>
<main>
  <header><p>KEDAI KOPI · BANDUNG</p><h1>Jeda yang pas, dekat dari sini.</h1><p>Tempat singgah untuk kopi dan obrolan santai. Ganti lokasi serta jam dengan informasi usaha yang sudah dikonfirmasi.</p><a class="cta" href="https://wa.me/62XXXXXXXXXXX?text=Halo%2C%20saya%20ingin%20bertanya%20tentang%20menu">Tanya menu via WhatsApp</a></header>
  <section><h2>Menu contoh</h2><ul><li>Es kopi susu — harga simulasi</li><li>Kopi tubruk — harga simulasi</li><li>Teh rempah — harga simulasi</li></ul></section>
  <section><h2>Jam buka & lokasi</h2><p>[ISI JAM BUKA DAN ALAMAT YANG BENAR]</p></section>
</main>
</html>

2. Minta file, simpan, lalu periksa

1. Minta ChatGPT menghasilkan satu dokumen HTML lengkap dan jelaskan struktur tiap bagian.
2. Salin kode ke editor teks sebagai `index.html` (pastikan ekstensi bukan `.txt`).
3. Buka file tersebut di browser untuk memeriksa tata letak dasar; ini hanya preview lokal di komputer Anda.
4. Uji lebar layar kecil, tautan, teks placeholder, kontras, dan navigasi keyboard.
5. Kirim satu daftar revisi yang spesifik, misalnya “perkecil hero di layar 360 px dan jangan ubah isi menu”.

ChatGPT dapat menampilkan preview HTML atau React pada mode dan akun tertentu, tetapi tombol serta fitur yang tersedia dapat berubah menurut paket, perangkat, dan pengaturan. Alternatifnya, dokumentasi OpenAI menjelaskan blok kode yang bisa disalin atau dipreview pada pengalaman yang mendukungnya. Preview di chat tidak sama dengan website publik di domain Anda.

Contoh permintaan revisi

Tinjau file yang tadi. Jangan menulis ulang keseluruhan desain. Perbaiki hanya: (1) menu tidak bisa dibaca pada latar gelap, (2) tombol WhatsApp harus memakai URL placeholder https://wa.me/62XXXXXXXXXXX dengan pesan yang di-encode, (3) pada prefers-reduced-motion matikan transisi dekoratif. Tampilkan bagian yang berubah dan jelaskan cara mengeceknya.

3. Tambahkan tujuan WhatsApp dengan benar

Nomor dan pesan harus diganti dengan data usaha yang benar. Format dasar tautan adalah `https://wa.me/6281234567890?text=Halo%20Kopi%20Sudut`; gunakan kode negara tanpa tanda plus, spasi, atau tanda hubung. Jangan mencantumkan nomor pribadi ke versi publik tanpa persetujuan pemiliknya. Tes tautan dari ponsel dan browser desktop sebelum peluncuran.

4. Publikasikan: file lokal perlu tempat hosting

Untuk file statis, unggah file ke layanan hosting yang mendukung situs statis lalu hubungkan domain jika dibutuhkan. Ikuti dokumentasi host tentang DNS dan HTTPS; perubahan DNS dapat membutuhkan waktu untuk tersebar. Jangan menaruh password, token, atau secret dalam JavaScript yang dikirim ke browser.

Periksa output HTML sebelum menganggapnya siap

Buka source yang dihasilkan dan cari elemen yang dibuat AI dari asumsi: link `#` tanpa tujuan, gambar dari URL sementara, tombol yang hanya dekorasi, serta nomor WhatsApp placeholder. Periksa apakah setiap bagian memakai heading yang berurutan dan apakah teks tetap terbaca ketika CSS gagal dimuat. Tanyakan kepada model file apa yang berubah pada setiap revisi, lalu salin versi yang sudah Anda setujui ke folder proyek agar satu sesi chat yang panjang tidak menjadi satu-satunya salinan kerja.

Bila hasil awal memakai HTML satu file, Anda bisa menambah script kecil untuk menu atau filter, tetapi evaluasi dulu apakah interaksi itu memang diperlukan. Form kontak memerlukan endpoint atau layanan penerima; tag `<form>` tanpa backend hanya menampilkan tampilan input. Untuk formulir yang mengumpulkan informasi pelanggan, jelaskan tujuan data, batasi informasi yang diminta, dan uji siapa yang menerima pesan sebelum menyebarkan link.

Limitasi dan kapan bantuan developer berguna

• Kode AI dapat terlihat rapi tetapi masih memiliki tautan mati, kontras buruk, layout sempit, atau form yang tidak mengirim data.
• HTML satu file cocok untuk demo sederhana, bukan otomatis arsitektur terbaik untuk katalog besar, banyak editor, pembayaran, akun pengguna, atau integrasi internal.
• AI dapat membuat nama, ulasan, harga, atau klaim yang terdengar nyata. Verifikasi semua informasi bisnis dan hak penggunaan aset.
• Jika ada autentikasi, data pelanggan, backend, migrasi, integrasi, atau kebutuhan SEO yang perlu dipelihara, minta peninjauan teknis sebelum memakai kode di produksi.

Membuat halaman sendiri dengan AI sangat masuk akal untuk belajar, prototipe, atau situs informasi kecil yang jarang berubah. Untuk bisnis yang perlu CMS, pelacakan form yang andal, akses staf, keamanan, atau struktur halaman yang terus berkembang, nilai developer ada pada keputusan teknis, pengujian, dan pemeliharaan. Lihat juga panduan membuat landing page dengan AI dan layanan pengembangan website Ascendweb.

Checklist sebelum mengirim URL ke pelanggan

• Ganti semua placeholder dan pastikan klaim memiliki sumber dari bisnis.
• Klik setiap CTA dan uji form dengan data simulasi.
• Periksa tampilan ponsel, fokus keyboard, teks alternatif gambar, judul halaman, dan HTTPS.
• Simpan salinan sumber dan catat pemilik domain, akun hosting, serta biaya berulang.
• Jika ingin ditemukan di Google, lakukan pemeriksaan teknis dan editorial; publikasi tidak menjamin indexing atau ranking.

Sumber: OpenAI — Working with writing blocks and code blocks

Sumber: OpenAI — Creating and using ChatGPT Sites