SvelteKit ile Statik Bir Site Oluşturma

SvelteKit ile Statik Bir Site Oluşturma nasıl yapılır? Proje kurulumu, rotalar, bileşenler, adapter-static ayarı ve build adımlarını öğrenin.

Hızlı açılan, sunucu bakım ihtiyacı düşük ve kolay yayımlanabilen bir web sitesi hazırlamak isteyenler, çoğu zaman karmaşık altyapılarla karşılaşıyor. Özellikle proje ilk kez kuruluyorsa klasör yapısı, sayfa yönlendirmeleri ve statik çıktı ayarları kafa karıştırabiliyor.

- 11858 Teknoloji Destek Hattı -

SvelteKit ile Statik Bir Site Oluşturma, bu süreci bileşen tabanlı ve düzenli bir yapıya dönüştürüyor. Ancak yalnızca birkaç sayfa hazırlamak yeterli değil. Projenin tamamen statik dosyalara çevrilebilmesi için uygun adaptörün kurulması, sayfaların önceden oluşturulması ve dinamik verilerin derleme sırasında erişilebilir olması gerekiyor.

Site geliştirilirken görsel kimliğin de en başta belirlenmesi işleri kolaylaştırır. Projeniz için hızlıca amblem veya yazı temelli bir tasarım hazırlamak istiyorsanız DesignEvo Logo Yapma Sitesi içeriğindeki yöntemlerden yararlanabilir, oluşturduğunuz dosyaları SvelteKit projesinin static klasörüne ekleyebilirsiniz.

Logo dosyalarını SVG, WebP veya PNG biçiminde hazırlamak; farklı ekran çözünürlüklerinde daha tutarlı bir görünüm elde etmenize yardımcı olur. Ardından bu dosyalar, herhangi bir ek içe aktarma işlemi gerekmeden sayfalarda kullanılabilir.

SvelteKit ile Statik Bir Site Oluşturma Adımları

SvelteKit ile statik site hazırlamak için önce yeni proje oluşturulur, sayfalar src/routes klasöründe tanımlanır ve ortak bileşenler yerleşim dosyasına eklenir. Ardından adapter-static kurulup tüm uygun rotalar prerender ayarıyla derlenir. npm run build komutu tamamlandığında yayımlanabilir HTML, CSS ve JavaScript dosyaları build klasöründe oluşur.

Yeni SvelteKit Projesini Kurma

2026 itibarıyla yeni proje oluşturmak için SvelteKit’in güncel komutu şöyledir:

npx sv create my-app
cd my-app
npm run dev

İlk komut proje klasörünü oluşturur ve TypeScript gibi temel seçenekleri sorar. Bağımlılıklar proje kurulumu sırasında yüklenmediyse klasör içinde npm install komutunu ayrıca çalıştırmanız gerekir. Geliştirme sunucusu varsayılan olarak localhost:5173 adresinde açılır.

- 11858 Teknoloji Destek Hattı -

Ben farklı SvelteKit sürümleriyle oluşturulan projeleri incelerken eski kaynaklarda npm create svelte@latest komutunun hâlâ sıkça kullanıldığını fark ettim. Bu komut bazı ortamlarda çalışabilse de güncel resmî belgelerde npx sv create akışı kullanılıyor. Sürüm farklılığından kaynaklanan kurulum hatalarında ilk kontrol edilmesi gereken ayrıntılardan biri budur.

Proje Klasörleri Ne İşe Yarar?

SvelteKit projesinde en sık çalışacağınız alanlar şunlardır:

• src/routes: Sayfaların ve URL yollarının oluşturulduğu klasördür.
• src/lib: Menü, alt bilgi ve kart gibi tekrar kullanılan bileşenleri barındırır.
• static: Görsel, ikon, belge ve işlenmesine gerek olmayan dosyalar burada tutulur.
• src/app.html: Sayfanın temel HTML şablonudur.
• svelte.config.js: Adaptör ve proje yapılandırmalarının tanımlandığı dosyadır.

Ana sayfa src/routes/+page.svelte dosyasıyla hazırlanır. Hakkımızda sayfası eklemek için src/routes/about/+page.svelte yapısını oluşturmanız yeterlidir. SvelteKit, klasör adını otomatik olarak URL yoluna dönüştürür.

