Merhaba arkadaşlar, bugün sizlere Cloudflare kullanırken karşılaştığımız 502, 504, 404 gibi teknik hata sayfalarını nasıl daha kullanıcı dostu ve markanıza uygun hale getirebileceğinizi anlatacağım. Sunucunuzda bir sorun olsa bile, ziyaretçilerinize "Site kapandı" hissi yaşatmak yerine, profesyonel ve bilgilendirici bir sayfa göstermek çok önemli. Benim de tüm sunucularımda uyguladığım bu yöntemle, kullanıcı deneyimini ciddi anlamda iyileştirebilirsiniz.
Cloudflare Custom Pages Nedir?
Cloudflare, size özel hata sayfaları oluşturmanıza izin veren harika bir özellik sunuyor. Bu sayfalar, sunucunuzdan dönen belirli HTTP hata kodları için devreye girer. Örneğin, sunucu aşırı yüklendiğinde ve 502 Bad Gateway hatası verdiğinde, sizin tasarladığınız "Biraz yoğunuz, lütfen bekleyin" gibi bir sayfa gösterilebilir. Bu, ziyaretçilerinizin panikle sayfayı terk etmesini engeller.
Cloudflare Panelinde Ayarlara Erişim
İlk adım olarak Cloudflare dashboard'ınıza giriş yapın. Yan menüden "Workers & Pages" sekmesine tıklayın. Daha sonra, "Custom Pages" bölümüne gelmeniz gerekiyor. Bu bölüm bazen "Workers" altında da olabilir, panel güncellemelerine göre konumu değişebilir. Bulamazsanız, arama kutusuna "Custom Pages" yazabilirsiniz.
Burada, Cloudflare'in ön tanımlı olarak düzenleyebileceğiniz birkaç hata sayfası türünü göreceksiniz. En sık kullanılanlar:
1000s Errors (Genel Cloudflare hataları)
502 Bad Gateway, 503 Service Unavailable, 504 Gateway Timeout (Sunucu kaynaklı kritik hatalar)
404 Not Found (Bulunamayan sayfalar)
Challenge Pages (5 saniyelik doğrulama sayfası)
Özel Hata Sayfası Tasarlama ve Yükleme
Cloudflare size iki seçenek sunar: Hazır şablonları düzenlemek veya kendi HTML sayfanızı yüklemek. Ben her zaman kendi HTML'imi yüklemeyi tercih ederim, çünkü marka kimliğimi tam yansıtır.
Basit ve etkili bir 502/503/504 hata sayfası örneği hazırlayalım. Bu HTML'yi bilgisayarınızda bir dosyaya kaydedin (örneğin: custom_error.html).
Cloudflare panelinde, örneğin "502 Bad Gateway" sayfasını düzenlemek istediğinizi seçin. "Customize" butonuna tıklayın. Açılan pencerede, "Upload custom HTML" seçeneğini bulun ve hazırladığınız HTML dosyasını yükleyin. Değişiklikleri kaydedin.
Dikkat Edilmesi Gereken Kritik Noktalar
Bu ayarı yaparken şu ayara çok dikkat etmelisiniz: Custom Pages, sadece Cloudflare'in proxy'sinden (turuncu bulut) geçen trafik için çalışır. Yani, DNS kayıtlarınızda proxy kapalı (gri bulut) olan bir subdomain veya IP'niz doğrudan erişilebilir durumdaysa, bu hata sayfaları orada görünmez. Tüm kritik alanlarınızın proxy özelliğinin açık olduğundan emin olun.
Ayrıca, hata sayfalarınızda çok fazla dış kaynak (büyük resimler, kompleks CSS/JS kütüphaneleri) kullanmamaya özen gösterin. Amacımız hızlı ve bilgilendirici bir sayfa göstermek. Cloudflare'in kendi sunucularından servis edildiği için sayfa anında yüklenir, bu da büyük bir avantaj.
İleri Seviye Öneri: Workers ile Dinamik Hata Sayfaları
Eğer daha fazla kontrol istiyorsanız, Cloudflare Workers ile bu işi çok daha akıllı hale getirebilirsiniz. Örneğin, hatanın türüne göre farklı içerik gösterebilir veya belirli bir IP adresinden gelen ziyaretçilere teknik logları gösterebilirsiniz. Bu biraz daha kodlama gerektirir, ancak inanılmaz esneklik sağlar. Zamanım olursa bununla ilgili de ayrı bir rehber hazırlayabilirim.
Sonuç olarak, bu basit ayar sitenizin profesyonelliğini katlayarak artırır. Kullanıcılarınız sunucu hatalarını anlayışla karşılar ve sitenizden ayrılmaz. Ben genelde tüm müşteri sunucularımda en azından 5xx hataları için özel bir sayfa mutlaka hazırlarım.
Peki siz bu konfigürasyonu kendi sunucularınızda nasıl yapıyorsunuz? Cloudflare Custom Pages veya Workers ile ilgili deneyimlerinizi paylaşın. Takıldığınız bir nokta olursa, aşağıya yazmaktan çekinmeyin, yardımcı olmaya çalışırım.
Cloudflare Custom Pages Nedir?Cloudflare, size özel hata sayfaları oluşturmanıza izin veren harika bir özellik sunuyor. Bu sayfalar, sunucunuzdan dönen belirli HTTP hata kodları için devreye girer. Örneğin, sunucu aşırı yüklendiğinde ve 502 Bad Gateway hatası verdiğinde, sizin tasarladığınız "Biraz yoğunuz, lütfen bekleyin" gibi bir sayfa gösterilebilir. Bu, ziyaretçilerinizin panikle sayfayı terk etmesini engeller.
Cloudflare Panelinde Ayarlara Erişimİlk adım olarak Cloudflare dashboard'ınıza giriş yapın. Yan menüden "Workers & Pages" sekmesine tıklayın. Daha sonra, "Custom Pages" bölümüne gelmeniz gerekiyor. Bu bölüm bazen "Workers" altında da olabilir, panel güncellemelerine göre konumu değişebilir. Bulamazsanız, arama kutusuna "Custom Pages" yazabilirsiniz.
Burada, Cloudflare'in ön tanımlı olarak düzenleyebileceğiniz birkaç hata sayfası türünü göreceksiniz. En sık kullanılanlar:
1000s Errors (Genel Cloudflare hataları)
502 Bad Gateway, 503 Service Unavailable, 504 Gateway Timeout (Sunucu kaynaklı kritik hatalar)
404 Not Found (Bulunamayan sayfalar)
Challenge Pages (5 saniyelik doğrulama sayfası)
Özel Hata Sayfası Tasarlama ve YüklemeCloudflare size iki seçenek sunar: Hazır şablonları düzenlemek veya kendi HTML sayfanızı yüklemek. Ben her zaman kendi HTML'imi yüklemeyi tercih ederim, çünkü marka kimliğimi tam yansıtır.
Basit ve etkili bir 502/503/504 hata sayfası örneği hazırlayalım. Bu HTML'yi bilgisayarınızda bir dosyaya kaydedin (örneğin: custom_error.html).
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bakım Zamanı | SiteAdı</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; background-color: #f4f4f4; color: #333; }
.container { max-width: 600px; margin: auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
h1 { color: #e74c3c; }
.logo { max-width: 200px; margin-bottom: 20px; }
.btn { display: inline-block; background: #3498db; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<!-- Kendi logonuzun URL'sini ekleyin -->
<img src="https://www.siteadiniz.com/logo.png" alt="Site Logo" class="logo">
<h1>⏳ Sunucularımız Şu An Yoğun</h1>
<p>Merhaba! Sanırız bir anda çok fazla misafirimiz oldu. Sistemlerimiz bu yoğunluğu dengelemek için otomatik olarak ölçeklendiriliyor.</p>
<p>Lütfen <strong>10-30 saniye</strong> içinde sayfayı yenileyin (F5 tuşu). Sorun devam ederse, sosyal medya hesaplarımızdan bizi takip edebilirsiniz.</p>
<p>Anlayışınız için teşekkür ederiz!</p>
<p><em>- SiteAdı Teknik Ekibi</em></p>
<a href="/" class="btn">Ana Sayfaya Dön</a>
<a href="https://twitter.com/siteadiniz" class="btn">Durumu Twitter'dan Takip Et</a>
</div>
</body>
</html>Cloudflare panelinde, örneğin "502 Bad Gateway" sayfasını düzenlemek istediğinizi seçin. "Customize" butonuna tıklayın. Açılan pencerede, "Upload custom HTML" seçeneğini bulun ve hazırladığınız HTML dosyasını yükleyin. Değişiklikleri kaydedin.
Dikkat Edilmesi Gereken Kritik NoktalarBu ayarı yaparken şu ayara çok dikkat etmelisiniz: Custom Pages, sadece Cloudflare'in proxy'sinden (turuncu bulut) geçen trafik için çalışır. Yani, DNS kayıtlarınızda proxy kapalı (gri bulut) olan bir subdomain veya IP'niz doğrudan erişilebilir durumdaysa, bu hata sayfaları orada görünmez. Tüm kritik alanlarınızın proxy özelliğinin açık olduğundan emin olun.
Ayrıca, hata sayfalarınızda çok fazla dış kaynak (büyük resimler, kompleks CSS/JS kütüphaneleri) kullanmamaya özen gösterin. Amacımız hızlı ve bilgilendirici bir sayfa göstermek. Cloudflare'in kendi sunucularından servis edildiği için sayfa anında yüklenir, bu da büyük bir avantaj.
İleri Seviye Öneri: Workers ile Dinamik Hata SayfalarıEğer daha fazla kontrol istiyorsanız, Cloudflare Workers ile bu işi çok daha akıllı hale getirebilirsiniz. Örneğin, hatanın türüne göre farklı içerik gösterebilir veya belirli bir IP adresinden gelen ziyaretçilere teknik logları gösterebilirsiniz. Bu biraz daha kodlama gerektirir, ancak inanılmaz esneklik sağlar. Zamanım olursa bununla ilgili de ayrı bir rehber hazırlayabilirim.
Sonuç olarak, bu basit ayar sitenizin profesyonelliğini katlayarak artırır. Kullanıcılarınız sunucu hatalarını anlayışla karşılar ve sitenizden ayrılmaz. Ben genelde tüm müşteri sunucularımda en azından 5xx hataları için özel bir sayfa mutlaka hazırlarım.
Peki siz bu konfigürasyonu kendi sunucularınızda nasıl yapıyorsunuz? Cloudflare Custom Pages veya Workers ile ilgili deneyimlerinizi paylaşın. Takıldığınız bir nokta olursa, aşağıya yazmaktan çekinmeyin, yardımcı olmaya çalışırım.