Bir web sitesini nasıl yapıyorum: fikirden yayına adım adım

Bir web sitesi, tasarımı bitince bitmez; yayına çıktığı gün ölçülmeye başlar. Bu yazıda bir siteyi fikirden yayına ve sonrasına nasıl götürdüğümü adım adım anlatıyorum. Örneklerin bir kısmı şu an okuduğunuz sitenin kendisinden.

1. Keşif: kim, ne için, nereden

İlk görüşmede şu sorulara cevap arıyorum:

• Siteyi kim ziyaret edecek, ne arıyor olacak?
• Ziyaretçinin sitede yapmasını istediğimiz tek şey ne: aramak, form doldurmak, teklif istemek?
• Rakipler hangi kelimelerde görünüyor, hangi soruların cevabı eksik?
• Hangi dillerde yayın yapılacak?

Bu cevaplar sayfa listesini, hedef kelimeleri ve her sayfanın tek bir görevini belirliyor.

2. Teknoloji seçimi: önce statik

Kurumsal sitelerin çoğu için en iyi mimari, derleme zamanında HTML üreten statik bir site. Sebepleri:

• Hız: Sunucu her istekte sayfa üretmiyor, hazır dosyayı gönderiyor.
• Güvenlik: Saldırılabilecek bir veritabanı ya da sunucu kodu yok.
• Maliyet: Basit barındırma ya da ücretsiz CDN yeterli.

Kullandığım iki yığın:

Sitede gerçekten sunucu tarafı iş gerekmiyorsa sunucu kodu yazmıyorum. Bu sitede de önce sunucu kodu çalıştırabilen bir platform denedim. Yalnızca statik dosya sunmak yettiği için daha sade olana geçtim.

3. Tasarım: konunun kendi dili

Her sitenin tasarımını hazır bir şablondan değil, işin kendi dünyasından çıkarıyorum. Bu sitede her uzmanlık alanı bir ada, siteyi gezmek adalar arasında uçmak. Tasarım kararlarım:

• Tek güçlü an: Her yere dağılmış efektler yerine tek bir akılda kalan deneyim.
• Okunaklılık önce: Metin, arkasındaki sahneden bağımsız olarak her ekranda okunur olmalı.
• Telefon eşit vatandaş: Masaüstü tasarımın küçültülmüşü değil; telefona ayrı kamera açıları ve daha hafif bir sahne.
• Hareket azaltma: İşletim sisteminde “hareketi azalt” açıksa animasyonlar duruyor.

4. İçerik: arama ve yapay zekâ için yazmak

• Her sayfanın tek bir hedef kelimesi ve tek bir görevi var.
• Sayfanın ilk cümlesi kim olduğunu, ne yaptığını ve nerede hizmet verdiğini açıkça söylüyor.
• Metinler gerçek HTML olarak sayfada duruyor. 3D sahne ya da görsel içinde kalan metin, arama motoru için yok hükmünde.
• Blog yazıları ilgili hizmet sayfasına bağlanıyor.

Yapılandırılmış veri, llms.txt, Markdown ikizleri ve ölçüm yöntemini SEO ve GEO yazısında ayrıntılı anlattım.

5. Çok dilli yapı

• Varsayılan dil kök adreste, diğer diller kendi yolunda (/en/).
• Her sayfada hreflang etiketleriyle dil karşılıkları bildiriliyor.
• Site haritası her dilin karşılığını içeriyor.
• Metinler tek bir kaynak dosyada tutuluyor. Sayfa ile 3D sahnedeki tabelalar aynı metinden besleniyor; iki yerde iki farklı yazım olmuyor.

6. Güvenlik baştan

• Katı içerik güvenlik politikası: Sayfada yalnızca sitenin kendi betik ve stil dosyaları çalışıyor. Satır içi betik yok. Bu yüzden derleme aracının küçük stil dosyalarını sayfaya gömmesini bilerek kapattım; aksi hâlde politika o stilleri engellerdi.
• HSTS, nosniff, referrer ve izin politikaları her yanıtta.
• Form güvenliği: Satır içi doğrulama, botları ayıklayan gizli bir alan ve sunucuya gitmeden önce istemci tarafında kontrol.
• Bağımlılık denetimi: Paket sürümleri sabit, her kurulumda güvenlik denetimi çalışıyor.

