WordPress'ten Gatsby'ye Geçiş: Akıl Sağlığınızı Kaybetmeden Statik Web Sitesi Gücüne Ulaşın

Geleneksel web sitelerinin hızı, güvenliği ve ölçeklenebilirliği konusunda yaşadığınız hayal kırıklıklarından sıkıldınız mı? WordPress’in esnekliği tartışılmaz, ancak performansa dayalı modern web dünyasında bazen yeterli gelmeyebilir. İşte tam da bu noktada, Gatsby gibi güçlü bir statik site oluşturucu devreye giriyor. Peki, milyonlarca sitenin güvendiği WordPress’ten modern, hızlı ve güvenli bir Gatsby altyapısına geçiş yapmak, özellikle de tüm içeriklerinizi kaybetmeden ve en önemlisi “akıl sağlığınızı kaybetmeden” nasıl mümkün olur? Bu kapsamlı rehberde, bu zorlu ama bir o kadar da ödüllendirici süreci adım adım inceleyeceğiz.

Web geliştirme dünyası sürekli evrim geçiriyor ve bu evrimin merkezinde hız, güvenlik ve kullanıcı deneyimi yer alıyor. WordPress, dinamik yapısı ve geniş eklenti ekosistemiyle uzun yıllar boyunca hüküm sürmüş olsa da, bazı durumlarda bu avantajlar dezavantajlara dönüşebilir. Yoğun veritabanı sorguları, sürekli güncellenmesi gereken eklentiler ve temalar, olası güvenlik açıkları ve barındırma maliyetleri, birçok işletme ve geliştirici için baş ağrısı yaratabiliyor.

İşte tam bu noktada, Gatsby gibi modern statik site oluşturucular sahneye çıkıyor. Gatsby, React tabanlı bir çerçeve olup, web sitelerinizi önceden oluşturulmuş (pre-built) statik HTML, CSS ve JavaScript dosyaları olarak derler. Bu ne anlama geliyor? Artık her istekte veritabanına bağlanma veya sunucu tarafında kod çalıştırma ihtiyacı ortadan kalkıyor. Sonuç mu? İnternet üzerindeki en hızlı ve en güvenli web sitelerinden bazıları. Gatsby, içerik yönetimini (CMS) arka planda bırakarak, yani bir “headless CMS” yaklaşımı benimseyerek, size tam bir esneklik sunar. WordPress’i bir içerik deposu olarak kullanırken, Gatsby ile bu içeriği alıp, istediğiniz şekilde sunabilirsiniz.

Bu geçişin temel faydalarını özetlemek gerekirse:

Yüksek Performans: Statik dosyalar doğrudan CDN’lerden (İçerik Dağıtım Ağları) sunulduğu için sayfa yükleme süreleri inanılmaz derecede düşer. Bu, hem kullanıcı deneyimi hem de SEO sıralamaları için kritik öneme sahiptir.
Üstün Güvenlik: Dinamik bir veritabanı veya sunucu tarafı kodlama olmadığı için siber saldırılara karşı çok daha dirençlidir. WordPress’in sürekli yamalanması gereken güvenlik açıklarına elveda diyebilirsiniz.
Düşük Bakım Maliyeti: Eklenti çakışmaları, veritabanı optimizasyonları veya sunucu yapılandırmalarıyla uğraşma derdi azalır. Geliştiriciler, daha çok özellik geliştirmeye odaklanabilir.
Olağanüstü Ölçeklenebilirlik: Trafik artışları statik siteleri kolayca etkilemez, çünkü CDN’ler milyonlarca isteği aynı anda işleyebilir.
Geliştirici Deneyimi: React ve GraphQL gibi modern teknolojilerle çalışmak, geliştiriciler için daha keyifli ve verimli bir ortam sunar.
Geliştirilmiş SEO: Hız ve mobil uyumluluk, arama motorları için önemli sıralama faktörleridir. Gatsby’nin doğal hızı, SEO performansınıza doğrudan katkı sağlar.

Kısacası, WordPress’ten Gatsby’ye geçiş, web sitenizi geleceğe hazırlamak, kullanıcılara daha iyi bir deneyim sunmak ve geliştiricilerin daha verimli çalışmasını sağlamak anlamına gelir. Bu modern mimari, özellikle içerik odaklı web siteleri, bloglar ve e-ticaret siteleri için vazgeçilmez bir çözüm haline gelmektedir.

Geçiş Öncesi Hazırlık: Neleri Bilmelisiniz ve Nasıl Plan Yapmalısınız?

Büyük bir platform değişikliği her zaman dikkatli bir planlama gerektirir. WordPress’ten Gatsby’ye geçiş de bir istisna değildir. “Akıl sağlığınızı kaybetmeden” bu süreci yönetmek için atmanız gereken ilk adımlar, kapsamlı bir ön hazırlık ve stratejik bir yaklaşımdır. Bu bölüm, geçişe başlamadan önce neleri göz önünde bulundurmanız gerektiğini ve nelere dikkat etmeniz gerektiğini açıklayacaktır.

İçerik Denetimi (Content Audit) ve Önceliklendirme Nasıl Yapılır?

WordPress sitenizdeki tüm içeriği, yazılarınızı, sayfalarınızı, medya dosyalarınızı ve özel gönderi türlerini gözden geçirin. Hangi içeriğin gerçekten gerekli olduğunu, hangisinin güncellenmesi gerektiğini veya hangisinin tamamen kaldırılabileceğini belirleyin. Bu, Gatsby sitenize taşınacak veri miktarını azaltacak ve geçiş sürecini hızlandıracaktır.

Gerekli İçeriği Belirleyin: Hangi sayfaların ve yazıların sitenizin ana değerini oluşturduğunu ve mutlaka taşınması gerektiğini listeleyin.
Medya Dosyalarını Gözden Geçirin: Resimler, videolar ve diğer medya dosyaları genellikle en büyük veri yükünü oluşturur. Gereksiz olanları silin, kalanı için uygun optimizasyon stratejileri düşünün (Gatsby Image ile otomatik optimizasyon).
Yorumları ve Kullanıcı Verilerini Değerlendirin: Eğer sitenizde yoğun yorum trafiği varsa, bunları taşıyıp taşımayacağınıza veya Disqus gibi üçüncü taraf bir yorum sistemine geçip geçmeyeceğinize karar verin. Benzer şekilde, kullanıcı kayıtları gibi veriler için de bir strateji belirlemelisiniz.

