Jadikan artifact Claude website sungguhan

Claude sudah membuat halamannya dan tampilannya pas di panel artifact. Tempel kodenya di bawah dan dapatkan alamat yang bisa kamu kirim ke siapa saja, dengan HTTPS dan nama pilihanmu.

  • Alamat seperti nama-kamu.hostilo.page dengan HTTPS
  • Hingga 5 halaman dan 50 MB, tanpa kartu
  • Editor kode dengan preview langsung

Kode kamu tetap di browser ini. Setelah kamu buat akun gratis, kodenya sudah menunggu di editor.

Hostilo ada di direktori konektor Claude

Tambahkan Hostilo ke Claude sekali, lalu cukup katakan "terbitkan ini di Hostilo". Claude mengirim filenya sendiri, tanpa salin-tempel.

Tambahkan ke Claude

Cara kerjanya

  1. Buka artifact di Claude dan pakai Copy (atau Download) di pojok atas panel.
  2. Tempel kodenya di sini lalu klik Publish. Buat akun gratis dengan email kamu.
  3. Pilih nama. Halamanmu live di name.hostilo.page dan bisa kamu edit di browser.

Prompt untuk kode yang siap di-publish

Buat ini sebagai satu file HTML dengan CSS dan JavaScript di dalamnya, bukan sebagai komponen React. Tanpa file eksternal kecuali font dan library yang dimuat dari CDN. Halaman:

Tempel ke chat AI kamu dan jelaskan halamanmu setelah titik dua.

Masalah yang sering muncul

Claude memberi komponen React, bukan HTML

Artifact React (.jsx) butuh proses build. Minta ke Claude: "Ubah artifact ini jadi satu file HTML mandiri yang memuat React dari CDN". Hasilnya bisa langsung ditempel ke Hostilo.

Gambar hilang setelah publish

Claude sering merujuk file yang hanya ada di chat, misalnya image.png. Upload gambarnya di tab Files editor dengan nama yang sama, atau minta Claude memakai URL gambar.

Huruf beraksen atau karakter khusus tampil rusak

Pastikan kodenya punya <meta charset="UTF-8"> di head. Biasanya Claude sudah menambahkannya, tapi bisa hilang kalau kamu hanya menyalin sebagian kode.

Yang kamu dapat di paket gratis

PRO menambah domain sendiri, 20 halaman, 1 GB, tanpa badge dan statistik setahun, seharga $29 per tahun. Coba gratis 7 hari setelah daftar.

Pertanyaan

Bukankah tombol Publish di Claude sudah cukup?

Tombol itu membagikan artifact di claude.ai. Hostilo memberinya alamat website biasa, dan kamu bisa edit kode, menambah subhalaman, memasang formulir kontak, lalu nanti domain sendiri.

Bisakah Claude publish ke Hostilo tanpa salin-tempel?

Bisa. Tambahkan konektor Hostilo (https://hostilo.app/mcp) di Claude, setujui aksesnya, lalu bilang "publish ini di Hostilo". Claude mengirim file-nya sendiri.

Apakah halaman tetap online kalau chat ditutup?

Ya. Halamannya ada di Hostilo, bukan di percakapan. Di paket gratis, cukup login sebulan sekali supaya tidak dijeda.

Bisakah halaman diubah nanti?

Buka di editor, ubah teks atau kodenya, lalu simpan. Atau tempel versi baru dari Claude menimpa yang lama. Versi terakhir disimpan, jadi kamu bisa kembali.

Baca panduan lengkapnya

How to Publish a Claude Artifact as a Real Website

Panduan terkait

Online-kan website buatan ChatGPTDari chat ChatGPT atau Canvas ke link live.Biarkan coding agent kamu publish website-nyaClaude Code, Codex, Cursor publish sendiri.Upload ZIP, dapat websiteSatu folder penuh online dalam sekali upload.Semua panduanApa yang mau kamu online-kan?

Halamanmu bisa online dalam semenit

Daftar dengan email dan password. Paket gratis, tanpa kartu.

Mulai gratis