Cloudflare Pages ile Statik Web Sitesi Yayınlamak: Başlıklar, Önbellek ve Alan Adı

Bir blog, belgelendirme sitesi ya da küçük bir kurumsal sayfa için sunucu kiralamaya, işletim sistemi güncellemeye ve güvenlik yamalarıyla uğraşmaya gerek yoktur. Statik site, yani önceden üretilmiş HTML, CSS ve JavaScript dosyaları, bir CDN üzerinden dünyanın her yerine hızlıca sunulabilir. Cloudflare Pages bunu ücretsiz katmanda yapar. Bu yazıda yükleme yöntemlerini, alan adı bağlamayı ve üretim kalitesinde bir site için gereken ayarları ele alıyoruz.

Arayüz ve ücretsiz katman limitleri zamanla değişebilir. Güncel ayrıntılar için Cloudflare'in resmi belgelerine bakın; burada kavramlara ve sizin kontrol edebileceğiniz ayarlara odaklanıyoruz.

Statik site ne zaman yeterli?

Sitenizde kullanıcı girişi, veritabanı ya da her ziyaretçiye özel içerik yoksa, statik site hem daha hızlı hem daha güvenlidir: sunucuda çalışan kod olmadığından saldırı yüzeyi çok küçüktür. Rehberler, yazılar, ürün tanıtımları ve belgeler tipik örneklerdir. Arama gibi küçük etkileşimler, tarayıcıda çalışan JavaScript ile (önceden üretilmiş bir arama dizini kullanarak) yine mümkündür.

Siteyi üretmek

Dosyalarınızı elle yazabilir ya da bir statik site üreticisi kullanabilirsiniz. Önemli olan sonucun tek bir klasör olmasıdır:

dist/
  index.html
  rehberler/index.html
  rehber/yazi-adi/index.html
  style.css
  404.html
  robots.txt
  sitemap.xml

rehber/yazi-adi/index.html yapısı sayesinde adres https://alanadi.com/rehber/yazi-adi/ gibi temiz görünür; dosya uzantısı gerekmez.

Yükleme yöntemleri

1. Doğrudan yükleme. Cloudflare panelinde Workers & Pages bölümünden yeni bir Pages projesi oluşturup dist klasörünü sürükleyebilirsiniz. Tek seferlik siteler için en hızlı yoldur.

2. Komut satırı. Node.js kuruluysa:

npx wrangler pages deploy dist --project-name=siteadi

İlk çalıştırmada tarayıcıda Cloudflare hesabınıza giriş yapmanız istenir. Sonraki güncellemelerde aynı komut yeterlidir.

3. Git entegrasyonu. Sitenizin kaynağı bir GitHub ya da GitLab deposundaysa, Pages her push'ta siteyi yeniden üretip yayınlar. Bir derleme komutu ve çıktı klasörü adı verirsiniz. Her dal için ayrı bir önizleme adresi de oluşur; bu, değişiklikleri yayına almadan test etmek için çok kullanışlıdır.

Kendi alan adınızı bağlamak

Proje oluştuktan sonra size proje.pages.dev adresi verilir. Kendi alan adınızı bağlamak için projenin "Custom domains" bölümünden alan adını ekleyin. Alan adı zaten Cloudflare DNS'inde yönetiliyorsa gerekli kayıt otomatik eklenir ve HTTPS sertifikası birkaç dakika içinde hazır olur.

İki detayı düşünün:

• www ve çıplak alan adı. İkisinden birini asıl adres seçin, diğerini ona yönlendirin. Aksi halde arama motorları aynı içeriği iki adreste görür.
• pages.dev adresi. Alan adı bağlansa da proje.pages.dev adresi çalışmaya devam eder. İçerik tekrarı olmaması için sayfalarınıza kendi alan adınızı gösteren bir canonical bağlantısı koyun (<link rel="canonical" href="https://alanadi.com/...">).

Güvenlik başlıkları: _headers dosyası

Pages, çıktı klasörünüzün kökündeki _headers dosyasını okur. Örnek:

/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  X-Frame-Options: SAMEORIGIN
  Permissions-Policy: camera=(), microphone=(), geolocation=()

/style.css
  Cache-Control: public, max-age=31536000, immutable

İlk blok tüm sayfalara güvenlik başlıkları ekler. X-Frame-Options, sitenizin başka bir sitede çerçeve içinde gösterilmesini sınırlar. İkinci blok, adresi içerik özetine göre değişen dosyalar için uzun önbellek tanımlar. Bunun çalışması için dosya adlarının ya da sorgu parametrelerinin (style.css?v=abc123) içerik değişince değişmesi gerekir; aksi halde ziyaretçiler eski dosyayı görmeye devam eder.

Daha sıkı bir Content-Security-Policy başlığı da ekleyebilirsiniz; ancak reklam ve analiz betikleri kullanıyorsanız izin verilen kaynakları (Google'ın alan adları gibi) doğru listelemeniz gerekir. Yanlış bir CSP reklamların yüklenmesini engelleyebilir; bu yüzden önce Content-Security-Policy-Report-Only ile deneyin.

404 sayfası

Pages, kökte 404.html dosyası varsa bulunamayan adresler için onu sunar. İyi bir 404 sayfası, ziyaretçiyi ana sayfaya ya da rehber listesine yönlendiren bağlantılar içermelidir. Arama motorlarının bu sayfayı dizine eklememesi için noindex ekleyin.

Sık yapılan hatalar

Eski içerik görünüyor. Tarayıcı ya da CDN önbelleği olabilir. Dosya adına sürüm parametresi eklemek ve HTML sayfalarına kısa önbellek vermek en güvenli yoldur. Panelde önbelleği temizleme seçeneği de vardır.

Bir sayfada 404, /sayfa/ çalışıyor ama /sayfa çalışmıyor. Pages genellikle eğik çizgi eksiğini düzeltir; ama tüm bağlantılarınızı tek bir biçimde (ör. sonu / ile biten) yazarsanız ve canonical'ı aynı biçimde verirseniz sorun yaşamazsınız.

Türkçe karakterler bozuk. HTML'inizin başında <meta charset="utf-8"> olduğundan ve dosyaları UTF-8 kaydettiğinizden emin olun.

sitemap.xml yanlış alan adını gösteriyor. Site haritasındaki adresler, sitenizin gerçek adresiyle başlamalıdır (https://alanadi.com/...). Aksi halde Search Console hata verir.

Yayın sonrası kontroller

• Tarayıcıda her sayfa türünü (ana sayfa, makale, kategori, yasal sayfalar) açın.
• Telefondan açıp yatay kaydırma, küçük yazı ve tıklanabilir alan sorunlarına bakın.
• robots.txt ve sitemap.xml adreslerini tarayıcıdan açın.
• Google Search Console'a alan adını ekleyip site haritasını gönderin.
• Sayfa hızını bir araçla ölçün; statik bir sitede bu değerler çok iyi çıkmalıdır.
• Bozuk bağlantı bırakmayın: iç bağlantıların tümünü bir betikle tarayın.

Güvenlik ve gizlilik

Statik bir sitede bile gizlilik sorumluluğu vardır: kullandığınız analiz, yazı tipi ya da reklam hizmetleri ziyaretçi verisi toplar. Bunları gizlilik ve çerez politikanızda açıkça belirtin ve gerekli onayı alın. Cloudflare Web Analytics gibi çerezsiz ölçüm araçları bu yükü azaltır.

Cloudflare'i yalnızca statik siteler için değil, ofisinizdeki bir uygulamayı portlara dokunmadan yayınlamak için de kullanabilirsiniz; bunun için Cloudflare Tunnel rehberine bakın.