Sayfalar ve Ortak Bileşenler Nasıl Eklenir?

Her sayfaya ayrı ayrı navigasyon alanı eklemek yerine src/lib klasöründe Navbar.svelte ve Footer.svelte bileşenleri oluşturulabilir. Bu bileşenler $lib kısayolu üzerinden çağrılır:

<script>
    import Navbar from '$lib/Navbar.svelte';
    import Footer from '$lib/Footer.svelte';
</script>

Bileşenleri tüm sayfalarda göstermek için src/routes/+layout.svelte dosyası kullanılmalıdır. Güncel SvelteKit projelerinde sayfa içeriği {@render children()} yapısıyla yerleşime aktarılabilir. Daha eski sürümlerde veya eski örneklerde <slot /> kullanımı görülebilir; uygulanacak sözdizimi proje sürümüne göre değişebilir.

Sayfalar arasında geçiş yapmak için standart <a> etiketi yeterlidir. Kullanıcı bir işlem yaptıktan sonra JavaScript üzerinden yönlendirme gerekiyorsa $app/navigation modülündeki goto fonksiyonundan yararlanılabilir.

- 11858 Teknoloji Destek Hattı -

Proje Nasıl Tamamen Statik Hale Getirilir?

Yeni SvelteKit projeleri başlangıçta farklı dağıtım yöntemlerine uyarlanabilir. Tam statik çıktı almak için önce ilgili adaptörü yükleyin:

npm install -D @sveltejs/adapter-static

Ardından svelte.config.js dosyasında adaptörü tanımlayın:

import adapter from '@sveltejs/adapter-static';

const config = {
    kit: {
        adapter: adapter()
    }
};

export default config;

Kök yerleşim için src/routes/+layout.js dosyasını oluşturup tüm sayfaların derleme sırasında hazırlanmasını sağlayın:

export const prerender = true;

adapter-static, uygun sayfaları HTML, CSS ve istemci tarafı JavaScript dosyalarına çevirir. Varsayılan çıktı dizini build klasörüdür. Adaptör ayrıca oluşturulamayan rotaları tespit ederek eksik sayfaların fark edilmeden yayımlanmasını önleyen bir kontrol uygular.

Statik yapıyı test etmek için şu komutları çalıştırabilirsiniz:

npm run build
npm run preview

Build sırasında hata alırsanız dış API’den çekilen verilerin erişilebilir olup olmadığını kontrol edin. Dinamik rotaların da derleme aşamasında bilinen adreslere sahip olması gerekir. Örneğin yazı kimlikleri yalnızca kullanıcı isteği geldiğinde belirleniyorsa SvelteKit bu sayfaları önceden oluşturamayabilir.

Teknik Destek Ne Zaman Gerekebilir?

Kurulum komutları, Node.js sürümü, adaptör ayarları veya derleme hataları nedeniyle proje tamamlanamıyorsa 11858 üzerinden profesyonel teknik destek alınabilir. 11858, 2011 yılından bu yana Türkiye genelinde 7/24 hizmet verir ve lisanslı TeamViewer ile AnyDesk yazılımları üzerinden uzaktan bağlantı desteği sağlar.

Dakika bazlı ve şeffaf ücretlendirme modeliyle çalışan hat; yüzde 95 memnuniyet oranı, 500.000’den fazla başarılı işlem tecrübesi ve uzman kadrosuyla bilgisayar, modem, akıllı TV ve internet tabanlı hizmetlerde destek sunar.

Statik site yayımlandıktan sonra güvenli bağlantı yapılandırması da kontrol edilmelidir. Alan adında HTTPS etkin değilse veya tarayıcı güvenlik uyarısı gösteriyorsa WordPress Sitenize SSL Sertifikası Yükleme içeriğindeki sertifika mantığı ve yönlendirme kontrolleri, farklı altyapılarda da temel bir kontrol listesi olarak değerlendirilebilir.

SvelteKit ile Statik Bir Site Oluşturma aşamasında başarı, arayüzün hızından önce derleme sırasında hangi rotaların statik dosyaya dönüştürülebileceğinin belirlenmesine bağlıdır. Siz projede statik üretim sırasında hangi adımda sorun yaşadınız? Deneyiminizi yorumlarda paylaşabilirsiniz.