Eklenti Bağımlılıkları ve Tema Analizi Nasıl Gerçekleştirilir?

WordPress’in gücü eklentilerinden gelir, ancak aynı zamanda karmaşıklığının da kaynağıdır. Gatsby statik bir yapı olduğu için, birçok WordPress eklentisinin doğrudan bir karşılığı olmayacaktır. Bu nedenle, mevcut eklentilerinizin işlevselliğini analiz etmek kritik öneme sahiptir.

Eklenti Listesi Oluşturun: Sitenizde aktif olan tüm eklentilerin bir listesini çıkarın.
İşlevselliği Anlayın: Her eklentinin sitenize hangi değeri kattığını ve hangi işlevleri yerine getirdiğini belirleyin (örneğin, SEO, formlar, önbellekleme, güvenlik, sosyal medya entegrasyonu).
Alternatif Çözümler Araştırın: Gatsby ekosisteminde veya üçüncü taraf hizmetlerde bu işlevselliklerin nasıl sağlanabileceğini araştırın.
- SEO: Gatsby eklentileri (gatsby-plugin-react-helmet) ve yapılandırmalar.
- Formlar: Netlify Forms, Formspree, Typeform gibi harici hizmetler.
- Yorumlar: Disqus, Commento.
- E-ticaret: Shopify, Snipcart gibi headless e-ticaret çözümleri.
- Görsel Optimizasyonu: Gatsby Image, Cloudinary.
Temanızın Rolü: WordPress temanızın görsel tasarımı Gatsby’de React bileşenleri olarak yeniden oluşturulacaktır. Mevcut temanızın karmaşık veya özel özelliklerini not alın, çünkü bunların Gatsby’ye aktarılması en çok zaman alacak kısımlardan biri olabilir.

URL Yapısı ve SEO Stratejileri Nasıl Korunur?

Var olan SEO değerinizi kaybetmemek için URL yapısını korumak çok önemlidir. Gatsby’ye geçiş yaparken, eski URL’lerinizin yeni yapıda aynı kalmasını sağlamalısınız. Eğer bir değişiklik yapmak zorundaysanız, 301 yönlendirmeleri (redirects) kullanmak hayati önem taşır.

Mevcut URL Yapısını Belirleyin: WordPress’teki kalıcı bağlantı ayarlarınızı kontrol edin.
Gatsby’de Eşleştirin: Gatsby’de sayfa oluştururken, bu URL yapısını taklit etmeye özen gösterin.
301 Yönlendirmeleri Planlayın: Kaçınılmaz URL değişiklikleri için bir 301 yönlendirme planı hazırlayın. Bu, özellikle dağıtım platformunuz (Netlify gibi) aracılığıyla kolayca yapılabilir.

Uzman İpucu: Geçiş sürecini küçük adımlara bölmek, karmaşıklığı azaltır ve olası sorunları erken tespit etmenizi sağlar. Önce sadece blog yazılarını veya temel sayfaları taşımayı deneyin, ardından diğer karmaşık yapıları ele alın. Bir pilot proje, tüm sitenizi riske atmadan geçişin uygulanabilirliğini test etmenin harika bir yoludur.

Bu ön hazırlık aşamasını titizlikle tamamlamak, Gatsby’ye sorunsuz ve etkili bir geçişin temelini atacaktır. Unutmayın, iyi planlanmış bir başlangıç, sürecin geri kalanını büyük ölçüde kolaylaştıracaktır.

WordPress Verilerini Dışa Aktarma: Adım Adım Rehber

Gatsby ile WordPress entegrasyonunun kalbinde, WordPress sitenizdeki içeriği (yazılar, sayfalar, kategoriler, etiketler, medya) Gatsby projenize çekme yeteneği yatar. Bu işlem, genellikle WordPress REST API’si veya GraphQL kullanılarak gerçekleştirilir. Bu bölümde, gatsby-source-wordpress eklentisini kullanarak bu verileri nasıl çekeceğinizi adım adım açıklayacağız.

WordPress API’sinin Yapılandırılması ve `gatsby-source-wordpress` Kurulumu

İlk olarak, WordPress sitenizin REST API’sinin erişilebilir olduğundan emin olmalısınız. Modern WordPress sürümleri (4.7 ve üzeri) varsayılan olarak REST API’si ile gelir. Ancak, bazı güvenlik eklentileri veya özel yapılandırmalar bu API’yi engelleyebilir. Eğer siteniz bir alt dizinde çalışıyorsa veya özel bir permalink yapısı kullanıyorsa, bazı ayarlar gerekebilir.

Gatsby projenizde, WordPress verilerini çekmek için resmi gatsby-source-wordpress eklentisini kullanacağız. Bu eklenti, WordPress GraphQL API’sini (varsayılan olarak eklentiyle birlikte gelir veya WPGatsby eklentisi ile daha gelişmiş bir GraphQL API’si kurulabilir) kullanarak içeriği Gatsby’nin veri katmanına aktarır.

Gatsby projenizin kök dizininde, komut satırını açın ve aşağıdaki komutu çalıştırarak eklentiyi yükleyin:


npm install gatsby-source-wordpress

veya


yarn add gatsby-source-wordpress

`gatsby-config.js` Dosyasında Kaynak Eklentisini Yapılandırma Nasıl Yapılır?

Eklentiyi yükledikten sonra, Gatsby projenizin gatsby-config.js dosyasında yapılandırmanız gerekir. Bu dosya, Gatsby'nin web sitenizi nasıl derleyeceğini ve hangi veri kaynaklarını kullanacağını tanımlar. Aşağıdaki gibi bir yapılandırma ekleyin:


