Kod Yazmadan Web Sitesi Nasıl Yapılır? (AI ile)

Bir web sitesine ihtiyacın var. Belki yeni başladığın işin için kurumsal bir site, belki portfolyonu sergilemek için kişisel bir sayfa, belki de bir blog. Ama HTML, CSS, JavaScript gibi kelimeleri duyduğunda gözlerin kararıyor. Tanıdık bir his mi?

İyi haber: 2026'da web sitesi yapmak için artık kod bilmek zorunlu değil. Üstelik sadece basit şablon siteleri değil, tamamen özel tasarlanmış, profesyonel kalitede web siteleri yapabilirsin. Anahtar kelime: vibecoding.

Bu rehberde, kod yazmadan web sitesi yapmanın tüm yollarını karşılaştırıyor, vibecoding ile profesyonel bir web sitesi oluşturmanın adımlarını anlatıyor ve hosting, domain, SEO gibi teknik konulara da değiniyoruz.

Geleneksel Yöntemler: WordPress, Wix, Squarespace

Kod yazmadan web sitesi yapmak yeni bir fikir değil. Yıllardır bu alanda çeşitli araçlar var. Her birinin güçlü ve zayıf yanlarını tanıyalım.

WordPress

WordPress internetin yaklaşık %40'ını oluşturan en popüler içerik yönetim sistemi. Binlerce tema ve eklentisiyle neredeyse her türlü web sitesi yapılabilir. Ama "kod bilmeden" demek tam olarak doğru değil:

• Avantajları: Devasa eklenti ekosistemi, SEO dostu, blog için mükemmel, topluluk desteği güçlü
• Dezavantajları: Hosting ve domain satın alman gerekiyor, tema özelleştirme sınırlı, güvenlik güncellemeleri zahmetli, sayfa hızı genelde düşük, teknik bilgi gerektiren durumlar mutlaka çıkıyor

WordPress ile güzel siteler yapılabilir ama "tamamen kod bilmeden" demek zor. Bir noktada tema dosyalarına dokunman, CSS override yapman veya eklenti çakışmalarını çözmen gerekiyor. Yılların deneyimiyle söyleyebilirim — WordPress kolay başlıyor, karmaşıklaşıyor.

Wix

Wix, sürükle-bırak editörüyle web sitesi oluşturmayı gerçekten kolay hale getiriyor. Hazır şablonlar seçip içeriği değiştiriyorsun ve siten hazır.

• Avantajları: Çok kolay başlangıç, hosting dahil, yüzlerce şablon, ADI (Artificial Design Intelligence) ile otomatik site oluşturma
• Dezavantajları: Aylık 17-159 dolar arası maliyet, şablonlar kısıtlayıcı, sayfa hızı genelde düşük, SEO imkanları sınırlı, Wix dışına taşıma imkansız, profesyonel görünüm için ciddi efor gerekli

Squarespace

Squarespace, tasarım odaklı şablonlarıyla özellikle yaratıcı profesyoneller ve küçük işletmeler arasında popüler.

• Avantajları: Güzel tasarım şablonları, hosting dahil, e-ticaret entegrasyonu, kullanımı kolay
• Dezavantajları: Aylık 16-65 dolar, özelleştirme sınırlı, Türkçe desteği zayıf, performans sorunları, platforma tam bağımlılık

Bu Araçların Ortak Sorunu

WordPress, Wix ve Squarespace'in ortak sorunu şu: şablon sınırlarına takılırsın. Kafandaki tasarımı birebir yapamıyorsun — şablonun izin verdiği kadar özelleştirme yapabiliyorsun. Ve her biri farklı şekillerde cebini yakıyor — aylık abonelikler, premium şablonlar, eklenti maliyetleri birikir.

Peki ya tamamen senin istediğin gibi, şablon kısıtlaması olmadan, profesyonel kalitede bir web sitesi yapabilsen? Ve üstelik aylık 0 dolar hosting maliyetiyle?

AI Alternatifi: Vibecoding ile Web Sitesi Yapma

