Statik Site Nedir? HTML/CSS ile Basit Web Site Kurma

Statik Site Ne Demek?

Statik site, ziyaretçiye önceden hazırlanmış dosyaların doğrudan sunulduğu web sitesi türüdür. Araya giren bir veritabanı, panel ya da sunucu taraflı işlem yoktur. Sayfayı sen hazırlarsın, tarayıcı olduğu gibi gösterir.

Portfolyo, kişisel tanıtım sayfası veya az sayıda içerik barındıran bir site için statik site kurmak hem hızlı hem de mantıklıdır. Buradaki temel mantık şu: hangi dosyayı oluşturursan o sayfa açılır. about.html dosyan varsa hakkında sayfan var demektir, başka bir şeye gerek yok.

Statik Site ile Dinamik Site Arasındaki Fark

En net ayrımı şöyle koyalım:

Statik site: Sayfalar önceden hazırlanır, sunucu dosyayı olduğu gibi gönderir.
Dinamik site: Sayfa içeriği her istekte veritabanından çekilerek o an oluşturulur.

WordPress'te blog yazısı eklemek için panele girip birkaç tıklamayla yayınlayabilirsin. Statik sitede ise yeni bir HTML dosyası oluşturup yüklemen gerekir. Sık sık içerik gireceksen dinamik taraf daha kullanışlıdır. Sade, hızlı ve bakımı kolay bir yapı yeterliyse statik site tam ihtiyacına göre çalışır.

Statik Site Temel Dosya Yapısı

Başlangıç için şu sade yapı yeterli:

index.html → Ana sayfa

about.html → Hakkında

assets/ → CSS, görsel ve JS dosyaları

CSS dosyasını HTML'e bağlamak için sayfanın <head> kısmına tek bir satır eklemen yeterli. Ayrıca Türkçe karakterlerin düzgün görünmesi ve sitenin mobilde bozulmaması için de <head> içine iki kısa satır daha koyman gerekiyor. Bunları nasıl ekleyeceğini bir sonraki yazıda adım adım göstereceğim.

index.html Önemi

Bir ziyaretçi tarayıcıya sadece alan adını yazdığında sunucu hangi dosyayı açacağını bilmek zorundadır. Çoğu sunucu bu durumda varsayılan olarak index.html arar. Dosya doğru klasörde yoksa ana sayfa boş gelir ya da hata verir. Kısaca index.html sitenin giriş noktasıdır, olmadan site a-çıl-maz!

Statik Site Kime Uygun?

Eğer amacın kendini tanıtmak, bir portfolyo oluşturmak ya da birkaç sayfadan oluşan sade bir site yayınlamak ise statik site fazlasıyla yeterlidir. Üye girişi, yorum sistemi, sepet gibi özellikler gerekmiyorsa veritabanına da ihtiyacın yok demektir. Öte yandan düzenli içerik yayınlayacaksan, bir ekiple çalışacaksan ya da kullanıcıya özel içerik göstereceksen dinamik taraf daha mantıklı olur. Başlangıçta bunu bilmek kafa karışıklığını önler ve doğru araçla işe başlamanı sağlar.

Statik Siteyi Nasıl Yayınlarsın?

Hazırladığın dosyaları internete almanın birkaç yolu var:

Hosting + Dosya Yöneticisi: Panel üzerinden dosyaları sürükleyip bırakırsın.
FTP: FileZilla gibi ücretsiz bir program ile dosyaları sunucuya aktarırsın.
Netlify: Dosya klasörünü sürükleyip bırakarak saniyeler içinde yayına alırsın. Ücretsiz ve başlangıç için en pratik seçenek.
GitHub Pages: Projeyi GitHub'a yükleyip birkaç ayarla yayınlayabilirsin.

Hangi yöntemi seçersen seç, index.html dosyasının doğru klasörde olduğunu kontrol etmek ilk adım olmalı.

Basit Bir Statik Site Kurmak İçin Adımlar

Sıfırdan başlıyorsan genel akış şu şekilde ilerler:

Bir klasör oluştur. Tüm site dosyaların burada duracak, ismi ne olursa olsun.
index.html dosyası oluştur. Bu senin ana sayfan. Bir metin editörü yeterli; VS Code ücretsiz ve bu iş için idealdir.
Bir CSS dosyası ekle. Tasarımı buraya yazacaksın. assets klasörü açıp içine style.css koymak düzenli bir başlangıç olur.
CSS'i HTML'e bağla. HTML dosyanın <head> kısmına tek bir satır eklemen yeterli, bir sonraki yazıda bunu göstereceğim.
Diğer sayfaları oluştur. Her sayfa için yeni bir HTML dosyası açman yeterli. about.html, iletisim.html gibi.
Siteyi yayınla. Dosyaları hazırladıktan sonra yukarıda bahsettiğimiz yöntemlerden biriyle internete alabilirsin.

Yeni başlayanlar için, statik siteyle başlamak, web sitelerin arka planda nasıl çalıştığını anlamak için iyi bir fırsat olur. Bir HTML dosyası oluşturmak, CSS bağlamak, index.html'i doğru yere koymak ve siteyi yayınlamak.. Bunların hepsi bir araya geldiğinde aslında oldukça basit bir tablo ortaya çıkıyor. Birkaç sayfa yönetir hale gelince dinamik tarafa geçip geçmemek kişiye kalmış.