module.exports = {
  plugins: [
    {
      resolve: gatsby-source-wordpress,
      options: {
        url:
          process.env.WP_GRAPHQL_URL || http://localhost/wordpress/graphql, // WordPress sitenizin GraphQL uç noktası
        verbose: true,
        schema: {
          timeout: 60000, // Veri çekme için maksimum süre
        },
        develop: {
          nodeUpdateInterval: 300,
          hardCacheMediaFiles: true,
        },
        production: {
          hardCacheMediaFiles: true,
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === development
                ? 50
                : undefined, // Geliştirme ortamında daha az post çekme
          },
        },
      },
    },
    // Diğer eklentileriniz buraya gelecek (örneğin: gatsby-plugin-image)
    gatsby-plugin-image,
    gatsby-plugin-sharp,
    {
      resolve: gatsby-source-filesystem,
      options: {
        name: images,
        path: ${__dirname}/src/images,
      },
    },
    gatsby-transformer-sharp,
  ],
};

Yukarıdaki kod bloğunda en önemli kısım url alanıdır. Buraya, WordPress sitenizin GraphQL uç noktasını girmelisiniz. Varsayılan olarak, WordPress'in kurulu olduğu dizinde graphql ile biten bir URL olacaktır (örneğin: https://sitenizinadi.com/graphql veya https://sitenizinadi.com/wp/graphql). Eğer WPGatsby eklentisini kullanıyorsanız, bu eklenti size doğru URL'i sağlayacaktır.

process.env.WP_GRAPHQL_URL kullanımı, production ve development ortamlarında farklı URL'ler kullanmanıza olanak tanır. Genellikle, .env dosyasında bu URL'yi tanımlamak iyi bir pratiktir.

Verileri GraphQL ile Sorgulama ve Keşfetme

gatsby-source-wordpress eklentisi doğru bir şekilde yapılandırıldıktan sonra, Gatsby geliştirme sunucusunu başlatarak verileri çekebilirsiniz:


gatsby develop

Bu komut çalıştıktan sonra, genellikle http://localhost:8000/__graphql adresinde Gatsby'nin yerleşik GraphQL arayüzüne (GraphiQL) erişebilirsiniz. Burası, WordPress'ten çekilen tüm verileri keşfetmek için harika bir araçtır. GraphiQL arayüzünde, çekilen postları, sayfaları, kategorileri ve medya dosyalarını nasıl sorgulayabileceğinizi göreceksiniz. Örneğin, tüm blog yazılarını çekmek için aşağıdaki gibi bir sorgu kullanabilirsiniz:


query MyPosts {
  allWpPost {
    edges {
      node {
        id
        title
        excerpt
        uri
        slug
        date(formatString: "MMMM DD, YYYY")
        featuredImage {
          node {
            altText
            gatsbyImage(width: 600, height: 400, formats: [AUTO, WEBP, AVIF])
          }
        }
        categories {
          nodes {
            name
            uri
          }
        }
      }
    }
  }
}