Yayın öncesi otomatik güvenlik kapısını güvenlik yazısında anlattım.

7. Yayın: doğrulanmadan bitmiş sayılmaz

Kurumsal bir sitede kullandığım yayın akışı:

1. Yerel doğrulama zinciri: Kod denetimi (lint), derleme, SEO testi, form testi, animasyon testi ve içerik eşleşme kontrolü. Biri bile başarısızsa yayın yok.
2. Sunucuya gönderim: Kod, depodan paketlenerek sunucuya gidiyor.
3. Ağsız derleme: Sunucuda derleme, internet erişimi kapalı bir konteynerde yapılıyor. Derleme sırasında dışarıdan beklenmedik bir kod inemiyor.
4. Yedek: Yayından önce mevcut sitenin yedeği alınıyor.
5. Canlı doğrulama: Yayından sonra altı kritik sayfa canlıda kontrol ediliyor.
6. Otomatik geri dönüş: Doğrulama başarısızsa site kendiliğinden bir önceki sürüme dönüyor.

Bu sitede ise yayın daha sade: ana dala her gönderim, barındırma platformunda otomatik derleme ve yayın başlatıyor; site yaklaşık yarım dakika içinde güncelleniyor. Her yayından sonra canlı sitede kalite kontrol betiğim çalışıyor.

Blog için yayın kuyruğu

Kurumsal sitenin blogunda onaylanan yazı doğrudan yayına gitmiyor, bir kuyruğa giriyor. Dakikada bir çalışan ve aynı anda iki kez çalışmasını engelleyen bir kilitle korunan görev, kuyruktaki işi alıyor. İçerik ekleniyor, site ağsız konteynerde yeniden derleniyor, SEO testinden geçiyor, yedek alınıyor ve yayın canlıda doğrulanıyor. Hata olursa site değişmiyor, hatalı dosyalar silinmeden kenara alınıyor ve Telegram’a bildirim gidiyor. Yazıların nasıl üretilip onaylandığını otomasyon yazısında anlattım.

8. Kalite kontrol: otomatik ve görsel

Bu site için yazdığım kalite kontrol betiği, sayfayı gerçek bir tarayıcıda masaüstü ve telefon boyutunda açıyor ve şunları raporluyor:

• Konsoldaki hatalar ve güvenlik politikası ihlalleri.
• 3D sahnede birbirinin içine geçen nesneler.
• Yazının, arkasındaki adanın ne kadarını kapattığı.
• Formun doğrulama mesajları ve gönderim adımları.
• Telefonda yatay taşma.
• Her adanın yakın çekim ekran görüntüleri.

Tasarımdaki bir hata çoğu zaman kodda değil, ekranda görünür. Bu yüzden rakamların yanında her seferinde ekran görüntülerine de bakıyorum.

Bu betikle bulduğum sorunlardan bazıları: öndeki ağaçların karakteri kapatması, bir direğin kamerayla karakterin arasına girmesi, gökyüzü ile deniz arasında görünen bir şerit ve telefonda sahneyi donduran bir zaman hesabı hatası.

9. Performans bütçesi

• Metin, ağır içerikten önce yüklenir. Bu sitede 3D kütüphanesi ayrı bir paket olarak sonradan geliyor.
• Hareket etmeyen 3D parçalar birleştirilir. Bu sitede ağ sayısı 858’den 492’ye, çizim çağrısı 818’den 533’e indi.
• Telefonda daha düşük piksel oranı ve daha küçük gölge haritası.
• Yazı tipleri ve üçüncü taraf bileşenler kritik yolda tutulmaz.

10. Yayından sonra

• Arama motoru ve yapay zekâ görünürlüğü düzenli ölçülüyor.
• İlk ölçüm (başlangıç çizgisi) sabit tutuluyor, her değişiklik ona göre değerlendiriliyor.
• Bir değişiklik önce tek sayfada deneniyor, ölçülüyor, sonra bütün siteye yayılıyor.

Bir siteyi değerli kılan, yayından sonra da ölçülüp iyileştirilmesi.

Siteniz için iletişim formundan ulaşabilirsiniz.