ChatGPT ile Web Sitesi Nasıl Yapılır: İşe Yarayan Üç Yöntem

ChatGPT ile web sitesi yapmak için üç yol var: sitenin HTML ve CSS dosyalarını yazmasını isteyip bu dosyaları kendiniz bir barındırma hizmetine yükleyebilirsiniz; sayfaları planlamak ve bir web sitesi yapıcısına geçmeden önce metinleri yazmak için kullanabilirsiniz; ya da sohbetten çıkmadan siteyi oluşturup barındırabilen, yayımlayabilen bir yapay zekâ yapıcısını, örneğin Mythex'i ChatGPT'ye bağlayabilirsiniz. İlk yol ücretsizdir ve tek sayfalık bir site için yeterlidir; üçüncü yol ise sitenizin veri kaydeden formlara, girişlere ya da düzenli güncellemelere ihtiyaç duyduğu noktada işinizi görür. Bu rehber her yöntemi istemleriyle gösterir ve her birinin nerede yetersiz kaldığını açıkça belirtir.

ChatGPT tek başına neler yapabilir, neler yapamaz?

ChatGPT yazmada çok başarılıdır: kod, başlık, sayfa metni ve plan yazabilir. Ama kutudan çıktığı haliyle bir barındırma şirketi değildir. Sitenize genel bir adres vermez, veritabanı çalıştırmaz ve bir yapıcının yaptığı gibi proje dosyalarınızı projeler arasında saklamaz. Aşağıdaki her yöntem bu boşluğa farklı bir cevap verir.

Yöntem 1: ChatGPT kodu yazar, siz barındırırsınız

Bu klasik yaklaşımdır ve portföy, açılış sayfası ya da düğün sayfası gibi basit, statik bir site için iyi çalışır.

1. adım: Tek dosyalık, eksiksiz bir sayfa isteyin

İçerik ve yerleşim konusunda net olun:

Tek bir HTML dosyası olarak, CSS'i bir style etiketinin içinde bulunan eksiksiz bir tek sayfalık web sitesi yaz. Amman'da serbest çalışan bir illüstratör olan Maya Haddad için. Bölümler: adı ve "Kitaplar ve markalar için illüstrasyon" yazısını içeren bir üst bölüm, altı portfolyo görselinden oluşan bir ızgara (değiştirebileceğim yer tutucu görsel yolları kullan), kısa bir hakkımda paragrafı, üç hizmetin başlangıç fiyatlarını gösteren bir liste ve e-posta adresi mailto bağlantısı olan bir iletişim bölümü. Temiz, modern, bol boşluklu, telefonda da çalışan bir tasarım. JavaScript çerçevesi kullanma.

Tek dosya istemek, kaydetmeyi ve yüklemeyi basit tutar.

2. adım: Kaydedin ve açın

Kodu bir metin düzenleyiciye kopyalayın, index.html olarak kaydedin ve tarayıcınızda açın. Bir şey yanlış görünüyorsa ChatGPT'ye anlatın: "Görsel ızgarası masaüstünde tek sütun; 900 pikselden geniş ekranlarda üç sütun yap."

3. adım: Yer tutucuları değiştirin

Yer tutucu görselleri kendi görsellerinizle değiştirin ve ChatGPT'nin uydurduğu metinleri düzeltin. Fiyatları, e-posta adreslerini ve isimleri dikkatle kontrol edin; yapay zekâ boşlukları emin bir tavırla doldurur.

4. adım: Yayımlayın

Dosyayı GitHub Pages gibi ücretsiz bir statik barındırmaya ya da zaten ödediğiniz bir web barındırmasına yükleyin. Size herkese açık bir adres verilecek. Kendi alan adınızı kullanmak için barındırma hizmetinizin talimatlarını izleyin; DNS kısmını özel alan adı bağlama rehberimiz anlatıyor.

Yöntem 1'in yetersiz kaldığı yerler

• Veri kaydeden formlar. İletişim formunun gönderileri bir yere iletilmelidir. Bir form servisine ya da bir sunucuya ihtiyacınız olacak.
• Girişler ve üyeler alanı. Bunlar bir arka uç ile veritabanı gerektirir.
• Çok sayfa. Üst menü ve gezinmeyi on ayrı, elle yapıştırılmış dosyada tutarlı tutmak zahmetlidir.
• Güncellemeler. Her değişiklik için yeni kod istemek, yapıştırmak ve yeniden yüklemek gerekir.

Yöntem 2: ChatGPT planlar, bir yapıcı inşa eder

Bu yöntemde ChatGPT düşünme ve yazma kısmını yapar, bir web sitesi yapıcısı ise inşa edip barındırma işini üstlenir.

1. adım: ChatGPT ile siteyi planlayın

Manchester'da pasta siparişi alan küçük bir aile fırınım var. Web sitemin hangi sayfalara ihtiyacı olduğunu, her sayfanın ne söylemesi gerektiğini ve her sayfada ziyaretçinin atması gereken tek adımı önerir misin? Beş sayfa ya da daha az tut.

2. adım: Metni yazın

Her sayfanın metnini isteyin, sonra kendi üslubunuzla yeniden yazın. ChatGPT'nin bilemeyeceği gerçek ayrıntıları ekleyin: çalışma saatleri, fiyatlar, teslimat bölgeleri ve pastalarınızı farklı kılan şey.

