Cara Membuat Website dengan Claude Code: Setup, Edit, dan Deploy

Claude Code adalah coding agent berbasis terminal yang membaca konteks repository dan membantu melakukan perubahan file. Ia bukan website builder yang hanya menyusun halaman dari prompt: Anda perlu project folder, runtime, perintah, serta kebiasaan memeriksa diff. Dokumentasi Anthropic saat ini menyebut Node.js 18+ dan, untuk Windows, penggunaan WSL atau Git Bash. Periksa panduan resmi karena metode instalasi dapat berubah.

Setup di Windows dan proyek baru

1. Pasang Node.js versi LTS yang memenuhi kebutuhan versi dokumentasi serta Git.
2. Siapkan WSL atau Git Bash; ikuti petunjuk instalasi Windows terbaru dari Anthropic.
3. Buat folder kerja baru atau clone repository yang memang akan diubah.
4. Buka terminal di direktori proyek, lalu pasang Claude Code melalui metode resmi.
5. Jalankan `claude`, selesaikan autentikasi dengan akun atau paket yang didukung, dan baca prompt izin terminal.

mkdir situs-latihan
cd situs-latihan
npm create next-app@latest .
# Ikuti pertanyaan setup Next.js, lalu: npm run dev
# Di terminal terpisah pada folder proyek:
claude

Perintah pembuatan proyek di atas contoh menggunakan generator Next.js dan pilihan wizard dapat berubah. Jangan jalankan `npm create` berulang di folder yang sudah berisi source. Untuk pekerjaan pada repository yang ada, clone dahulu dari remote yang tepat dan buat branch kerja sebelum meminta edit.

Minta agent mengenali codebase sebelum menulis

Baca struktur project dan package.json. Jangan mengubah file dahulu. Ringkas: framework dan versi, cara menjalankan aplikasi, halaman utama, komponen yang relevan, dan pemeriksaan yang tersedia. Tunjukkan file mana yang Anda sarankan untuk mengubah halaman layanan ini serta risiko yang perlu saya cek.

Sebelum mengubah file, buka halaman yang akan dikerjakan, cari instruksi `AGENTS.md`, periksa git status, dan pastikan perubahan lokal penting tersimpan. Agent mungkin mampu menulis atau menjalankan perintah terminal. Setujui tindakan berdasarkan apa yang tampak pada prompt; jangan memberikan akses secret atau data produksi tanpa alasan.

Minta perubahan lewat Git agar mudah ditinjau

Pada proyek yang sudah berjalan, buat branch atau commit checkpoint, lalu minta Claude Code mengubah satu fitur dengan daftar file yang boleh disentuh. Setelah selesai, gunakan `git diff --stat` untuk melihat skala, `git diff` untuk membaca isi, dan `git status --short` untuk menemukan file baru atau hasil build yang tidak diharapkan. Jika agent mengatakan ia menjalankan test, periksa command dan exit code yang sebenarnya di terminal sebelum menyatakan pemeriksaan lulus.

Jangan gunakan output model sebagai sumber kredensial atau konfigurasi. File `.env.local` seharusnya tidak masuk commit; periksa `.gitignore` dan staged files sebelum push. Untuk konflik branch, minta ringkasan perubahan dahulu lalu selesaikan konflik satu per satu. Agent dapat menulis resolusi yang secara sintaks valid tetapi menggabungkan perilaku yang berbeda dari maksud kedua perubahan.

Bila Anda mengerjakan fitur visual, minta agent membuat checklist state: default, loading, kosong, berhasil, dan error. Untuk menu atau modal, uji Escape, focus order, dan apakah fokus kembali ke pemicu saat ditutup. Untuk server action/API, cek validasi sisi server; memeriksa field di browser saja tidak mencegah request yang dibuat manual. Detail kecil seperti ini sering tidak terlihat dari screenshot pertama tetapi berdampak langsung pada penggunaan website.

Bila belum punya tugas teknis, gunakan Claude Code untuk membaca dokumentasi proyek terlebih dulu dan minta ia merumuskan checklist manual. Jangan biarkan agent menghapus branch atau mereset file untuk “membersihkan” masalah tanpa mengetahui pekerjaan siapa yang tersimpan. Konsultasikan command yang menyentuh deployment, database, atau direktori di luar proyek sebelum eksekusi.

Jika command yang disarankan berbeda dari script repository, gunakan script project sebagai rujukan dan tanyakan alasannya sebelum memasang tool baru.

Bangun halaman dalam potongan yang bisa ditinjau

1. Minta kerangka satu halaman dan informasi apa yang belum tersedia.
2. Setujui struktur dan isi faktual sebelum meminta styling.
3. Tambahkan responsive layout, navigasi keyboard, dan states secara bertahap.
4. Minta agent menampilkan daftar file yang diedit serta alasan perubahan.
5. Tinjau diff dengan Git sebelum memutuskan apakah file itu diterima.

Implementasikan hanya section hero dan layanan di app/page.tsx. Jangan ubah metadata, route lain, konfigurasi global, atau dependency. Gunakan teks placeholder untuk klaim yang belum saya berikan. Setelah edit, jelaskan perubahan per file dan jangan commit.

Preview dan pemeriksaan lokal

Jalankan server development dari terminal proyek menggunakan script yang benar di `package.json` (misalnya `npm run dev`). Buka alamat localhost secara manual; agent dapat membantu membaca error terminal, tetapi keberhasilan server tidak membuktikan tampilan mobile atau alur form sudah benar. Baca script `build` dan `lint` proyek sebelum menjalankannya. Bila ada pemeriksaan otomatis yang diminta tim, jalankan dan catat hasil, termasuk kegagalan yang sudah ada sebelum edit.

Deploy bukan langkah yang boleh ditebak agent

Deploy mengubah layanan eksternal dan dapat membuka aplikasi ke publik. Ikuti alur host yang digunakan proyek: cek branch, build command, output, environment variables, DNS, HTTPS, dan cara rollback. Jangan meminta agent mem-publish atau menjalankan migrasi produksi tanpa memahami efeknya. Buat environment staging bila ada data atau integrasi yang bisa memengaruhi pelanggan.

Masalah umum dan cara mengatasinya

• Agent mengubah banyak file: hentikan, tinjau diff, kembalikan bagian di luar scope dan ulangi dengan batas file yang jelas.
• Build gagal setelah dependency berubah: periksa alasan, versi, lockfile, dan security advisory sebelum menerima penambahan.
• Halaman terlihat benar tetapi CTA tidak bekerja: uji URL tujuan dan kirim form dengan data simulasi.
• Perubahan menyentuh route/config yang tidak diminta: kembalikan bagian itu dan tanyakan rencana yang lebih sempit.
• Konteks panjang membuat instruksi hilang: mulai ringkasan tugas baru dengan keadaan repository dan kriteria penerimaan.

Claude Code cocok untuk developer atau tim yang ingin bekerja langsung dengan source code dan punya review process. Jika Anda butuh UI builder tanpa menyiapkan repository, pembandingnya mungkin tool visual; jika aplikasi membawa data bisnis, QA dan keamanan tetap tanggung jawab pemilik. Bandingkan alur dengan OpenAI Codex dan perbandingan Codex vs Claude Code.

Sumber: Anthropic Docs — Claude Code quickstart

Sumber: Anthropic — Claude Code security