Claude Artifact'ını Web Sitesi Olarak Yayınla

Adım adım

1. 1

   Artifact’ı aç

   Claude sohbetinde artifact’ı aç ve koduna bak. HTML artifact’ı <!DOCTYPE html> ya da <html> ile başlar. import satırlarıyla başlıyorsa bu bir React artifact’ıdır: önce Claude’dan onu tek bir HTML dosyası olarak yeniden yazmasını iste.

2. 2

   Kodu kopyala

   Artifact’ın kopyala düğmesini kullan ya da dosya olarak indir. Menü adları değişebilir; kodun tamamını veren her yol işe yarar.

3. 3

   SiteUp’a yapıştır

   siteup.fyi adresini aç, Kod yapıştır’ı seç ve yapıştır. HTML dosyası indirdiysen dosyayı bırak. Bir şey yayına girmeden önce önizlemeye bak.

4. 4

   Ad seç ve yayınla

   uzay-testi gibi bir link adı yaz, sitenin ne kadar yayında kalacağını seç ve Yayınla’ya bas. Link, QR kod ve özel yönetim linki hazır olur.

Bir artifact’ı yayınlamanın iki yolu

• Kopyala ve yapıştır. Her Claude paketiyle çalışır ve yaklaşık bir dakika sürer. Artifact’ın kodunu kopyalar, SiteUp’ta tarayıcıdan ya da Android uygulamasından yayınlarsın.
• Claude yayınlasın. Yapay zekayla yayınla sayfasında ücretsiz bir bağlantı oluştur ve SiteUp’ı Claude’a bir kez bağlayıcı olarak ekle. Bundan sonra sohbette istemen yeterli: Claude dosyaları SiteUp’a kendisi gönderir ve canlı linki sana verir. SiteUp ayrıca Claude’dan sitenin bitiş tarihini söylemesini ve özel yönetim linkini sana vermesini ister.

Bağlayıcıyla tek bir cümle yeter:

Bu artifact’ı SiteUp’ta uzay-testi adıyla 30 günlüğüne yayınla.

Bağlayıcı web’de claude.ai üzerinden eklenir, sonra Claude masaüstü ve mobil uygulamalarında da çalışır. Claude’un ücretsiz paketi tek bir özel bağlayıcıya izin verir.

HTML artifact’ları ve React artifact’ları

SiteUp statik dosyaları barındırır: bir tarayıcının olduğu gibi açabildiği HTML, CSS ve JavaScript. HTML artifact’ı zaten böyledir, yani doğrudan yayınlayabilirsin.

React artifact’ı farklıdır. import satırları ve bir export default bileşeniyle başlar ve React ile yardımcı kütüphanelerini sağlayan Claude’un içinde çalışır. Tarayıcı bu kodu tek başına çalıştıramaz; olduğu gibi yapıştırırsan boş ya da bozuk bir sayfa görürsün. Önce Claude’dan dönüştürmesini iste:

Bu artifact’ı satır içi CSS ve JS kullanan tek bir HTML dosyası olarak yeniden yaz. Bir kütüphane gerekirse onu script etiketiyle bir CDN’den yükle. Sadece dosyanın tamamını yaz.

Sonra yeni sürümü kopyalayıp yayınla. Claude bağlayıcıyla yayınlıyorsa ikisini bir arada isteyebilirsin: “Bunu satır içi CSS ve JS kullanan tek bir HTML dosyasına çevir ve SiteUp’ta yayınla.”

Artifact çalışırken Claude’dan cevap istiyorsa o kısım sadece Claude’un içinde çalışır. Claude’dan onu sade JavaScript ile değiştirmesini ya da çıkarmasını iste.

Sayfayı değiştir, link aynı kalsın

Artifact’lar sık değişir: yeni bir renk, düzeltilen bir hata, yeni bir bölüm. Linkinin onlarla birlikte değişmesi gerekmez.

• Tarayıcıda: Sitelerim sayfasını aç, siteni seç ve Dosyaları güncelle’ye bas. Yeni sürümü yapıştır ya da yükle. Link ve QR kod aynı kalır.
• Bağlayıcıyla: Claude’a örneğin “uzay-testi sitesini bu yeni sürümle güncelle” de. Claude dosyaları aynı adreste değiştirir. Bağlantınla yayınlanan siteleri kendisi bulur; başka bir yolla yayınladığın bir site için ona sitenin yönetim linkini ver.
• Başka bir cihazda: tarayıcıdan yayınlanan siteler o tarayıcıdaki Sitelerim listesine kaydedilir. Claude’un yayınladığı siteler bu listede olmaz ama her siteyi yönetim linkiyle oraya ekleyebilirsin.

Boş sayfa sorununu çöz

Boş sayfaların çoğunun sebebi şunlardan biridir ve yayınlamadan önce SiteUp önizlemesinde görünür:

• Bu bir React kodu. import ve export default satırları olan bir bileşen yapıştırdın. Yukarıda anlatıldığı gibi Claude’dan onu satır içi CSS ve JS kullanan tek bir HTML dosyası olarak yeniden yazmasını iste.
• Kod yarıda kesilmiş. Uzun artifact’lar bazen ortada biter. Bir HTML dosyası </html> ile bitmeli. Seninki öyle bitmiyorsa Claude’dan dosyanın tamamını yeniden iste.
• Bir kütüphane eksik. @/components/ui/... ya da lucide-react gibi içe aktarmaları, artifact orada çalışırken Claude sağlar. Normal bir web sayfasında bunlar yoktur. Claude’dan bunları sade HTML ve CSS ile değiştirmesini ya da kütüphaneyi bir CDN’den yüklemesini iste.
• Sayfa açılıyor ama stilsiz. React artifact’ları çoğu zaman Tailwind sınıf adları kullanır. Claude’dan stilleri dosyanın içine yazmasını ya da Tailwind’i kendi CDN’inden yüklemesini iste.

Sayfa hala boşsa Claude’a ne gördüğünü anlat ve her düzeltmeden sonra kodu SiteUp’a yeniden yapıştır. Yayınla’ya basana kadar hiçbir şey yayına girmez.

Sık sorulanlar