Bu sorgu, her bir yazı için ID, başlık, özet, URL, yayın tarihi ve öne çıkan görseli (Gatsby Image API'si ile optimize edilmiş haliyle) ve kategorileri çeker. gatsby-plugin-image ile entegrasyon sayesinde, WordPress'teki resimler otomatik olarak optimize edilecek ve duyarlı hale getirilecektir.

Uzman İpucu: GraphQL sorgularınızı başlangıçta olabildiğince spesifik tutun. Yalnızca ihtiyacınız olan verileri çekmek, derleme sürelerini kısaltır ve performansı artırır. Ayrıca, gatsby-source-wordpress eklentisinin gelişmiş filtreleme ve ilişki kurma özelliklerini keşfetmeyi unutmayın, bu sayede çok daha karmaşık veri yapılarını bile kolayca yönetebilirsiniz.

Bu adımlarla, WordPress içeriğinizi başarıyla Gatsby projenize aktarabilir ve bir sonraki aşama olan temalandırma ve içerik gösterimine hazır hale getirebilirsiniz. Unutmayın, bu işlem büyük siteler için biraz zaman alabilir, ancak sonucunda elde edeceğiniz performans ve güvenlik bu çabaya değecektir.

Gatsby Ortamını Kurma ve Verileri Çekme: Başlangıç Rehberi

WordPress verilerinizi Gatsby'ye aktarmanın ilk adımlarını tamamladıktan sonra, sıra Gatsby projenizi kurmaya ve bu verileri efektif bir şekilde kullanmaya geldi. Bu bölüm, Gatsby projesini sıfırdan oluşturma, gerekli bağımlılıkları yükleme ve WordPress'ten çekilen verileri sitenizde göstermek için nasıl GraphQL sorguları yazacağınızı detaylandıracaktır.

Gatsby CLI ile Yeni Bir Proje Başlatma Nasıl Yapılır?

Gatsby ile çalışmaya başlamak için öncelikle Gatsby CLI'ı (Komut Satırı Arayüzü) küresel olarak yüklemeniz gerekir. Bu araç, yeni Gatsby projeleri oluşturmanızı, geliştirme sunucusu çalıştırmanızı ve derleme işlemleri yapmanızı sağlar.


npm install -g gatsby-cli

veya


yarn global add gatsby-cli

CLI yüklendikten sonra, yeni bir Gatsby projesi oluşturabilirsiniz. Genellikle, başlangıç şablonlarını kullanmak en hızlı yoldur. Örneğin, "hello-world" veya "default-starter" şablonları temel bir yapı sağlar:


gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-default

Bu komut, my-wordpress-gatsby-site adında yeni bir dizin oluşturur ve içine varsayılan Gatsby başlangıç şablonunun dosyalarını kopyalar. Proje oluşturulduktan sonra, yeni dizine gidin:


cd my-wordpress-gatsby-site

`gatsby-config.js` ve `.env` Dosyası Yapılandırması Nasıl Yapılır?

Daha önce bahsettiğimiz gibi, gatsby-config.js dosyası Gatsby projenizin çekirdek yapılandırmasını içerir. WordPress verilerini çekmek için bu dosyayı düzenlememiz gerekecek. Ayrıca, hassas bilgileri (API anahtarları, veritabanı URL'leri gibi) doğrudan kod içinde tutmaktan kaçınmak için .env dosyalarını kullanmak önemlidir.

Projenizin kök dizininde bir .env.development (geliştirme ortamı için) ve .env.production (canlı ortam için) dosyası oluşturun. İçine WordPress GraphQL API URL'nizi ekleyin:


// .env.development
WP_GRAPHQL_URL="http://localhost/wordpress/graphql" 
// veya canlı WordPress sitenizin geliştirme kopyasının adresi

Ardından, gatsby-config.js dosyasını açın ve gatsby-source-wordpress eklentisini yapılandırın:


// gatsby-config.js
require("dotenv").config({
  path: .env.${process.env.NODE_ENV},
});

module.exports = {
  siteMetadata: {
    title: WordPress'ten Gatsby'ye Geçiş,
    description: WordPress içeriğiyle güçlendirilmiş hızlı ve güvenli bir Gatsby sitesi.,
    author: @yourusername,
  },
  plugins: [
    gatsby-plugin-react-helmet,
    {
      resolve: gatsby-source-filesystem,
      options: {
        name: images,
        path: ${__dirname}/src/images,
      },
    },
    gatsby-transformer-sharp,
    gatsby-plugin-sharp,
    {
      resolve: gatsby-source-wordpress,
      options: {
        url: process.env.WP_GRAPHQL_URL, // .env dosyasından çekilen URL
        // Diğer opsiyonlar...
        develop: {
          hardCacheMediaFiles: true, // Geliştirme sürecinde medya dosyalarını önbelleğe alır
        },
        production: {
          hardCacheMediaFiles: true, // Canlı ortamda medya dosyalarını önbelleğe alır
        },
        schema: {
          timeout: 100000, // Büyük siteler için zaman aşımını artırın
        },
        // ... diğer opsiyonlar
      },
    },
    // ... diğer eklentileriniz
  ],
};

Burada require("dotenv").config() satırı, Gatsby'nin .env dosyalarınızı yüklemesini sağlar. url alanı artık doğrudan .env dosyasından WP_GRAPHQL_URL değişkenini kullanıyor.

Gatsby İçerik Modeli Oluşturma ve GraphQL Sorgularıyla Veri Çekme Nasıl Yapılır?

Gatsby, GraphQL'i bir veri katmanı olarak kullanarak farklı kaynaklardan (bu durumda WordPress) gelen verileri tek bir arayüzde birleştirir. gatsby develop komutunu çalıştırdığınızda ve http://localhost:8000/__graphql adresine gittiğinizde, WordPress'ten gelen verilerinizi allWpPost, allWpPage, allWpCategory vb. gibi tipler altında göreceksiniz. Bu tipleri kullanarak istediğiniz verileri çekebilirsiniz.

Örneğin, tüm blog yazılarını listeleyecek bir ana sayfa (src/pages/index.js) veya blog sayfası oluşturmak için, bir React bileşeni içinde bir GraphQL sorgusu yazabilirsiniz:


// src/pages/blog.js
import React from "react";
import { graphql, Link } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";

const BlogPage = ({ data }) => {
  const posts = data.allWpPost.nodes;

  return (
    
      Blog Yazıları
      
        {posts.map(post => {
          const image = getImage(post.featuredImage?.node?.gatsbyImage);
          return (
            
              
                {image && (
                  
                )}
                {post.title}
                
                {post.date} — {post.categories.nodes.map(cat => cat.name).join(", ")}
              
            
          );
        })}
      
    
  );
};

export const query = graphqlquery BlogPosts {
    allWpPost(sort: { fields: date, order: DESC }) {
      nodes {
        id
        title
        excerpt
        uri
        date(formatString: "DD MMMM YYYY")
        categories {
          nodes {
            name
          }
        }
        featuredImage {
          node {
            altText
            gatsbyImage(width: 300, height: 200, formats: [AUTO, WEBP, AVIF])
          }
        }
      }
    }
  };

export default BlogPage;

Bu örnekte, graphql etiketi içindeki sorgu, tüm WordPress gönderilerini tarihe göre azalan sırada çeker. data prop'u aracılığıyla bileşene iletilen bu veriler, map döngüsüyle listelenir. GatsbyImage bileşeni, resimlerin otomatik olarak optimize edilmesini ve duyarlı olmasını sağlar. dangerouslySetInnerHTML kullanımı, WordPress'ten gelen HTML içeriğini güvenli bir şekilde görüntülemek içindir, ancak bu özelliği dikkatli kullanmak gerekir.

Uzman İpucu: GraphQL sorgularınızda gatsby-plugin-image ile gelen gatsbyImage alanını kullanarak, WordPress'ten çektiğiniz tüm medya dosyalarını otomatik olarak optimize edin. Bu, sitenizin yükleme hızını dramatik şekilde artıracaktır. width, height, formats gibi parametrelerle resimlerin nasıl işleneceğini kontrol edebilirsiniz.

Bu adımlarla, Gatsby projenizi başarıyla kurdunuz, WordPress verilerinizi çektiniz ve bunları web sitenizde göstermek için temel yapı taşlarını oluşturdunuz. Artık sıra, bu verileri kullanarak tam teşekküllü sayfalar ve tasarımlar oluşturmaya geldi.

Temalandırma ve İçerik Gösterimi: React Bileşenleriyle Dinamik Sayfalar Oluşturma

WordPress'ten Gatsby'ye geçişin en heyecan verici ve yaratıcı kısımlarından biri, içeriğinizi modern React bileşenleri ile yeniden tasarlamak ve dinamik olarak göstermektir. WordPress, içeriği doğrudan HTML çıktısı olarak sunarken, Gatsby bu içeriği saf veri olarak çeker ve size React kullanarak istediğiniz gibi görselleştirme özgürlüğü tanır. Bu bölümde, React bileşenlerini kullanarak blog yazılarınızı, sayfalarınızı ve diğer içerik türlerini nasıl dinamik olarak oluşturacağınızı inceleyeceğiz.

React Bileşenleriyle İçerik Şablonları Oluşturma Nasıl Yapılır?

Gatsby'de, her içerik türü için (örneğin blog yazısı, sayfa, kategori) ayrı bir React bileşeni şablonu oluşturabilirsiniz. Bu şablonlar, o içeriğin nasıl görüneceğini tanımlar.

Örnek olarak, tek bir blog yazısını göstermek için src/templates/Post.js adında bir dosya oluşturalım:


// src/templates/Post.js
import React from "react";
import { graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import Layout from "../components/layout"; // Genel sayfa düzenini sağlayan bir bileşen

const PostTemplate = ({ data }) => {
  const post = data.wpPost;
  const featuredImage = getImage(post.featuredImage?.node?.gatsbyImage);

  return (
    
      
        {post.title}
        Yayınlanma Tarihi: {post.date}
        {featuredImage && (
          
        )}
        
      
    
  );
};

export const query = graphqlquery ($id: String!) { // Dinamik olarak içeriğin ID'si gelecek
    wpPost(id: { eq: $id }) {
      title
      content
      date(formatString: "DD MMMM YYYY")
      featuredImage {
        node {
          altText
          gatsbyImage(width: 900, formats: [AUTO, WEBP, AVIF])
        }
      }
    }
  };

export default PostTemplate;

Bu şablon, id parametresi aracılığıyla belirli bir WordPress yazısını sorgular ve başlığını, içeriğini, tarihini ve öne çıkan görselini gösterir. Layout bileşeni, sitenizin üstbilgi, altbilgi ve navigasyon gibi tekrar eden kısımlarını içerebilir.

`gatsby-node.js` ile Dinamik Sayfalar Oluşturma Nasıl Yapılır?

Gatsby'nin en güçlü özelliklerinden biri, gatsby-node.js dosyasını kullanarak programatik olarak sayfalar oluşturabilmesidir. Bu dosya, Gatsby'nin derleme (build) sürecinde çalışır ve GraphQL sorgularından gelen verileri kullanarak dinamik sayfalar oluşturmanıza olanak tanır.

Projenizin kök dizininde gatsby-node.js dosyasını oluşturun (veya mevcutsa düzenleyin) ve aşağıdaki kodu ekleyin:


// gatsby-node.js
const path = require(path);

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // Tüm WordPress yazılarını sorgula
  const resultPosts = await graphql(query {
      allWpPost {
        nodes {
          uri
          id
        }
      }
    });

  if (resultPosts.errors) {
    throw resultPosts.errors;
  }

  const posts = resultPosts.data.allWpPost.nodes;
  const postTemplate = path.resolve(./src/templates/Post.js);

  // Her yazı için dinamik sayfa oluştur
  posts.forEach(post => {
    createPage({
      path: post.uri, // WordPress'ten gelen URI'yi yol olarak kullan
      component: postTemplate,
      context: {
        id: post.id, // Şablona aktarılacak ID, GraphQL sorgusunda kullanılacak
      },
    });
  });

  // Tüm WordPress sayfalarını sorgula (isteğe bağlı)
  const resultPages = await graphql(query {
      allWpPage {
        nodes {
          uri
          id
        }
      }
    });

  if (resultPages.errors) {
    throw resultPages.errors;
  }

  const pages = resultPages.data.allWpPage.nodes;
  const pageTemplate = path.resolve(./src/templates/Page.js); // Page.js şablonunuzu oluşturun

  // Her sayfa için dinamik sayfa oluştur
  pages.forEach(page => {
    createPage({
      path: page.uri,
      component: pageTemplate,
      context: {
        id: page.id,
      },
    });
  });
};

Bu kod:

Tüm WordPress yazılarını (allWpPost) GraphQL ile sorgular.
Her bir yazı için, createPage fonksiyonunu kullanarak bir sayfa oluşturur.
Sayfanın yolu (path) olarak WordPress'ten gelen uri'yi kullanırız. Bu, URL yapınızı korumanıza yardımcı olur.
component olarak src/templates/Post.js şablonunu atar.
context objesi aracılığıyla yazının id'sini şablona iletir. Bu ID, şablondaki GraphQL sorgusunda kullanılarak doğru yazının verileri çekilir.
Aynı işlemi sayfalar (allWpPage) için de tekrar eder.

Bu işlemi yaptıktan sonra, gatsby develop komutunu yeniden çalıştırdığınızda, WordPress'teki tüm yazılarınızın ve sayfalarınızın artık Gatsby sitenizde erişilebilir olduğunu göreceksiniz.

Medya Dosyaları ve Duyarlı Tasarım İçin Entegrasyonlar

Gatsby, medya dosyalarını optimize etme konusunda üstün yeteneklere sahiptir. gatsby-plugin-image ve gatsby-transformer-sharp eklentileri sayesinde, WordPress'ten gelen resimleriniz otomatik olarak farklı boyutlarda ve formatlarda (WebP, AVIF) oluşturulur, lazy-load edilir ve duyarlı hale getirilir. Bu, mobil cihazlarda da harika bir kullanıcı deneyimi sunar.

CSS için, Gatsby ile birlikte CSS Modülleri, Styled Components veya Tailwind CSS gibi farklı yaklaşımları kullanabilirsiniz. Duyarlı tasarım için standart CSS media query'leri veya bu kütüphanelerin sunduğu araçları kullanabilirsiniz.


/* src/styles/global.css veya bir bileşen CSS modülü */
.post-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
}

@media (max-width: 768px) {
  .post-container {
    padding: 0.5rem;
  }
  h1 {
    font-size: 1.8rem;
  }
}

Bu basit bir media query örneğidir. Gatsby ile React'in esnekliği, sitenizi her türlü ekranda harika görünmesini sağlayacak şekilde tasarlamanıza olanak tanır.

Uzman İpucu: İçeriğinizdeki dahili linklerin (internal links) doğru çalışması için, WordPress'ten gelen HTML içeriğini işlerken bir dönüştürücü (örneğin remark-rehype veya özel bir rehype eklentisi) kullanmayı düşünebilirsiniz. Bu, dahili linklerin Gatsby'nin bileşenine dönüştürülmesini sağlayarak istemci tarafı navigasyonunu etkinleştirir. Aksi takdirde, her dahili linke tıklandığında sayfa yeniden yüklenir.

Bu adımlarla, WordPress içeriğinizle güçlendirilmiş, duyarlı ve görsel olarak çekici bir Gatsby sitesi oluşturma yolunda önemli bir mesafe kat etmiş oldunuz. Artık sitenizin dağıtıma hazır hale gelmesine bir adım kaldı.

Statik Web Sitesini Dağıtma: Canlıya Geçiş ve Sürekli Entegrasyon (CI/CD)

Gatsby ile geliştirme sürecinizi tamamladınız ve WordPress içeriğinizi başarılı bir şekilde yeni sitenize entegre ettiniz. Şimdi sıra, bu hızlı ve güvenli statik web sitesini dünya ile paylaşmaya geldi. Statik sitelerin dağıtımı, geleneksel dinamik sitelere göre çok daha kolay, hızlı ve ekonomiktir. Bu bölümde, Gatsby sitenizi canlıya almak için en popüler platformları ve sürekli entegrasyon (CI/CD) süreçlerini inceleyeceğiz.

Gatsby Sitenizi Dağıtım Platformlarına Yükleme Nasıl Yapılır?

Statik siteler, Nginx veya Apache gibi geleneksel web sunucularında barındırılabileceği gibi, özel olarak statik site barındırma için optimize edilmiş platformlarda da dağıtılabilir. Bu platformlar genellikle küresel CDN'ler (Content Delivery Networks) kullanarak içeriğinizi son kullanıcılara en hızlı şekilde ulaştırır.

Netlify ile Kolay Dağıtım

Netlify, statik siteler için en popüler ve kullanımı kolay dağıtım platformlarından biridir. GitHub, GitLab veya Bitbucket depolarınızla doğrudan entegre olarak, her kod değişikliğinizde otomatik olarak sitenizi derler ve dağıtır.

Depo Oluşturma: Gatsby projenizi bir Git deposuna (GitHub, GitLab vb.) yükleyin.
Netlify'a Bağlanma: Netlify hesabınıza giriş yapın, "Add new site" (Yeni site ekle) seçeneğini tıklayın ve Git sağlayıcınızı seçerek deponuza bağlanın.
Ayarları Yapılandırma: Netlify, Gatsby projenizi otomatik olarak tanır, ancak manuel olarak bazı ayarları doğrulamanız gerekebilir:
- Build Command (Derleme Komutu): gatsby build
- Publish directory (Yayınlama Dizini): public/
Ortam Değişkenleri: WordPress GraphQL URL'niz gibi .env.production dosyasında tanımladığınız ortam değişkenlerini Netlify arayüzünde "Build & deploy" (Derle ve dağıt) ayarları altındaki "Environment variables" (Ortam değişkenleri) kısmına ekleyin.
Dağıtımı Başlatma: Tüm ayarlar tamamlandıktan sonra, Netlify sitenizi derlemeye ve dağıtmaya başlar. İlk derleme tamamlandığında, siteniz canlıda olacaktır!

Vercel ile Dağıtım

Vercel, Netlify'a benzer şekilde, statik siteler ve sunucusuz fonksiyonlar için optimize edilmiş başka bir popüler dağıtım platformudur. React ve Next.js projeleri için özellikle tercih edilir, ancak Gatsby ile de mükemmel uyum sağlar.

Depo Oluşturma: Projenizi bir Git deposuna yükleyin.
Vercel'e Bağlanma: Vercel hesabınıza giriş yapın, "Import Project" (Proje İçe Aktar) seçeneğini tıklayın ve Git sağlayıcınızı seçerek deponuza bağlanın.
Ayarları Yapılandırma: Vercel genellikle Gatsby projelerini otomatik olarak algılar.
- Build Command: gatsby build
- Output Directory: public/
Ortam Değişkenleri: Ortam değişkenlerinizi Vercel proje ayarlarınızdaki "Environment Variables" bölümüne ekleyin.
Dağıtım: Vercel, deponuzdaki her değişikliği algılar ve otomatik olarak bir dağıtım yapar.

Sürekli Entegrasyon ve Sürekli Dağıtım (CI/CD) Süreçlerinin Otomasyonu

CI/CD, kod değişikliklerinin otomatik olarak test edilmesini, derlenmesini ve dağıtılmasını sağlayan bir yazılım geliştirme metodolojisidir. Gatsby projelerinde CI/CD kurmak, içerik güncellemelerinizin (WordPress'ten gelenler dahil) hızlı ve hatasız bir şekilde canlıya yansımasını sağlar.

Netlify ve Vercel gibi platformlar, Git tabanlı CI/CD'yi varsayılan olarak sunar. Yani, kod deponuza (örneğin main dalına) bir değişiklik ittiğinizde, otomatik olarak yeni bir derleme ve dağıtım tetiklenir. Ancak, WordPress içeriğinizde bir değişiklik yaptığınızda Gatsby sitenizin yeniden derlenmesini sağlamak için ek adımlar gerekebilir.

Webhook'lar ile Otomatik Yeniden Derleme

WordPress içeriğiniz güncellendiğinde Gatsby sitenizin otomatik olarak yeniden derlenmesini sağlamanın en yaygın yolu, Webhook kullanmaktır. Webhook, belirli bir olay (örneğin bir yazı yayınlandığında veya güncellendiğinde) gerçekleştiğinde bir URL'e HTTP POST isteği gönderen bir mekanizmadır.

Netlify/Vercel Build Hook Oluşturma: Dağıtım platformunuzda (Netlify veya Vercel) projenizin ayarlarında bir "Build Hook" (Derleme Kancası) oluşturun. Bu size benzersiz bir URL verecektir.
WordPress'te Webhook Eklentisi Kullanma: WordPress sitenize "WP Webhooks" veya benzeri bir eklenti yükleyin.
Webhook'u Yapılandırma: Bu eklenti aracılığıyla, Netlify/Vercel'den aldığınız Build Hook URL'sini girin. Olay tetikleyicisi olarak "Post Published" (Yazı Yayınlandı) veya "Post Updated" (Yazı Güncellendi) gibi seçenekleri belirleyin.

Bu yapılandırma sayesinde, WordPress'te herhangi bir içerik değişikliği yaptığınızda, WordPress otomatik olarak Build Hook URL'sine bir istek gönderir, bu da Gatsby sitenizin yeni içerikle yeniden derlenmesini ve dağıtılmasını tetikler. Böylece, WordPress'i bir headless CMS olarak kullanmanın tüm avantajlarından faydalanırsınız.

Uzman İpucu: Dağıtım platformlarının sunduğu "Preview Deploys" (Önizleme Dağıtımları) özelliğini kullanarak, her çekme isteği (Pull Request) için ayrı bir önizleme URL'si oluşturun. Bu sayede, kod değişikliklerini canlıya almadan önce test edebilir ve onaylayabilirsiniz. Bu, hataları minimuma indirerek "akıl sağlığınızı" korumanıza yardımcı olur. Ayrıca, özel alan adınızı platforma bağlamayı ve SSL sertifikasını (genellikle ücretsiz olarak sunulur) etkinleştirmeyi unutmayın.

Bu adımlarla, Gatsby sitenizi güvenilir bir şekilde canlıya alabilir ve WordPress'ten gelen içerik güncellemelerini otomatik olarak sitenize yansıtabilirsiniz. Bu, size hem hız hem de bakım kolaylığı sağlayacaktır.

İleri Seviye Optimizasyonlar ve Deneyimli Kullanıcılar İçin İpuçları

WordPress'ten Gatsby'ye başarılı bir geçiş yaptınız ve siteniz artık hızlı, güvenli ve modern. Ancak Gatsby'nin potansiyelini tam olarak kullanmak ve sitenizi bir sonraki seviyeye taşımak için bazı ileri düzey optimizasyonlar ve teknikler mevcuttur. Bu bölüm, sitenizin performansını, SEO'sunu ve geliştirici deneyimini daha da artıracak ipuçlarını sunmaktadır.

Gatsby Image ile Resim Optimizasyonu ve Lazy Loading

Gatsby Image, Gatsby'nin en güçlü eklentilerinden biridir ve web sitelerinin en büyük performans darboğazlarından biri olan görselleri otomatik olarak optimize eder. WordPress'ten gelen görselleri bile etkili bir şekilde yönetir.

Otomatik Boyutlandırma ve Format Dönüşümü: Gatsby Image, görsellerinizi farklı boyutlarda (responsive için) ve modern formatlarda (WebP, AVIF) oluşturur. Bu, tarayıcının desteklediği en uygun formatı kullanmasını sağlayarak dosya boyutunu küçültür.
Lazy Loading: Görseller, kullanıcı ekranına yaklaşana kadar yüklenmez. Bu, başlangıç yükleme süresini dramatik şekilde azaltır.
Placeholderler: Görsel yüklenirken düşük çözünürlüklü bir placeholder veya bulanık bir efekti göstererek kullanıcı deneyimini iyileştirir.

gatsby-config.js dosyanızda gatsby-plugin-image, gatsby-plugin-sharp ve gatsby-transformer-sharp eklentilerinin kurulu ve yapılandırılmış olduğundan emin olun. Daha sonra, React bileşenlerinizde etiketi yerine bileşenini kullanın ve GraphQL sorgularınızda gatsbyImage alanını talep edin.


// GraphQL sorgusunda gatsbyImage kullanımı
featuredImage {
  node {
    altText
    gatsbyImage(
      width: 800, 
      placeholder: BLURRED, 
      formats: [AUTO, WEBP, AVIF]
    )
  }
}

Gatsby SEO Optimizasyonları ve Schema Markup Entegrasyonu

Gatsby, doğası gereği hızlı olduğu için SEO dostudur. Ancak ek optimizasyonlarla arama motoru sıralamalarınızı daha da iyileştirebilirsiniz.

React Helmet: Sayfa başlıkları, meta açıklamaları ve diğer head etiketlerini dinamik olarak yönetmek için gatsby-plugin-react-helmet kullanın.
Sitemap ve Robots.txt: gatsby-plugin-sitemap ile otomatik bir sitemap oluşturun ve robots.txt dosyanızı doğru şekilde yapılandırın.
Schema Markup: Makale, ürün veya diğer içerik türleri için Schema.org işaretlemesi ekleyerek arama motorlarına içeriğiniz hakkında daha fazla bilgi verin. Bu, zengin sonuçlar (rich snippets) elde etmenize yardımcı olabilir.

Headless CMS Seçenekleri ve WordPress'in Ötesi

WordPress'i bir headless CMS olarak kullanmak harika bir başlangıç noktasıdır. Ancak Gatsby, Contentful, Sanity.io, Strapi veya DatoCMS gibi diğer headless CMS çözümleriyle de sorunsuz entegre olabilir. Bu platformlar genellikle daha modern API'ler ve geliştirici dostu özellikler sunar.

Esneklik: İçeriği istediğiniz herhangi bir veri formatında (JSON, Markdown) depolayabilir ve Gatsby ile çekebilirsiniz.
Geliştirici Deneyimi: Genellikle daha iyi API dokümantasyonu ve SDK'lar sunarlar.
Ölçeklenebilirlik: İçerik sunumu için ayrı bir veritabanı veya sunucu altyapısına ihtiyaç duymazlar.

Eğer ileride WordPress'ten tamamen ayrılmayı düşünüyorsanız, bu headless CMS seçeneklerini değerlendirmek, içerik yönetimi deneyiminizi daha da geliştirebilir.

Uygulamalı Vaka Analizi: Büyük Bir Blogun Dönüşümü

Hayali bir senaryoda, "Kodlama Durağı" adında, on binlerce blog yazısı ve yüz binlerce aylık ziyaretçisi olan büyük bir teknoloji blogunun WordPress'ten Gatsby'ye geçiş sürecini ele alalım.

Sorun: Blog, yavaş yükleme süreleri (ortalama 5-7 saniye), sık sık sunucu çöküşleri ve güvenlik açıkları nedeniyle SEO sıralamalarında düşüş yaşıyor ve kullanıcılarını kaybediyordu. Barındırma maliyetleri yüksekti.
Çözüm: Gatsby'ye geçiş kararı alındı.
- İçerik Aktarımı: gatsby-source-wordpress kullanarak tüm yazılar, kategoriler, etiketler ve medya dosyaları çekildi.
- Optimizasyon: Gatsby Image ile tüm görseller otomatik olarak optimize edildi, WebP formatına dönüştürüldü ve lazy-load edildi. Bu, sayfa boyutunu %60 azalttı.
- Yeniden Tasarım: Modern bir React tabanlı tema sıfırdan oluşturuldu, bu da daha iyi bir mobil deneyim ve erişilebilirlik sağladı.
- Dağıtım: Site Netlify üzerinde barındırıldı. WordPress'teki içerik güncellemeleri için Netlify Build Hooks kullanılarak otomatik dağıtım sağlandı.
- Yorumlar: WordPress yorum sistemi yerine Disqus entegrasyonuna gidildi.
Sonuç:
- Hız: Ortalama yükleme süresi 500 ms'nin altına düştü.
- Güvenlik: Dinamik veritabanı saldırılarına karşı tam koruma sağlandı.
- SEO: Hız artışı ve geliştirilmiş mobil deneyim sayesinde arama motoru sıralamalarında %25 artış görüldü.
- Maliyet: Sunucu maliyetleri %80 oranında düştü.
- Kullanıcı Deneyimi: Kullanıcılar, hızlı ve akıcı site deneyiminden memnun kaldı, hemen çıkma oranları düştü.

Bu vaka analizi, Gatsby'ye geçişin sadece teorik bir fayda sağlamadığını, aynı zamanda somut iş sonuçları ve önemli teknik iyileştirmeler getirdiğini göstermektedir.

Uzman İpucu: Sitenizin performansını izlemek için Google Lighthouse, WebPageTest ve Google Search Console gibi araçları düzenli olarak kullanın. Bu araçlardan gelen veriler, sürekli iyileştirmeler yapmanıza ve sitenizin en üst düzeyde çalışmasını sağlamanıza yardımcı olacaktır.

Bu ileri düzey ipuçları ve vaka analizi, Gatsby ile neler başarabileceğinizi ve statik web sitenizin performansını nasıl sürekli olarak optimize edebileceğinizi ortaya koymaktadır. WordPress'ten Gatsby'ye geçiş, sadece bir teknoloji değişikliği değil, aynı zamanda daha hızlı, daha güvenli ve daha esnek bir web geleceğine yapılan bir yatırımdır.

Sonuç ve Sıkça Sorulan Sorular

WordPress'ten Gatsby'ye geçiş süreci, ilk bakışta karmaşık görünse de, doğru adımları izlediğinizde ve gerekli ön hazırlıkları yaptığınızda "akıl sağlığınızı kaybetmeden" başarıyla tamamlanabilir. Bu rehberde, neden bu değişimin önemli olduğunu, geçiş öncesi nasıl bir planlama yapmanız gerektiğini, WordPress verilerinizi nasıl çekeceğinizi, Gatsby projenizi nasıl kuracağınızı, içeriğinizi nasıl temalandıracağınızı ve son olarak sitenizi nasıl canlıya alacağınızı detaylı bir şekilde ele aldık. Gatsby'nin sunduğu hız, güvenlik ve geliştirici deneyimi, modern web dünyasında rekabetçi kalmak için vazgeçilmez avantajlardır.

WordPress, içerik yönetiminde hala güçlü bir oyuncu olmaya devam etse de, Gatsby ile birleştiğinde ortaya çıkan headless mimari, her iki dünyanın en iyi yönlerini bir araya getirerek, sadece hızlı değil, aynı zamanda bakımı kolay ve geleceğe hazır web siteleri oluşturmanızı sağlar. Bu dönüşüm, sitenizin performansını artırmanın yanı sıra, daha esnek bir geliştirme ortamı ve daha iyi bir kullanıcı deneyimi sunarak uzun vadede yatırımınızın karşılığını fazlasıyla verecektir.

Sıkça Sorulan Sorular (SSS)

İşte WordPress'ten Gatsby'ye geçişle ilgili en sık karşılaşılan sorulardan bazıları:

S: WordPress'ten Gatsby'ye geçiş ne kadar sürer?
C: Bu, sitenizin karmaşıklığına, içerik miktarına ve geliştirme ekibinizin deneyimine bağlıdır. Küçük bir blog sitesi birkaç gün veya hafta içinde tamamlanabilirken, çok sayıda özel gönderi türü, karmaşık eklenti bağımlılıkları veya yoğun bir içerik barındıran büyük siteler birkaç ay sürebilir. Önceden iyi bir planlama yapmak süreyi kısaltacaktır.
S: Geçiş yaparken SEO sıralamalarımı kaybetme riskim var mı?
C: Doğru adımları izlediğinizde (URL yapısını korumak, 301 yönlendirmeleri yapmak, meta etiketlerini doğru yapılandırmak, sitemap ve robots.txt kullanmak) SEO sıralamalarınızı kaybetme riski minimumdur. Hatta Gatsby'nin doğal hız avantajı sayesinde SEO performansınızda artış bile görebilirsiniz.
S: WordPress'teki tüm eklentilerimin Gatsby'de bir karşılığı olacak mı?
C: Hayır. Gatsby statik bir yapıya sahip olduğu için, WordPress'in dinamik eklentilerinin çoğu (örneğin önbellekleme, güvenlik duvarı, dinamik form işleme) doğrudan bir karşılığa sahip olmayacaktır. Bu işlevselliklerin çoğu ya Gatsby eklentileriyle (örneğin SEO için) ya da üçüncü taraf headless hizmetleriyle (örneğin formlar, yorumlar için Disqus) sağlanır. Bu nedenle, eklenti analizi yapmak kritik öneme sahiptir.
S: WordPress'i bir headless CMS olarak kullanmak ne anlama geliyor?
C: Headless CMS, içeriği bir API aracılığıyla sunan bir içerik yönetim sistemidir ve sunum katmanından (front-end) ayrılmıştır. WordPress'i headless olarak kullanırken, WordPress sadece içeriği depolayan ve yöneten bir arka uç (backend) görevi görürken, Gatsby içeriği bu API üzerinden çeker ve front-end'i (kullanıcıların gördüğü siteyi) oluşturur. Bu, içeriğinizi farklı platformlarda (web, mobil uygulama vb.) daha esnek bir şekilde kullanmanıza olanak tanır.
S: Gatsby projemde WordPress'teki gibi bir yönetici paneli olacak mı?
C: Hayır. Gatsby projeniz sadece ön yüzü (front-end) oluşturur ve statik dosyalardan oluşur. Yönetici paneli olarak hala WordPress'i kullanacaksınız. İçerik oluşturma ve düzenleme işlemleri WordPress yönetici panelinde gerçekleşmeye devam edecek, Gatsby ise bu güncel içeriği çekip sitenizi yeniden derleyecektir.

WordPress’ten Gatsby’ye Geçiş: Akıl Sağlığınızı Kaybetmeden Statik Web Sitesi Gücüne Ulaşın