Gak bisa ngoding, tetap punya website sendiri

Gue punya beberapa produk digital: webbook gratis, program belajar, kelas lanjutan, kalkulator, ebook. Masalahnya, link-nya tercecer. Di bio Threads cuma muat satu link, dan orang yang mampir nggak tahu gue ini siapa.

Jadi gue pengin satu halaman yang isinya kenalan singkat, foto gue di atas, terus kartu-kartu produk di bawahnya. Satu link buat semua.

Gue nggak bisa ngoding. Yang gue lakuin cuma ngobrol sama Claude, ngasih contoh website yang gue suka, kirim foto, terus revisi pelan-pelan. Dikerjain satu malam sepulang kantor, sampai nyambungin ke domain sendiri.

Webbook ini nyatet langkah-langkahnya, lengkap sama prompt yang gue pakai. Hasilnya bisa lo lihat langsung di jelangpensiun.my.id.

Claude bisa bikin desainnya, tapi isinya harus dari lo. Kumpulin dulu bahan di bawah ini. Centang yang udah siap, nanti tersimpan di browser lo.

• Akun ClaudeDaftar di claude.ai. Kerjanya lewat obrolan biasa.
• Foto profilFoto asli atau hasil AI dari foto asli. Bab 03 ada prompt-nya.
• Kalimat kenalan, 1 sampai 2 kalimatContoh punya gue: "Karyawan biasa yang lagi nyiapin penghasilan kedua sebelum pensiun dengan bikin produk digital."
• Cerita singkat, 3 sampai 4 paragrafKenapa lo mulai, pernah gagal di mana, sekarang lagi ngerjain apa.
• Daftar produk atau karyaNama, satu kalimat penjelasan, harga (atau "gratis"), dan link-nya.
• Link sosmedThreads, Instagram, WA Channel, atau etalase seperti Lynk.id.
• Akun Netlify (gratis)Buat naruh halamannya di internet. Dibahas di bab 06.
• Domain sendiri (boleh nyusul)Gue pakai .my.id, Rp3.500 setahun di SumoPod. Dibahas di bab 07.

0 dari 8 siap

Ini bagian paling seru. Daripada bingung njelasin "pengin yang keren", mending kasih Claude contoh website yang lo suka. Claude bisa baca susunannya, gaya hurufnya, warnanya, sampai efek geraknya, terus bikin versi lo sendiri.

Tempat cari contoh

Yang diperhatiin waktu lihat-lihat

• Bagian paling atas. Pakai foto besar, tulisan besar, atau animasi?
• Cara produk atau karya ditampilin. Kartu berjejer, daftar, atau kartu yang geser sendiri?
• Gerakannya waktu di-scroll. Ada yang muncul pelan, ada yang bergeser ke samping.
• Warnanya. Gelap, terang, hangat, atau dingin?

Pilih satu atau dua aja. Kebanyakan referensi malah bikin hasilnya campur aduk.

Cara ngasih referensi ke Claude

Ada empat cara, dari yang paling gampang:

1. Tempel link-nya di obrolan.
2. Kirim screenshot halaman yang lo suka.
3. Kalau templatenya datang sebagai prompt (seperti di Scrolltide), salin prompt-nya ke Claude.
4. Kalau ada file kodenya (biasanya .zip), lampirkan langsung. Gue pakai cara ini buat SELENE, dan hasilnya paling dekat.

Kalimat kuncinya: "jadikan inspirasi, bukan harus persis." Tanpa kalimat ini, Claude bisa nyalin terlalu mirip.

Contoh nyata: SELENE itu website konsep wisata ke bulan. Ada astronot, bumi terbit, pecahan debu yang hilang waktu di-scroll. Gue nggak ambil bulannya. Yang gue ambil gayanya: bagian atas yang sinematik, angka-angka kecil di pojok seperti layar instrumen, dan kartu yang bergeser ke samping. Claude ngubahnya jadi pintu hanggar yang kebuka ke landasan senja, nyambung sama judul ebook gue "Dari Hanggar ke Lepas Landas".