Vibecoding, yapay zekaya doğal dille talimat vererek gerçek kod üreten bir geliştirme yöntemi. Web sitesi bağlamında bu şu anlama geliyor: sen ne istediğini anlatıyorsun, AI profesyonel HTML, CSS ve JavaScript kodu yazıyor. Sonuç? Şablona bağımlı olmayan, tamamen özel, hızlı ve profesyonel bir web sitesi.

Claude Code ile vibecoding yaparak web sitesi oluşturduğunda ortaya çıkan sonuç, bir web geliştiricinin el ile kodlayacağı kalitede oluyor. Fark şu: geliştirici aylarca çalışır ve binlerce dolar ister, sen birkaç saatte ve neredeyse sıfır maliyetle aynı sonucu alırsın.

Karşılaştırma: Website Builder vs Vibecoding

Vibecoding ile no-code araçlarının detaylı karşılaştırmasını burada okuyabilirsin.

Vibecoding ile Yapılabilecek Web Sitesi Türleri

Vibecoding ile hemen hemen her türlü web sitesi yapabilirsin. İşte en yaygın örnekler:

Kurumsal Web Sitesi

İşletmen için profesyonel bir kurumsal site: ana sayfa, hakkımızda, hizmetler, iletişim sayfaları. Responsive tasarım (mobilde de güzel görünüyor), hızlı yükleme, modern görünüm. Geleneksel yöntemle 5.000-15.000 TL arası maliyet, vibecoding ile birkaç saatte ve neredeyse ücretsiz.

Portfolyo Sitesi

Tasarımcılar, fotoğrafçılar, freelancer'lar için çalışmalarını sergileyen şık bir portfolyo sitesi. Galeri, proje detay sayfaları, özgeçmiş, iletişim formu. AI ile çarpıcı animasyonlar ve geçiş efektleri de ekleyebilirsin.

Blog

Kişisel blog veya şirket blogu. Yazı listeleme, kategori filtreleme, arama, yazar sayfaları. Astro veya Next.js ile oluşturulan bloglar, WordPress bloglarından çok daha hızlı yüklenir ve SEO'da çok daha iyi performans gösterir.

Landing Page

Bir ürün, hizmet veya etkinlik için tek sayfalık tanıtım sitesi. Hero bölümü, özellikler, müşteri yorumları, fiyatlandırma, CTA (harekete geçirici) butonları. Landing page'lerde hız ve tasarım kritik — ikisinde de vibecoding avantajlı.

E-Ticaret Sitesi

Ürün kataloğu, sepet sistemi, ödeme entegrasyonu olan e-ticaret sitesi. Stripe veya iyzico ile ödeme, ürün yönetimi, sipariş takibi. Basit bir e-ticaret sitesini vibecoding ile birkaç günde oluşturabilirsin.

Etkinlik / Kurs Sitesi

Bir etkinlik, kurs veya atölye tanıtım sitesi. Program detayları, eğitmen bilgileri, kayıt formu, SSS bölümü. Tam olarak bu web sitesi gibi — bu site de vibecoding ile oluşturuldu.

Adım Adım: Vibecoding ile Profesyonel Web Sitesi Oluşturma

Şimdi pratiğe geçelim. Claude Code kullanarak sıfırdan profesyonel bir web sitesi oluşturmanın adımlarını anlatalım.

Adım 1: Planla

Koda dokunmadan önce sitenin yapısını planla:

• Hangi sayfalar olacak? (Ana sayfa, hakkımızda, hizmetler, blog, iletişim...)
• Her sayfada hangi bölümler olacak?
• Renk paleti ne olacak? (2-3 ana renk yeterli)
• Beğendiğin referans siteler var mı?
• Logo ve görseller hazır mı?

Bu planı bir metin dosyasına yaz. Claude Code'a ilk talimatını verirken bu planı paylaşacaksın.

Adım 2: Claude Code'u Kur ve Başlat

Eğer henüz kurmadıysan, Claude Code kurulum rehberimizi takip et. Kurulum 5 dakika sürüyor. Sonra bir proje klasörü oluştur ve Claude Code'u başlat.

Adım 3: Projeyi Oluştur

Claude Code'a ilk talimatını ver. Ne kadar detaylı olursan o kadar iyi sonuç alırsın:

"Bir web geliştirme ajansı için kurumsal web sitesi oluşturacağız. Astro ve Tailwind CSS kullanalım. Koyu tema — arka plan çok koyu gri (#0C0A09), vurgu rengi turuncu (#FB3A1D), yazılar beyaz. Font: Plus Jakarta Sans. Sayfalar: Ana sayfa, Hizmetler, Hakkımızda, Blog, İletişim. Önce proje yapısını oluştur ve ana sayfayı hazırla. Ana sayfada: navigasyon, hero section (büyük başlık + alt metin + CTA butonu), 3 hizmet kartı, müşteri logoları bölümü ve footer olsun."

Claude Code bu talimatı alacak, Astro projesini oluşturacak, Tailwind'i yapılandıracak ve ana sayfayı kodlayacak. Sonucu tarayıcıda görebilirsin.

Adım 4: Sayfaları Teker Teker Ekle

Ana sayfa hazır olduktan sonra diğer sayfaları ekle:

"Şimdi Hizmetler sayfasını oluşturalım. 6 hizmet kartı olsun, her birinde ikon, başlık, açıklama. Hizmetler: Web Geliştirme, Mobil Uygulama, UI/UX Tasarım, SEO Optimizasyonu, E-Ticaret Çözümleri, Teknik Danışmanlık. Sayfanın üstünde bir hero bölümü, altında CTA bölümü olsun."

Her sayfayı ayrı bir adım olarak ele al. Bir sayfa bittiğinde test et, beğenmediğin yerleri düzelt, sonra bir sonrakine geç.

Adım 5: Detayları İncelt

Temel yapı hazır olduktan sonra detaylara geç:

• Mobil uyumluluk kontrolü: "Mobilde navigasyon hamburger menü olsun"
• Animasyonlar: "Sayfayı aşağı kaydırdıkça bölümler fade-in ile görünsün"
• Performans: "Görselleri optimize et, lazy loading ekle"
• SEO: "Her sayfaya meta title, description ve Open Graph etiketleri ekle"
• İletişim formu: "İletişim sayfasına çalışan bir form ekle, form verileri e-posta olarak gelsin"

Adım 6: Test Et

Siteyi farklı cihazlarda test et. Masaüstü, tablet, mobil. Farklı tarayıcılarda kontrol et. Tüm linklerin çalıştığından, formların düzgün gönderildiğinden, görsellerin düzgün yüklendiğinden emin ol. Sorun varsa Claude Code'a bildir, o düzeltsin.

Tasarımcı Olmadan Güzel Tasarım Yapmanın Yolları

Web sitesi yapıyorsun ama tasarım göz yormunu bilmiyorsun. Bu çok normal — herkes tasarımcı olmak zorunda değil. İşte tasarımcı olmadan profesyonel görünümlü bir site yapmanın ipuçları:

Renk Paleti İçin Araçlar Kullan

Coolors.co veya Color Hunt gibi sitelerden hazır renk paletleri seç. 2-3 ana renk yeterli: bir arka plan, bir vurgu rengi, bir metin rengi. Claude Code'a bu renkleri ver, tutarlı bir şekilde uygulanacak.

Referans Göster

Beğendiğin web sitelerini Claude Code'a referans olarak göster. "Stripe.com'un genel hissiyatına benzer bir tasarım istiyorum" veya "Apple'ın minimalist yaklaşımını kullan" gibi talimatlar çok etkili. AI, bu referansların tasarım dilini anlıyor ve benzer bir yaklaşım uyguluyor.

Beyaz Boşluğu Bol Kullan

Profesyonel tasarımın en kolay sırrı: bol beyaz boşluk (whitespace). Elementler arasına yeterli boşluk bırak, metinleri sıkıştırma, kartları nefes aldır. Claude Code'a "elemanlar arasında bol boşluk bırak, sıkışık görünmesin" demek yeterli.

Tutarlı Tipografi

En fazla 2 font ailesi kullan: biri başlıklar, biri gövde metni için. Google Fonts'tan Plus Jakarta Sans, Inter veya DM Sans gibi modern fontları tercih et. Font boyutlarında hiyerarşi oluştur — h1 en büyük, h2 orta, paragraf en küçük.

