Gatsby ile statik site oluşturma nasıl yapılır? Kurulum, React bileşenleri, GraphQL veri yönetimi, sayfa yapısı ve görsel kullanımını öğrenin.
Bir internet sitesinin sunucu yanıtını beklemesi, veritabanından içerik çekmesi ve her ziyaret sırasında sayfayı yeniden hazırlaması yüklenme süresini uzatabilir. Özellikle blog, portföy ve kurumsal tanıtım sitesi gibi içerikleri sık değişmeyen projelerde bu kadar karmaşık bir yapıya ihtiyaç duyulmayabilir.
Gatsby ile statik site oluşturma, sayfaların yayınlama aşamasından önce hazırlanmasını sağlayarak bu yükü azaltır. React tabanlı bileşen yapısı sayesinde sayfalar yönetilebilir parçalara ayrılırken ortaya çıkan HTML, CSS ve JavaScript dosyaları doğrudan ziyaretçiye sunulabilir. Böylece geliştirme esnekliği ile statik dosyaların sağladığı hız aynı projede buluşur.
Mevcut bir WordPress projesindeki içerikleri yeni yapıya aktarmayı planlıyorsanız veri kaybı yaşamamak için taşıma sürecini önceden tasarlamanız gerekir. Bu noktada En İyi WordPress Site Taşıma Eklentileri Nelerdir? içeriğindeki araçları inceleyerek dosyalarınızı ve veritabanınızı yedekleyebilir, ardından Gatsby kurulumuna daha güvenli biçimde geçebilirsiniz.
Gatsby ile Statik Site Oluşturma Nedir?
Gatsby ile statik site oluşturma, React bileşenleri ve farklı veri kaynakları kullanılarak sayfaların derleme sırasında hazırlanmasıdır. Gatsby; içerikleri GraphQL veri katmanından alabilir, sayfaları önceden oluşturabilir ve ortaya çıkan dosyaları bir CDN üzerinden yayınlanabilecek hale getirebilir. Bu yaklaşım özellikle içerik ağırlıklı projelerde hızlı, düzenli ve ölçeklenebilir bir yapı sunar.
Gatsby, yalnızca sabit HTML dosyaları hazırlayan basit bir araç değildir. React tabanlı açık kaynaklı bir framework olarak bileşenler, yönlendirme, veri sorgulama, görsel optimizasyonu ve farklı oluşturma seçeneklerini aynı proje içerisinde kullanabilir. Resmî belgelerde statik site üretiminin yanında gecikmeli statik oluşturma ve sunucu taraflı oluşturma seçenekleri de bulunur.
Statik sayfalarda her istek için sunucuda yeniden işlem yapılmadığından içerik doğrudan hazırlanmış dosyalardan teslim edilir. Bu durum yüklenme süresini düşürebilir, sunucu tarafındaki saldırı yüzeyini daraltabilir ve içeriklerin CDN üzerinden dağıtılmasını kolaylaştırabilir.
Gatsby Kurulumu Nasıl Yapılır?
Kuruluma başlamadan önce bilgisayarınızda güncel bir Node.js sürümü ve npm bulunmalıdır. React, JavaScript, HTML ve CSS konusunda temel bilgi sahibi olmak da proje yapısını anlamayı kolaylaştırır.
2026 itibarıyla resmî Gatsby hızlı başlangıç sayfasında yeni proje oluşturmak için şu komut öneriliyor:
npm init gatsbyKomut çalıştırıldığında proje adı, kullanılacak dil, içerik yönetim sistemi ve stil yöntemi gibi seçenekler terminal üzerinden belirlenir. Kurulum tamamlandıktan sonra proje klasörüne geçip yerel geliştirme sunucusunu başlatabilirsiniz:
cd proje-adi
npm run developSite varsayılan olarak http://localhost:8000 adresinden görüntülenir. Gatsby veri katmanını incelemek için kullanılan GraphiQL ekranına ise http://localhost:8000/___graphql adresinden erişilebilir.
Gatsby Proje Yapısı Nasıl Çalışır?
Gatsby projesinde en sık kullanılan alanlardan biri src klasörüdür. Sayfalar, bileşenler, stiller ve projeye ait işlenen görseller genellikle burada tutulur.
src/pages içerisine eklenen JavaScript veya JSX dosyaları otomatik olarak bir web adresine dönüşür. Örneğin src/pages/hakkimizda.js dosyası oluşturulduğunda /hakkimizda yolu hazırlanır. Daha karmaşık projelerde dosya sistemi yönlendirmesi veya gatsby-node.js içerisindeki createPages işlevi kullanılabilir. Resmî belgeler, çoğu dinamik sayfa ihtiyacında önce File System Route API yönteminin değerlendirilmesini öneriyor.
Tekrarlanan navigasyon, alt bilgi ve içerik çerçevesi gibi bölümler ayrı React bileşenlerine dönüştürülebilir. Ardından bu parçalar bir Layout bileşeni içerisinde birleştirilerek bütün sayfalarda aynı yapı kullanılabilir. Böylece aynı kodun farklı dosyalarda tekrar edilmesi önlenir.
İçerikler GraphQL ile Nasıl Alınır?
Gatsby’nin veri katmanı; Markdown, MDX, dosya sistemi veya bağlı bir içerik yönetim sisteminden gelen verileri ortak bir yapı altında sorgulamaya yardımcı olur. Kaynak eklentisiyle projeye alınan içerikler GraphQL üzerinden sayfalara aktarılabilir.
Blog yazıları için her içeriğin başlık, açıklama, tarih ve adres bilgisini taşıyan alanları tanımlanabilir. Ardından liste sayfasında tüm içerikler sorgulanırken ayrıntı sayfasında yalnızca ilgili adresle eşleşen kayıt alınabilir.
Eklentiler gatsby-config.js dosyasında tanımlandığında geliştirme sunucusunun yeniden başlatılması gerekir. Yaptığım kurulum kontrollerinde bu ayrıntının sık atlandığını ve yeni eklenen veri kaynaklarının GraphiQL ekranında görünmemesine yol açtığını fark ettim. Yapılandırmayı değiştirdikten sonra npm run develop işlemini yeniden çalıştırmak bu karışıklığı önler.
Stil ve Görseller Nasıl Yönetilir?
Gatsby projelerinde standart CSS, CSS Modules ve desteklenen farklı stil çözümleri kullanılabilir. Genel stiller bir layout bileşenine aktarılırken yalnızca belirli bir sayfada kullanılacak kurallar .module.css uzantılı dosyalarda tutulabilir. CSS Modules, sınıf adlarının farklı bileşenlerde birbiriyle çakışmasını önlemeye yardımcı olur.
Doğrudan değiştirilmeden yayınlanacak logo veya indirilebilir belgeler static klasöründe saklanabilir. İşlenmesi ve farklı ekran boyutlarına göre hazırlanması gereken görseller için ise Gatsby Image bileşenleri tercih edilebilir. Güncel Gatsby eğitiminde dinamik görseller için eski Img yapısı yerine GatsbyImage bileşeni ele alınmaktadır.
Kurulum, Node.js paketleri veya proje yapılandırması sırasında çözemediğiniz bir hatayla karşılaşırsanız 11858 üzerinden profesyonel teknik destek alabilirsiniz. 2011 yılından beri 7/24 hizmet veren 11858, bilgisayar ve modem işlemlerinden internet bağlantısı sorunlarına kadar farklı alanlarda uzaktan destek sağlar. Bağlantılar TeamViewer ve AnyDesk gibi lisanslı yazılımlarla gerçekleştirilir. Hat, dakika bazlı ücretlendirme sistemiyle çalışır ve 500.000’den fazla başarılı işlem deneyimine sahiptir.
Projeyi internete açmadan önce alan adı ve barındırma yapısının Gatsby çıktısını desteklediğinden emin olunmalıdır. Web Sitesi Kurmak İçin Gerekenler: Domain ve Hosting içeriği, alan adı seçimiyle yayınlama altyapısı arasındaki ilişkiyi daha doğru değerlendirmenize yardımcı olabilir.
Gatsby ile statik site oluşturma, her proje için otomatik olarak en doğru tercih değildir. Ancak içeriği belirli aralıklarla güncellenen, React bileşenleriyle yönetilmek istenen ve hızlı dağıtım gerektiren sitelerde güçlü bir temel sağlayabilir. Siz Gatsby kullanırken en fazla hangi kurulum veya yapılandırma adımında zorlandınız? Deneyiminizi yorumlarda paylaşabilirsiniz.