Gambar bikin halaman lo kerasa hidup. Gue pakai image generator (ChatGPT, Gemini, atau sejenisnya) buat bikin foto profil dan empat gambar kartu. Kuncinya satu: semua gambar harus satu suasana. Warna halaman nanti ngikutin warna fotonya.

Foto profil gue: cahaya sore keemasan dari jendela, ruangan cokelat tua, sweater krem. Dari foto ini Claude ngambil palet warna cokelat dan emas buat seluruh halaman.

Ini foto asli saya. Buat foto potret baru yang realistis dan autentik, wajah tetap mirip aslinya, jangan dibuat lebih muda.

Suasana: sore hari, cahaya matahari keemasan masuk dari jendela di samping kiri. Saya duduk di meja kayu, bertopang dagu, menatap ke luar jendela dengan tenang. Pakai sweater rajut warna krem. Latar ruang kerja rumah dengan rak buku dan lampu kecil yang buram. Di meja ada cangkir kopi dan buku catatan terbuka.

Bentuk persegi 1:1, wajah di tengah agak ke kanan. Tanpa tulisan, logo, atau watermark.

Ini foto asli saya. Ubah jadi ilustrasi avatar setengah badan dengan gaya ilustrasi digital lembut, garis tipis, warna hangat. Wajah, kacamata, dan gaya rambut tetap mirip foto. Ekspresi ramah, senyum tipis. Latar polos warna cokelat muda dengan cahaya lembut dari samping. Bentuk persegi 1:1, tanpa tulisan.

Pakai foto saya yang terlampir sebagai acuan wajah. Buat gambar mendatar 16:9, foto realistis yang autentik. Saya berdiri di teras rumah saat matahari terbenam, memandang ke depan dengan tenang, kamera dari samping belakang sehingga wajah terlihat sebagian. Sepertiga kiri gambar dibiarkan lega berupa langit jingga yang buram, karena nanti akan ditaruh judul. Cahaya hangat keemasan, bayangan cokelat tua. Tanpa tulisan, logo, atau watermark.

Gambar kartu produk

Buat kartu produk, kirim semua prompt di satu obrolan yang sama supaya wajahnya konsisten. Mulai dengan kalimat pembuka, baru gambar satu per satu.

Ini foto acuan untuk tokoh bernama Pak Arif. Saya akan minta beberapa gambar untuk kartu produk di website. Semua gambar harus memakai wajah, kacamata, gaya rambut, dan nuansa warna yang sama dengan foto ini.

Aturan untuk semua gambar: bentuk tegak 3:4, foto realistis yang autentik seperti diambil kamera full frame dengan lensa 50mm, cahaya matahari keemasan dari samping, bayangan cokelat tua yang hangat, latar agak buram. Tidak boleh ada tulisan, angka, logo, merek, atau layar yang menampilkan teks. Sisakan area tenang di pojok kiri atas. Jangan taruh bagian penting di 10% tepi gambar.

Gambar untuk produk "nama produk". Pak Arif yang sama dengan sweater rajut krem, sedang apa di tempat mana pada pagi / siang / sore / senja. Di sekitarnya ada benda yang menggambarkan produk. Ekspresinya tenang / fokus / tersenyum kecil. Sudut kamera setinggi mata / dari atas serong.

Trik kecil: atur waktunya berurutan. Kartu pertama pagi, kartu terakhir senja. Waktu kartunya bergeser di halaman, cahayanya ikut berubah. Ini hasil gue:

Gambar pertama kacamatanya beda sendiri. Bisa digenerate ulang, tapi gue biarin. Nggak harus sempurna.

Sekarang semua bahan digabung jadi satu permintaan. Isi kolom di bawah, prompt-nya jadi sendiri. Tinggal salin, tempel ke Claude, lalu lampirkan foto profil dan referensi lo.

Apa yang terjadi setelah itu

Claude bakal nulis kodenya sendiri, lalu nampilin halaman jadi yang bisa langsung lo buka dan scroll. Lo nggak perlu baca kodenya sama sekali. Tugas lo cuma lihat hasilnya dan bilang mana yang kurang.