Kaliteli Görseller

Unsplash, Pexels gibi sitelerden ücretsiz yüksek kaliteli görseller kullanabilirsin. Ya da AI görsel üreticileriyle (Midjourney, DALL-E) özel görseller oluşturabilirsin. Pikselli veya düşük çözünürlüklü görseller kullanma — siten anında amatör görünür.

Hosting ve Domain: Siteni Yayınla

Web siten hazır, harika. Ama onu internete çıkarman lazım. İki şeye ihtiyacın var: hosting (siteni barındıran sunucu) ve domain (site adresi, ör. orneksite.com).

Hosting: Vercel veya Netlify

Vibecoding ile oluşturduğun siteyi barındırmak için Vercel veya Netlify kullanmanı öneriyoruz. Her ikisi de:

• Ücretsiz tier sunuyor — kişisel ve küçük projeler için 0 TL
• Otomatik HTTPS — güvenlik sertifikası dahil
• Global CDN — siten dünya çapında hızlı yüklenir
• Git entegrasyonu — kodu gönderdiğinde site otomatik güncellenir
• Kolay kullanım — Claude Code'a "Vercel'e deploy et" demen yeterli

Vercel özellikle Next.js ve Astro projeleri için optimize edilmiş. Netlify de benzer özellikler sunuyor. İkisi de mükemmel seçenek.

Domain: Alan Adı Alma

Bir .com veya .com.tr alan adı almak için Namecheap, Google Domains veya Türkiye'de nic.tr gibi servisleri kullanabilirsin. Yıllık maliyet genelde 50-200 TL arası. Domain aldıktan sonra Vercel veya Netlify'a bağlamak birkaç dakika sürüyor — Claude Code'a nasıl yapacağını sorabilirsin.

Deploy Süreci

Claude Code ile oluşturduğun projeyi yayınlamak şöyle çalışıyor:

1. Projeyi GitHub'a yükle (Claude Code bunu senin için yapabilir)
2. Vercel hesabı aç ve GitHub reposunu bağla
3. Vercel projeyi otomatik olarak derler ve yayınlar
4. Domain'ini Vercel'e yönlendir

Bu sürecin tamamını Claude Code'a adım adım yaptırabilirsin. "Bu projeyi GitHub'a yükle ve Vercel'e deploy etmeme yardım et" demen yeterli.

Yeni Siten İçin SEO Temelleri

Web siteni yaptın ve yayınladın. Ama kimse bulamazsa ne anlamı var? SEO (Arama Motoru Optimizasyonu), sitenin Google'da üst sıralarda çıkmasını sağlayan teknikler bütünü. Vibecoding ile oluşturduğun siteye SEO uygulamak oldukça kolay.

Teknik SEO

Claude Code'a şunları söyle:

• "Her sayfaya benzersiz meta title ve description ekle"
• "Semantic HTML kullan — h1, h2, h3 hiyerarşisi doğru olsun"
• "Görsellere alt text ekle"
• "Sitemap.xml oluştur"
• "robots.txt dosyası ekle"
• "Open Graph ve Twitter card meta etiketleri ekle"
• "Schema.org yapılandırılmış veri ekle (JSON-LD)"

Vibecoding ile oluşturulan sitelerin doğal bir SEO avantajı var: hızlı yüklenir, temiz kod üretir ve gereksiz şişkinlik yoktur. WordPress veya Wix sitelerinin aksine, JavaScript bloat yok, render-blocking kaynaklar minimum.

İçerik SEO

Teknik altyapı hazır olduktan sonra içerik odaklı SEO'ya geç:

• Hedef anahtar kelimeleri belirle
• Her sayfa için benzersiz, değerli içerik yaz
• Blog bölümü oluştur ve düzenli içerik ekle
• İç linkler kullan (sayfalar arası bağlantı)
• Dış kaynaklara güvenilir linkler ver

Sayfa Hızı