3. adım: Bir yapıcıda inşa edin

Planı ve metni bir web sitesi yapıcısına yapıştırın. Sürükle-bırak bir araçta metni bir şablona yerleştirirsiniz. Yapay zekâ destekli bir yapıcıda ise tüm planı tek bir mesajla verebilirsiniz; örneğin Mythex web sitesi yapıcısında şöyle yazabilirsiniz:

Bu planı ve metni kullanarak Manchester'daki bir aile fırını için web sitesi yap: [planı yapıştırın]. Sadece benim girebileceğim bir yönetici sayfasında her talebi görebilmem için her talebi (ad, telefon, pasta türü, gereken tarih, mesaj) kaydeden bir sipariş talebi formu ekle. Sıcak, evsel bir tasarım; telefonda da çalışsın.

Burada sipariş formu gerçek bir veritabanına kaydeder; elle yapıştırılmış bir HTML dosyası bunu yapamazdı. Bu yol hakkında daha fazlası için yapay zekâ ile web sitesi nasıl yapılır rehberine bakın.

Yöntem 3: ChatGPT'nin içinden inşa edin ve yayımlayın

En yeni seçenek, bir yapıcıyı ChatGPT'ye bağlayarak ChatGPT'nin o yapıcının araçlarını doğrudan kullanmasını sağlamaktır. ChatGPT sohbetinde kalırsınız; proje, önizleme, veritabanı ve barındırmayı yapıcı sağlar.

Mythex bu şekilde çalışır: ChatGPT uygulaması (bir MCP bağlayıcısı) üzerinden. Mythex'te Hesap ayarlarından bağlanırsınız; bağlantı her planda çalışır, projenizin sandbox ortamını çalıştıran araçlar ise Pro gerektirir. Bağlandıktan sonra ChatGPT'ye şuna benzer bir şey yazabilirsiniz:

Mythex'i kullanarak fırınım için ana sayfa, pasta ve fiyatlarını gösteren bir menü sayfası ve veritabanına kaydeden bir sipariş talebi formu olan yeni bir web sitesi oluştur. Önizlemesini göster; uygun bulduğumda yayımla.

ChatGPT projeyi oluşturur, kodu yazar, çalıştırır ve onayladığınızda herkese açık bir adreste yayımlar. Değişiklikler aynı sohbette yeni birer mesajdır. Aynı bağlayıcı yaklaşımı Claude, Cursor ve Codex ile de kullanabilirsiniz. Bu yapının nasıl çalıştığı ve hangi yapıcıların bunu desteklediği hakkında bilgi için MCP ile yapay zekâ uygulama yapıcıları rehberine bakın.

Hangi yöntemi seçmelisiniz?

Her yöntem için işe yarayan komut ipuçları

• Gerçek bilgileri baştan verin. Ad, konum, hizmetler, fiyatlar, iletişim bilgileri. Uydurulacak ayrıntı ne kadar az olursa temizlik o kadar az olur.
• Ziyaretçiyi ve hedefi tarif edin. "Doğum günü pastası arayan bir ebeveyn; sonunda bir sipariş talebi göndermesi gerekiyor."
• Telefona öncelik veren yerleşimler isteyin. Ziyaretçilerin çoğu telefon kullanır.
• İlk sürüm hazır olduktan sonra her mesajda tek bir şey değiştirin.
• Arama motoru temellerini açıkça isteyin: her sayfa için özgün bir başlık ve açıklama, gerçek başlıklar, görsellerde alternatif metin. Ayrıntı için yapay zekâ ile yapılmış web siteleri için SEO rehberine bakın.

Daha fazla komut kalıbı için yapay zekâ uygulama yapıcıları için komut yazma rehberimize göz atabilirsiniz.

Sık karşılaşılan sorunlar ve çözümleri

• Tasarım jenerik görünüyor. Bir referans verin: "sakin bir İskandinav kafesi gibi; bol beyaz ve tek bir soluk yeşil."
• Kod yarıda kesildi. ChatGPT'den son satırdan devam etmesini isteyin ya da sayfayı bölümlere ayırıp her seferinde bir bölüm vermesini isteyin.
• Müşteri yorumları ya da istatistikler uydurdu. Bunları silin. Sahte yorumlar güveni zedeler ve birçok yerde tüketici koruma kurallarına aykırıdır.
• Bir değişiklikten sonra site bozuldu. Yeni kodu yapıştırmadan önce son çalışan sürümü saklayın. Mythex gibi yapıcılar geri dönebilmeniz için kontrol noktaları tutar.

Yayımlamadan önce

Her sayfadaki her kelimeyi okuyun. İletişim bilgilerinin çalıştığını kontrol edin. Siteyi telefonda açın. Görsellerin size ait olduğundan ya da uygun lisanslı olduğundan emin olun. Sonra yayımlayın ve ziyaretçilerinizin zaten bulunduğu yerde paylaşın. Sitenin tamamen ücretsiz olmasını istiyorsanız, web sitesini ücretsiz nasıl yapabilirsiniz rehberi ücretsiz barındırma seçeneklerini daha ayrıntılı anlatır.

Sorular