Kalau di tengah jalan Claude nanya sesuatu, jawab aja. Waktu foto gue belum kekirim, Claude naruh huruf "KA" dulu di tempat foto, terus minta fotonya. Begitu gue kirim, fotonya langsung masuk dan warnanya disesuaikan.

Draf pertama jarang langsung pas. Yang bikin revisi lancar adalah pola ini: catat dulu, eksekusi sekaligus. Tiap kepikiran perubahan, bilang ke Claude buat dicatat aja, belum dikerjain. Setelah semua terkumpul, baru bilang "eksekusi". Hasilnya lebih rapi, karena Claude ngerjain semua perubahan dengan gambaran utuh.

Kalimat pembuka di bawah nama mau diganti, rasanya terlalu spesifik. Coba kasih 3 pilihan kalimat dulu, jangan langsung revisi.

Catat dulu ya, jangan langsung revisi:
1. Kalimat pembuka pakai pilihan nomor 1.
2. Nama kantor dan kota jangan muncul di mana pun.
3. Footer diganti jadi "kalimat baru".

Kartu 4 produk unggulan dikasih gambar (terlampir), gayanya seperti bagian kartu di template referensi: kartu tegak yang bergeser ke samping waktu di-scroll. 3 produk lainnya biarin seperti sekarang.

Oke, eksekusi semua revisi yang udah dicatat. Habis itu sebutin apa aja yang berubah.

Cek sebelum online

• Buka di HP. Tulisan kebaca, nggak ada yang kepotong di pinggir.
• Klik semua tombol dan kartu. Pastikan link-nya benar.
• Cari nama kantor, kota, atau info pribadi yang nggak sengaja ikut.
• Harga dan promo masih berlaku.

Halaman yang dibikin Claude perlu ditaruh di internet supaya bisa dibuka siapa aja. Gue pakai Netlify karena gratis dan caranya cuma seret folder.

Siapkan file HTML-nya untuk saya upload ke Netlify. Gabungkan dengan semua gambar dalam satu folder lalu kirim sebagai zip.

1. Unduh zip dari Claude, lalu ekstrak.
2. Masuk ke app.netlify.com. Pilih Add new site, lalu Deploy manually.
3. Seret foldernya ke kotak upload. Jangan cuma file index.html, nanti gambarnya ketinggalan.
4. Tunggu beberapa detik. Lo dapat alamat seperti nama-acak.netlify.app.
5. Ganti nama situsnya di Site configuration biar alamatnya enak dibaca, misalnya landing-page-kangarif.netlify.app.

Mau update? Minta Claude revisi, unduh zip baru, lalu seret lagi ke halaman Deploys di situs yang sama. Alamatnya nggak berubah.

Alamat .netlify.app udah bisa dipakai. Tapi jelangpensiun.my.id lebih gampang diingat daripada landing-page-kangarif.netlify.app. Domain .my.id cuma buat perorangan Indonesia dan murah banget.

Di Netlify

1. Buka situs lo, masuk Domain management, klik Add a domain.
2. Ketik domain lo, misalnya jelangpensiun.my.id, lalu konfirmasi.
3. Kalau ditawari Netlify DNS atau ganti nameserver, lewati. Cara di bawah lebih aman.

Di tempat beli domain

Buka pengaturan DNS domain lo (gue di SumoPod: Domains, Manage, DNS Management), lalu tambah dua record:

Angka 75.2.60.5 itu alamat server Netlify, sama buat semua orang. Record lain yang udah ada, misalnya subdomain buat halaman jualan, jangan diubah.

Tunggu, lalu nyalain HTTPS

Biasanya beberapa menit, paling lama sehari. Selama sertifikat belum terbit, browser bakal bilang situsnya nggak aman. Itu normal. Balik ke Netlify, di bagian HTTPS klik Verify DNS configuration. Setelah gembok muncul, halaman lo resmi online.

Saya mau halaman alamat-situs.netlify.app jadi domain utama domainsaya.my.id. Domainnya saya beli di nama penyedia. Tolong pandu langkah demi langkah, dan pastikan subdomain yang sudah ada tidak terganggu.