ChatGPT ya da Claude ile tek sayfalık site taslağı
- Okuma süresi: 4 dk
- Kod bilgisi gerekmez
Kod bilmeden tek sayfalık bir site isterseniz sohbet aracına tek dosyalık bir sayfa yazdırabilir, önizleyebilir ve ücretsiz bir yolla yayımlayabilirsiniz. Bu derste kurgusal bir mahalle halısaha turnuvası sayfası hazırlayacaksınız.
Aklınıza bir soru mu takıldı?
Bu derste neler öğreneceksiniz?
- Sohbet aracından tek bir HTML dosyası istemeyi
- Dosyayı önizlemeyi ve yayımlamadan önce kontrol etmeyi
- GitHub Pages ve Netlify Drop ile ücretsiz yayımlamanın sınırlarını
- Hangi adımın ücretli olduğunu
Tek dosyalık site nedir?
Basit bir site aslında tek bir metin dosyasıdır. Dosyanın adı genellikle index.html olur ve içinde yazı, renk ve düzen bulunur. Sohbet aracına “tek dosya, dışarıdan hiçbir şey yüklemeyen bir sayfa” dediğinizde bunu size verir. Böyle bir sayfa tek başına çalışır, kolay taşınır ve kontrolü kolaydır.
OpenAI’ın yardım sayfasına göre ChatGPT, desteklenen kod bloklarında Preview düğmesiyle HTML sayfasını gösterebiliyor ve bloğu doğrudan düzenlemenize ya da kopyalamanıza izin veriyor. Önizleme korumalı bir alanda çalışıyor. Düğme görünmüyorsa o blok önizlemeyi desteklemiyor demektir. Claude’un yardım sayfasına göre artifact’ı yayımlayıp “Anyone with the link” seçeneğiyle bağlantıyı bilen herkese açabilirsiniz. Bu seçeneğin görünmesi plana ve deneyime göre değişiyor. Yayımlamayı geri alırsanız aynı artifact’ı yeniden yayımlayamazsınız; yeni bir tane gerekir.
Ücretsiz yayımlama: iki yol
GitHub Pages
GitHub’ın belgesine göre kullanıcı sitesi için kullanıcıadi.github.io adında yeni bir depo açar, ayarlarda Pages bölümünden yayım kaynağını seçersiniz. Değişikliklerin yayımlanması 10 dakika sürebilir. Ücretsiz hesapla Pages yalnızca herkese açık depolarda çalışır. Yani sayfanızı da, kodunu da herkes görebilir. Özel depo için ücretli plan gerekir. Bu adım ücretli.
Netlify Drop
Netlify’ın belgesine göre klasörü ya da zip dosyasını Drop alanına sürüklersiniz ve saniyeler içinde netlify.app ile biten bir adres alırsınız. Hesap gerekmez. Ancak oturum açmadan yayımladığınızda adres geçici bir parolayla korunur; siz hesap açıp projeyi sahiplenene kadar başkaları açamaz. Sayfa görünmezse klasöre boş bir index.html eklemeyi deneyin. Belge, 50 MB altındaki yüklemelerin daha sorunsuz olduğunu söylüyor. Sahiplendikten sonra görünürlük planınıza ve ekibinizin ayarlarına bağlıdır.
İkisinde de özel alan adı için alan adı satın almak gerekir. Bu adım ücretli. Alan adı konusunu bu serinin ilgili dersinde okuyabilirsiniz.
Adım adım uygulama
- Sohbet aracına aşağıdaki güçlü komutu yapıştırın. Gerçek isim, telefon ya da adres yazmayın.
- Yanıtı önizleyin. ChatGPT’de Preview düğmesine basın. Claude’da artifact’ı açın. Beğenmediğiniz yeri aynı sohbette düzeltme isteyin.
- Kontrol komutunu gönderin: sayfada dışarıdan yüklenen betik, izleme kodu, form gönderim adresi ve sahte bilgi olup olmadığını listelemesini isteyin.
- Kodu bir metin editörüne yapıştırıp index.html adıyla kaydedin. Uzantının .txt kalmadığından emin olun.
- Dosyayı çift tıklayıp tarayıcıda açın. Telefondan da bakın: dosyayı kendinize gönderin ya da yayımlandıktan sonra adresi açın.
- GitHub Pages ya da Netlify Drop ile yayımlayın. Gizli bir şey var mı diye son kez bakın.
Kontrol listesi
- Sayfada gerçek kişi bilgisi yok.
- Dışarıdan betik ya da izleme kodu olmadığını doğruladım.
- GitHub Pages seçtiysem deponun herkese açık olduğunu ve kodu herkesin görebileceğini biliyorum.
- Netlify Drop seçtiysem sahiplenmeden başkalarının sayfaya giremeyeceğini biliyorum.
- Telefon ve bilgisayarda açıp baktım.
Zayıf komut
Bir turnuva sitesi yap.
Güçlü komut
Mahalle halısaha turnuvası için tek dosyalık, Türkçe bir index.html yaz. Turnuva adı Çarşı Kupası, kurgusaldır. Bölümler: kısa tanıtım, maç takvimi tablosu (tarihleri BURAYA YAZIN diye boş bırak), kurallar, iletişim için e-posta bağlantısı. Dışarıdan yazı tipi, betik, izleme kodu ya da form ekleme. Renkler yeşil ve beyaz olsun. Telefonda da düzgün görünsün. Sahte bilgi uydurma.
Yapay zekâ çıktısı (örnek)
Tek dosyalık sayfa hazır. Dışarıdan hiçbir şey yüklemiyor. Üstte tanıtım, altında maç takvimi tablosu, kurallar ve iletişim bölümü var. Tarihler yer tutucu olarak bırakıldı. Yerleşim küçük ekranlarda tek sütuna iniyor.
Not: Bu yanıt örnektir. Aracın verdiği yanıt farklı olabilir.
Güçlü komut
Yazdığın index.html dosyasında şunları listele: dışarıdan yüklenen her betik, yazı tipi ya da görsel; izleme ya da form gönderim kodu; uydurma görünen bilgi; telefonda bozulabilecek yerler. Hiçbirini bulamadıysan bulunmadığını açıkça yaz.
İpucu
Önce yalnızca kendinizin göreceği bir sürüm yayımlayın. Netlify Drop’ta geçici parola bunu sağlar; GitHub Pages’te ise kod zaten herkese açıktır.
Sık yapılan hatalar
- GitHub Pages’i ücretsiz hesapla özel depoda denemek; çalışmaz.
- Dosyayı .txt uzantısıyla kaydedip sayfanın açılmadığını düşünmek.
- Yapay zekânın yazdığı iletişim bilgisini ya da tarihi kontrol etmemek.
- Kodu başka bir siteden kopyalayıp “benimki” diye yayımlamak.
Kendinizi deneyin
Ücretsiz GitHub hesabıyla Pages hangi depoda çalışır?
Netlify Drop’ta oturum açmadan yayımladığınız adres için ne olur?
Sohbet aracının yazdığı sayfayı yayımlamadan önce hangisini yaparsınız?
Kaynaklar
- OpenAI Yardım: Working with writing blocks and code blocks in ChatGPT (İngilizce)
- Claude Yardım: Publish and share artifacts (İngilizce)
- GitHub Belgeleri: Quickstart for GitHub Pages (İngilizce)
- Netlify Belgeleri: Get started with Drop (İngilizce)
Son kontrol: 8 Kasım 2026
Kaynak: yzdersleri.com/ders/chatgpt-ya-da-claude-ile-tek-sayfalik-site-taslagi/ · Yapay Zeka Dersleri
Dersi bitirdiniz mi?
İşaretlerseniz menüde ve ilerleme çubuğunda görünür. Bu bilgi yalnızca sizin tarayıcınızda saklanır.
Öğrenme yolunda sıradaki ders: Alan adı ve barındırma: yapay zekâya sorarak doğru seçim
Bu ders işinize yaradı mı?
Anonim oydur; kişisel veri toplanmaz.