Google, sayfa hızını sıralama faktörü olarak kullanıyor. Vibecoding ile oluşturulan Astro siteleri, Google PageSpeed Insights'ta genellikle 90+ puan alıyor. Bu, WordPress sitelerinin çoğundan çok daha iyi. Hızlı site = daha iyi sıralama + daha iyi kullanıcı deneyimi.

Gerçek Örnek: Bu Site Vibecoding ile Yapıldı

Şu an okumakta olduğun bu web sitesi, vibecoding ile oluşturuldu. Astro ve Tailwind CSS kullanılıyor, Vercel'de barındırılıyor. Google PageSpeed Insights'ta 95+ puan alıyor. Ve oluşturulması günler değil, saatler sürdü.

Bu sitenin özellikleri:

• Tamamen responsive tasarım (mobil, tablet, masaüstü)
• Koyu tema, modern tipografi
• Scroll animasyonları
• SEO optimizasyonu (meta etiketler, yapılandırılmış veri, sitemap)
• Blog bölümü
• WhatsApp entegrasyonu
• Google Analytics ve reklam takibi

Tüm bunlar, bir web geliştiricisine binlerce lira ödenmeden, Claude Code ile vibecoding yapılarak oluşturuldu.

WordPress vs Vibecoding: Hangisi Senin İçin?

Bu sorunun cevabı ihtiyaçlarına bağlı:

WordPress seç, eğer:

• Zaten WordPress biliyorsan
• Sürekli içerik güncelleyeceksen ve editör arayüzüne ihtiyacın varsa
• Yüzlerce eklentiye dayanan karmaşık bir altyapın varsa
• Büyük bir e-ticaret sitesi kuracaksan (WooCommerce ekosistemi geniş)

Vibecoding seç, eğer:

• Sıfırdan başlıyorsan ve tamamen özel bir site istiyorsan
• Performans ve hız sana önemliyse
• Aylık hosting maliyetini minimumda tutmak istiyorsan
• SEO'da avantaj istiyorsan
• Platforma bağımlı kalmak istemiyorsan
• Modern ve temiz bir kod tabanı istiyorsan

Sık Yapılan Hatalar

Kod yazmadan web sitesi yaparken kaçınman gereken yaygın hatalar:

1. Çok Karmaşık Başlamak

İlk siten için 20 sayfalık, animasyon dolu, e-ticaret entegrasyonlu bir site yapmaya çalışma. 3-5 sayfalık basit bir siteyle başla. Çalıştıktan sonra üzerine eklersin.

2. Mobili Unutmak

Trafiğin %60'ından fazlası mobil cihazlardan geliyor. Siten mobilde güzel görünmüyorsa, kullanıcıların yarısından fazlasını kaybediyorsun. Claude Code'a "mobil öncelikli tasarım yap" de.

3. SEO'yu Sonraya Bırakmak

SEO, site bittikten sonra eklenen bir katman değil. Baştan düşünülmesi gereken bir strateji. Meta etiketleri, başlık hiyerarşisi, URL yapısı, sayfa hızı — hepsini baştan doğru yap.

4. İletişim Bilgilerini Gizlemek

Ziyaretçiler sana ulaşmak istediğinde kolayca bulabilmeli. Telefon, e-posta, adres, sosyal medya bağlantıları — bunları açık ve erişilebilir yap.

5. Test Etmemek

Siteyi sadece kendi bilgisayarında test edip "tamam" deme. Farklı tarayıcılarda (Chrome, Safari, Firefox), farklı cihazlarda ve farklı ekran boyutlarında kontrol et.

Sonuç

Kod yazmadan web sitesi yapmak artık bir hayal değil, günlük bir gerçeklik. WordPress ve site builder'lar yıllardır bu vaadi sunuyor olsa da, vibecoding ile gelen AI devrimi oyunun kurallarını değiştirdi. Artık şablon sınırlarına takılmadan, tamamen özel, profesyonel kalitede, hızlı ve SEO dostu web siteleri oluşturabilirsin.

Tek ihtiyacın olan şey: ne istediğini bilmek ve bunu ifade edebilmek. Gerisini AI hallediyor.

İlk vibecoding projenin nasıl planlanacağını öğrenmek için rehberimizi oku.