{"id":30474,"date":"2025-09-28T08:01:18","date_gmt":"2025-09-28T05:01:18","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/"},"modified":"2025-09-28T08:01:18","modified_gmt":"2025-09-28T05:01:18","slug":"wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/","title":{"rendered":"WordPress&#8217;ten Gatsby&#8217;ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n"},"content":{"rendered":"<p>Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress&#8217;in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa dayal\u0131 modern web d\u00fcnyas\u0131nda bazen yeterli gelmeyebilir. \u0130\u015fte tam da bu noktada, Gatsby gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu devreye giriyor. Peki, milyonlarca sitenin g\u00fcvendi\u011fi WordPress&#8217;ten modern, h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby altyap\u0131s\u0131na ge\u00e7i\u015f yapmak, \u00f6zellikle de t\u00fcm i\u00e7eriklerinizi kaybetmeden ve en \u00f6nemlisi &#8220;ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden&#8221; nas\u0131l m\u00fcmk\u00fcn olur? Bu kapsaml\u0131 rehberde, bu zorlu ama bir o kadar da \u00f6d\u00fcllendirici s\u00fcreci ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n<p>Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evrim ge\u00e7iriyor ve bu evrimin merkezinde h\u0131z, g\u00fcvenlik ve kullan\u0131c\u0131 deneyimi yer al\u0131yor. WordPress, dinamik yap\u0131s\u0131 ve geni\u015f eklenti ekosistemiyle uzun y\u0131llar boyunca h\u00fck\u00fcm s\u00fcrm\u00fc\u015f olsa da, baz\u0131 durumlarda bu avantajlar dezavantajlara d\u00f6n\u00fc\u015febilir. Yo\u011fun veritaban\u0131 sorgular\u0131, s\u00fcrekli g\u00fcncellenmesi gereken eklentiler ve temalar, olas\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131 ve bar\u0131nd\u0131rma maliyetleri, bir\u00e7ok i\u015fletme ve geli\u015ftirici i\u00e7in ba\u015f a\u011fr\u0131s\u0131 yaratabiliyor.<\/p>\n<p>\u0130\u015fte tam bu noktada, Gatsby gibi modern statik site olu\u015fturucular sahneye \u00e7\u0131k\u0131yor. Gatsby, React tabanl\u0131 bir \u00e7er\u00e7eve olup, web sitelerinizi \u00f6nceden olu\u015fturulmu\u015f (pre-built) statik HTML, CSS ve JavaScript dosyalar\u0131 olarak derler. Bu ne anlama geliyor? Art\u0131k her istekte veritaban\u0131na ba\u011flanma veya sunucu taraf\u0131nda kod \u00e7al\u0131\u015ft\u0131rma ihtiyac\u0131 ortadan kalk\u0131yor. Sonu\u00e7 mu? \u0130nternet \u00fczerindeki en h\u0131zl\u0131 ve en g\u00fcvenli web sitelerinden baz\u0131lar\u0131. Gatsby, i\u00e7erik y\u00f6netimini (CMS) arka planda b\u0131rakarak, yani bir &#8220;headless CMS&#8221; yakla\u015f\u0131m\u0131 benimseyerek, size tam bir esneklik sunar. WordPress&#8217;i bir i\u00e7erik deposu olarak kullan\u0131rken, Gatsby ile bu i\u00e7eri\u011fi al\u0131p, istedi\u011finiz \u015fekilde sunabilirsiniz.<\/p>\n<p>Bu ge\u00e7i\u015fin temel faydalar\u0131n\u0131 \u00f6zetlemek gerekirse:<\/p>\n<ul>\n<li><strong>Y\u00fcksek Performans:<\/strong> Statik dosyalar do\u011frudan CDN&#8217;lerden (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011flar\u0131) sunuldu\u011fu i\u00e7in sayfa y\u00fckleme s\u00fcreleri inan\u0131lmaz derecede d\u00fc\u015fer. Bu, hem kullan\u0131c\u0131 deneyimi hem de SEO s\u0131ralamalar\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/li>\n<li><strong>\u00dcst\u00fcn G\u00fcvenlik:<\/strong> Dinamik bir veritaban\u0131 veya sunucu taraf\u0131 kodlama olmad\u0131\u011f\u0131 i\u00e7in siber sald\u0131r\u0131lara kar\u015f\u0131 \u00e7ok daha diren\u00e7lidir. WordPress&#8217;in s\u00fcrekli yamalanmas\u0131 gereken g\u00fcvenlik a\u00e7\u0131klar\u0131na elveda diyebilirsiniz.<\/li>\n<li><strong>D\u00fc\u015f\u00fck Bak\u0131m Maliyeti:<\/strong> Eklenti \u00e7ak\u0131\u015fmalar\u0131, veritaban\u0131 optimizasyonlar\u0131 veya sunucu yap\u0131land\u0131rmalar\u0131yla u\u011fra\u015fma derdi azal\u0131r. Geli\u015ftiriciler, daha \u00e7ok \u00f6zellik geli\u015ftirmeye odaklanabilir.<\/li>\n<li><strong>Ola\u011fan\u00fcst\u00fc \u00d6l\u00e7eklenebilirlik:<\/strong> Trafik art\u0131\u015flar\u0131 statik siteleri kolayca etkilemez, \u00e7\u00fcnk\u00fc CDN&#8217;ler milyonlarca iste\u011fi ayn\u0131 anda i\u015fleyebilir.<\/li>\n<li><strong>Geli\u015ftirici Deneyimi:<\/strong> React ve GraphQL gibi modern teknolojilerle \u00e7al\u0131\u015fmak, geli\u015ftiriciler i\u00e7in daha keyifli ve verimli bir ortam sunar.<\/li>\n<li><strong>Geli\u015ftirilmi\u015f SEO:<\/strong> H\u0131z ve mobil uyumluluk, arama motorlar\u0131 i\u00e7in \u00f6nemli s\u0131ralama fakt\u00f6rleridir. Gatsby&#8217;nin do\u011fal h\u0131z\u0131, SEO performans\u0131n\u0131za do\u011frudan katk\u0131 sa\u011flar.<\/li>\n<\/ul>\n<p>K\u0131sacas\u0131, WordPress&#8217;ten Gatsby&#8217;ye ge\u00e7i\u015f, web sitenizi gelece\u011fe haz\u0131rlamak, kullan\u0131c\u0131lara daha iyi bir deneyim sunmak ve geli\u015ftiricilerin daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak anlam\u0131na gelir. Bu modern mimari, \u00f6zellikle i\u00e7erik odakl\u0131 web siteleri, bloglar ve e-ticaret siteleri i\u00e7in vazge\u00e7ilmez bir \u00e7\u00f6z\u00fcm haline gelmektedir.<\/p>\n<h2>Ge\u00e7i\u015f \u00d6ncesi Haz\u0131rl\u0131k: Neleri Bilmelisiniz ve Nas\u0131l Plan Yapmal\u0131s\u0131n\u0131z?<\/h2>\n<p>B\u00fcy\u00fck bir platform de\u011fi\u015fikli\u011fi her zaman dikkatli bir planlama gerektirir. WordPress&#8217;ten Gatsby&#8217;ye ge\u00e7i\u015f de bir istisna de\u011fildir. &#8220;Ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden&#8221; bu s\u00fcreci y\u00f6netmek i\u00e7in atman\u0131z gereken ilk ad\u0131mlar, kapsaml\u0131 bir \u00f6n haz\u0131rl\u0131k ve stratejik bir yakla\u015f\u0131md\u0131r. Bu b\u00f6l\u00fcm, ge\u00e7i\u015fe ba\u015flamadan \u00f6nce neleri g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z gerekti\u011fini ve nelere dikkat etmeniz gerekti\u011fini a\u00e7\u0131klayacakt\u0131r.<\/p>\n<h3>\u0130\u00e7erik Denetimi (Content Audit) ve \u00d6nceliklendirme Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>WordPress sitenizdeki t\u00fcm i\u00e7eri\u011fi, yaz\u0131lar\u0131n\u0131z\u0131, sayfalar\u0131n\u0131z\u0131, medya dosyalar\u0131n\u0131z\u0131 ve \u00f6zel g\u00f6nderi t\u00fcrlerini g\u00f6zden ge\u00e7irin. Hangi i\u00e7eri\u011fin ger\u00e7ekten gerekli oldu\u011funu, hangisinin g\u00fcncellenmesi gerekti\u011fini veya hangisinin tamamen kald\u0131r\u0131labilece\u011fini belirleyin. Bu, Gatsby sitenize ta\u015f\u0131nacak veri miktar\u0131n\u0131 azaltacak ve ge\u00e7i\u015f s\u00fcrecini h\u0131zland\u0131racakt\u0131r.<\/p>\n<ul>\n<li><strong>Gerekli \u0130\u00e7eri\u011fi Belirleyin:<\/strong> Hangi sayfalar\u0131n ve yaz\u0131lar\u0131n sitenizin ana de\u011ferini olu\u015fturdu\u011funu ve mutlaka ta\u015f\u0131nmas\u0131 gerekti\u011fini listeleyin.<\/li>\n<li><strong>Medya Dosyalar\u0131n\u0131 G\u00f6zden Ge\u00e7irin:<\/strong> Resimler, videolar ve di\u011fer medya dosyalar\u0131 genellikle en b\u00fcy\u00fck veri y\u00fck\u00fcn\u00fc olu\u015fturur. Gereksiz olanlar\u0131 silin, kalan\u0131 i\u00e7in uygun optimizasyon stratejileri d\u00fc\u015f\u00fcn\u00fcn (Gatsby Image ile otomatik optimizasyon).<\/li>\n<li><strong>Yorumlar\u0131 ve Kullan\u0131c\u0131 Verilerini De\u011ferlendirin:<\/strong> E\u011fer sitenizde yo\u011fun yorum trafi\u011fi varsa, bunlar\u0131 ta\u015f\u0131y\u0131p ta\u015f\u0131mayaca\u011f\u0131n\u0131za veya Disqus gibi \u00fc\u00e7\u00fcnc\u00fc taraf bir yorum sistemine ge\u00e7ip ge\u00e7meyece\u011finize karar verin. Benzer \u015fekilde, kullan\u0131c\u0131 kay\u0131tlar\u0131 gibi veriler i\u00e7in de bir strateji belirlemelisiniz.<\/li>\n<\/ul>\n<h3>Eklenti Ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve Tema Analizi Nas\u0131l Ger\u00e7ekle\u015ftirilir?<\/h3>\n<p>WordPress&#8217;in g\u00fcc\u00fc eklentilerinden gelir, ancak ayn\u0131 zamanda karma\u015f\u0131kl\u0131\u011f\u0131n\u0131n da kayna\u011f\u0131d\u0131r. Gatsby statik bir yap\u0131 oldu\u011fu i\u00e7in, bir\u00e7ok WordPress eklentisinin do\u011frudan bir kar\u015f\u0131l\u0131\u011f\u0131 olmayacakt\u0131r. Bu nedenle, mevcut eklentilerinizin i\u015flevselli\u011fini analiz etmek kritik \u00f6neme sahiptir.<\/p>\n<ul>\n<li><strong>Eklenti Listesi Olu\u015fturun:<\/strong> Sitenizde aktif olan t\u00fcm eklentilerin bir listesini \u00e7\u0131kar\u0131n.<\/li>\n<li><strong>\u0130\u015flevselli\u011fi Anlay\u0131n:<\/strong> Her eklentinin sitenize hangi de\u011feri katt\u0131\u011f\u0131n\u0131 ve hangi i\u015flevleri yerine getirdi\u011fini belirleyin (\u00f6rne\u011fin, SEO, formlar, \u00f6nbellekleme, g\u00fcvenlik, sosyal medya entegrasyonu).<\/li>\n<li><strong>Alternatif \u00c7\u00f6z\u00fcmler Ara\u015ft\u0131r\u0131n:<\/strong> Gatsby ekosisteminde veya \u00fc\u00e7\u00fcnc\u00fc taraf hizmetlerde bu i\u015flevselliklerin nas\u0131l sa\u011flanabilece\u011fini ara\u015ft\u0131r\u0131n.\n<ul>\n<li><strong>SEO:<\/strong> Gatsby eklentileri (<code>gatsby-plugin-react-helmet<\/code>) ve yap\u0131land\u0131rmalar.<\/li>\n<li><strong>Formlar:<\/strong> Netlify Forms, Formspree, Typeform gibi harici hizmetler.<\/li>\n<li><strong>Yorumlar:<\/strong> Disqus, Commento.<\/li>\n<li><strong>E-ticaret:<\/strong> Shopify, Snipcart gibi headless e-ticaret \u00e7\u00f6z\u00fcmleri.<\/li>\n<li><strong>G\u00f6rsel Optimizasyonu:<\/strong> Gatsby Image, Cloudinary.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Teman\u0131z\u0131n Rol\u00fc:<\/strong> WordPress teman\u0131z\u0131n g\u00f6rsel tasar\u0131m\u0131 Gatsby&#8217;de React bile\u015fenleri olarak yeniden olu\u015fturulacakt\u0131r. Mevcut teman\u0131z\u0131n karma\u015f\u0131k veya \u00f6zel \u00f6zelliklerini not al\u0131n, \u00e7\u00fcnk\u00fc bunlar\u0131n Gatsby&#8217;ye aktar\u0131lmas\u0131 en \u00e7ok zaman alacak k\u0131s\u0131mlardan biri olabilir.<\/li>\n<\/ul>\n<h3>URL Yap\u0131s\u0131 ve SEO Stratejileri Nas\u0131l Korunur?<\/h3>\n<p>Var olan SEO de\u011ferinizi kaybetmemek i\u00e7in URL yap\u0131s\u0131n\u0131 korumak \u00e7ok \u00f6nemlidir. Gatsby&#8217;ye ge\u00e7i\u015f yaparken, eski URL&#8217;lerinizin yeni yap\u0131da ayn\u0131 kalmas\u0131n\u0131 sa\u011flamal\u0131s\u0131n\u0131z. E\u011fer bir de\u011fi\u015fiklik yapmak zorundaysan\u0131z, 301 y\u00f6nlendirmeleri (redirects) kullanmak hayati \u00f6nem ta\u015f\u0131r.<\/p>\n<ul>\n<li><strong>Mevcut URL Yap\u0131s\u0131n\u0131 Belirleyin:<\/strong> WordPress&#8217;teki kal\u0131c\u0131 ba\u011flant\u0131 ayarlar\u0131n\u0131z\u0131 kontrol edin.<\/li>\n<li><strong>Gatsby&#8217;de E\u015fle\u015ftirin:<\/strong> Gatsby&#8217;de sayfa olu\u015ftururken, bu URL yap\u0131s\u0131n\u0131 taklit etmeye \u00f6zen g\u00f6sterin.<\/li>\n<li><strong>301 Y\u00f6nlendirmeleri Planlay\u0131n:<\/strong> Ka\u00e7\u0131n\u0131lmaz URL de\u011fi\u015fiklikleri i\u00e7in bir 301 y\u00f6nlendirme plan\u0131 haz\u0131rlay\u0131n. Bu, \u00f6zellikle da\u011f\u0131t\u0131m platformunuz (Netlify gibi) arac\u0131l\u0131\u011f\u0131yla kolayca yap\u0131labilir.<\/li>\n<\/ul>\n<blockquote><p>\n  Uzman \u0130pucu: Ge\u00e7i\u015f s\u00fcrecini k\u00fc\u00e7\u00fck ad\u0131mlara b\u00f6lmek, karma\u015f\u0131kl\u0131\u011f\u0131 azalt\u0131r ve olas\u0131 sorunlar\u0131 erken tespit etmenizi sa\u011flar. \u00d6nce sadece blog yaz\u0131lar\u0131n\u0131 veya temel sayfalar\u0131 ta\u015f\u0131may\u0131 deneyin, ard\u0131ndan di\u011fer karma\u015f\u0131k yap\u0131lar\u0131 ele al\u0131n. Bir pilot proje, t\u00fcm sitenizi riske atmadan ge\u00e7i\u015fin uygulanabilirli\u011fini test etmenin harika bir yoludur.\n<\/p><\/blockquote>\n<p>Bu \u00f6n haz\u0131rl\u0131k a\u015famas\u0131n\u0131 titizlikle tamamlamak, Gatsby&#8217;ye sorunsuz ve etkili bir ge\u00e7i\u015fin temelini atacakt\u0131r. Unutmay\u0131n, iyi planlanm\u0131\u015f bir ba\u015flang\u0131\u00e7, s\u00fcrecin geri kalan\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131racakt\u0131r.<\/p>\n<h2>WordPress Verilerini D\u0131\u015fa Aktarma: Ad\u0131m Ad\u0131m Rehber<\/h2>\n<p>Gatsby ile WordPress entegrasyonunun kalbinde, WordPress sitenizdeki i\u00e7eri\u011fi (yaz\u0131lar, sayfalar, kategoriler, etiketler, medya) Gatsby projenize \u00e7ekme yetene\u011fi yatar. Bu i\u015flem, genellikle WordPress REST API&#8217;si veya GraphQL kullan\u0131larak ger\u00e7ekle\u015ftirilir. Bu b\u00f6l\u00fcmde, <code>gatsby-source-wordpress<\/code> eklentisini kullanarak bu verileri nas\u0131l \u00e7ekece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n<h3>WordPress API&#8217;sinin Yap\u0131land\u0131r\u0131lmas\u0131 ve <code>gatsby-source-wordpress<\/code> Kurulumu<\/h3>\n<p>\u0130lk olarak, WordPress sitenizin REST API&#8217;sinin eri\u015filebilir oldu\u011fundan emin olmal\u0131s\u0131n\u0131z. Modern WordPress s\u00fcr\u00fcmleri (4.7 ve \u00fczeri) varsay\u0131lan olarak REST API&#8217;si ile gelir. Ancak, baz\u0131 g\u00fcvenlik eklentileri veya \u00f6zel yap\u0131land\u0131rmalar bu API&#8217;yi engelleyebilir. E\u011fer siteniz bir alt dizinde \u00e7al\u0131\u015f\u0131yorsa veya \u00f6zel bir permalink yap\u0131s\u0131 kullan\u0131yorsa, baz\u0131 ayarlar gerekebilir.<\/p>\n<p>Gatsby projenizde, WordPress verilerini \u00e7ekmek i\u00e7in resmi <code>gatsby-source-wordpress<\/code> eklentisini kullanaca\u011f\u0131z. Bu eklenti, WordPress GraphQL API&#8217;sini (varsay\u0131lan olarak eklentiyle birlikte gelir veya WPGatsby eklentisi ile daha geli\u015fmi\u015f bir GraphQL API&#8217;si kurulabilir) kullanarak i\u00e7eri\u011fi Gatsby&#8217;nin veri katman\u0131na aktar\u0131r.<\/p>\n<p>Gatsby projenizin k\u00f6k dizininde, komut sat\u0131r\u0131n\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak eklentiyi y\u00fckleyin:<\/p>\n<pre><code>\nnpm install gatsby-source-wordpress\n<\/pre>\n<p><\/code><\/p>\n<p>veya<\/p>\n<pre><code>\nyarn add gatsby-source-wordpress\n<\/pre>\n<p><\/code><\/p>\n<h3><code>gatsby-config.js<\/code> Dosyas\u0131nda Kaynak Eklentisini Yap\u0131land\u0131rma Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Eklentiyi y\u00fckledikten sonra, Gatsby projenizin <code>gatsby-config.js<\/code> dosyas\u0131nda yap\u0131land\u0131rman\u0131z gerekir. Bu dosya, Gatsby'nin web sitenizi nas\u0131l derleyece\u011fini ve hangi veri kaynaklar\u0131n\u0131 kullanaca\u011f\u0131n\u0131 tan\u0131mlar. A\u015fa\u011f\u0131daki gibi bir yap\u0131land\u0131rma ekleyin:<\/p>\n<pre><code>\nmodule.exports = {\n  plugins: [\n    {\n      resolve: <code>gatsby-source-wordpress<\/code>,\n      options: {\n        url:\n          process.env.WP_GRAPHQL_URL || <code>http:\/\/localhost\/wordpress\/graphql<\/code>, \/\/ WordPress sitenizin GraphQL u\u00e7 noktas\u0131\n        verbose: true,\n        schema: {\n          timeout: 60000, \/\/ Veri \u00e7ekme i\u00e7in maksimum s\u00fcre\n        },\n        develop: {\n          nodeUpdateInterval: 300,\n          hardCacheMediaFiles: true,\n        },\n        production: {\n          hardCacheMediaFiles: true,\n        },\n        type: {\n          Post: {\n            limit:\n              process.env.NODE_ENV === <code>development<\/code>\n                ? 50\n                : undefined, \/\/ Geli\u015ftirme ortam\u0131nda daha az post \u00e7ekme\n          },\n        },\n      },\n    },\n    \/\/ Di\u011fer eklentileriniz buraya gelecek (\u00f6rne\u011fin: gatsby-plugin-image)\n    <code>gatsby-plugin-image<\/code>,\n    <code>gatsby-plugin-sharp<\/code>,\n    {\n      resolve: <code>gatsby-source-filesystem<\/code>,\n      options: {\n        name: <code>images<\/code>,\n        path: <code>${__dirname}\/src\/images<\/code>,\n      },\n    },\n    <code>gatsby-transformer-sharp<\/code>,\n  ],\n};\n<\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod blo\u011funda en \u00f6nemli k\u0131s\u0131m <code>url<\/code> alan\u0131d\u0131r. Buraya, WordPress sitenizin GraphQL u\u00e7 noktas\u0131n\u0131 girmelisiniz. Varsay\u0131lan olarak, WordPress'in kurulu oldu\u011fu dizinde <code>graphql<\/code> ile biten bir URL olacakt\u0131r (\u00f6rne\u011fin: <code>https:\/\/sitenizinadi.com\/graphql<\/code> veya <code>https:\/\/sitenizinadi.com\/wp\/graphql<\/code>). E\u011fer WPGatsby eklentisini kullan\u0131yorsan\u0131z, bu eklenti size do\u011fru URL'i sa\u011flayacakt\u0131r.<\/p>\n<p><code>process.env.WP_GRAPHQL_URL<\/code> kullan\u0131m\u0131, production ve development ortamlar\u0131nda farkl\u0131 URL'ler kullanman\u0131za olanak tan\u0131r. Genellikle, <code>.env<\/code> dosyas\u0131nda bu URL'yi tan\u0131mlamak iyi bir pratiktir.<\/p>\n<h3>Verileri GraphQL ile Sorgulama ve Ke\u015ffetme<\/h3>\n<p><code>gatsby-source-wordpress<\/code> eklentisi do\u011fru bir \u015fekilde yap\u0131land\u0131r\u0131ld\u0131ktan sonra, Gatsby geli\u015ftirme sunucusunu ba\u015flatarak verileri \u00e7ekebilirsiniz:<\/p>\n<pre><code>\ngatsby develop\n<\/pre>\n<p><\/code><\/p>\n<p>Bu komut \u00e7al\u0131\u015ft\u0131ktan sonra, genellikle <code>http:\/\/localhost:8000\/__graphql<\/code> adresinde Gatsby'nin yerle\u015fik GraphQL aray\u00fcz\u00fcne (GraphiQL) eri\u015febilirsiniz. Buras\u0131, WordPress'ten \u00e7ekilen t\u00fcm verileri ke\u015ffetmek i\u00e7in harika bir ara\u00e7t\u0131r. GraphiQL aray\u00fcz\u00fcnde, \u00e7ekilen postlar\u0131, sayfalar\u0131, kategorileri ve medya dosyalar\u0131n\u0131 nas\u0131l sorgulayabilece\u011finizi g\u00f6receksiniz. \u00d6rne\u011fin, t\u00fcm blog yaz\u0131lar\u0131n\u0131 \u00e7ekmek i\u00e7in a\u015fa\u011f\u0131daki gibi bir sorgu kullanabilirsiniz:<\/p>\n<pre><code>\nquery MyPosts {\n  allWpPost {\n    edges {\n      node {\n        id\n        title\n        excerpt\n        uri\n        slug\n        date(formatString: \"MMMM DD, YYYY\")\n        featuredImage {\n          node {\n            altText\n            gatsbyImage(width: 600, height: 400, formats: [AUTO, WEBP, AVIF])\n          }\n        }\n        categories {\n          nodes {\n            name\n            uri\n          }\n        }\n      }\n    }\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu sorgu, her bir yaz\u0131 i\u00e7in ID, ba\u015fl\u0131k, \u00f6zet, URL, yay\u0131n tarihi ve \u00f6ne \u00e7\u0131kan g\u00f6rseli (Gatsby Image API'si ile optimize edilmi\u015f haliyle) ve kategorileri \u00e7eker. <code>gatsby-plugin-image<\/code> ile entegrasyon sayesinde, WordPress'teki resimler otomatik olarak optimize edilecek ve duyarl\u0131 hale getirilecektir.<\/p>\n<blockquote><p>\n  Uzman \u0130pucu: GraphQL sorgular\u0131n\u0131z\u0131 ba\u015flang\u0131\u00e7ta olabildi\u011fince spesifik tutun. Yaln\u0131zca ihtiyac\u0131n\u0131z olan verileri \u00e7ekmek, derleme s\u00fcrelerini k\u0131salt\u0131r ve performans\u0131 art\u0131r\u0131r. Ayr\u0131ca, <code>gatsby-source-wordpress<\/code> eklentisinin geli\u015fmi\u015f filtreleme ve ili\u015fki kurma \u00f6zelliklerini ke\u015ffetmeyi unutmay\u0131n, bu sayede \u00e7ok daha karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 bile kolayca y\u00f6netebilirsiniz.\n<\/p><\/blockquote>\n<p>Bu ad\u0131mlarla, WordPress i\u00e7eri\u011finizi ba\u015far\u0131yla Gatsby projenize aktarabilir ve bir sonraki a\u015fama olan temaland\u0131rma ve i\u00e7erik g\u00f6sterimine haz\u0131r hale getirebilirsiniz. Unutmay\u0131n, bu i\u015flem b\u00fcy\u00fck siteler i\u00e7in biraz zaman alabilir, ancak sonucunda elde edece\u011finiz performans ve g\u00fcvenlik bu \u00e7abaya de\u011fecektir.<\/p>\n<h2>Gatsby Ortam\u0131n\u0131 Kurma ve Verileri \u00c7ekme: Ba\u015flang\u0131\u00e7 Rehberi<\/h2>\n<p>WordPress verilerinizi Gatsby'ye aktarman\u0131n ilk ad\u0131mlar\u0131n\u0131 tamamlad\u0131ktan sonra, s\u0131ra Gatsby projenizi kurmaya ve bu verileri efektif bir \u015fekilde kullanmaya geldi. Bu b\u00f6l\u00fcm, Gatsby projesini s\u0131f\u0131rdan olu\u015fturma, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleme ve WordPress'ten \u00e7ekilen verileri sitenizde g\u00f6stermek i\u00e7in nas\u0131l GraphQL sorgular\u0131 yazaca\u011f\u0131n\u0131z\u0131 detayland\u0131racakt\u0131r.<\/p>\n<h3>Gatsby CLI ile Yeni Bir Proje Ba\u015flatma Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Gatsby ile \u00e7al\u0131\u015fmaya ba\u015flamak i\u00e7in \u00f6ncelikle Gatsby CLI'\u0131 (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) k\u00fcresel olarak y\u00fcklemeniz gerekir. Bu ara\u00e7, yeni Gatsby projeleri olu\u015fturman\u0131z\u0131, geli\u015ftirme sunucusu \u00e7al\u0131\u015ft\u0131rman\u0131z\u0131 ve derleme i\u015flemleri yapman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code>\nnpm install -g gatsby-cli\n<\/pre>\n<p><\/code><\/p>\n<p>veya<\/p>\n<pre><code>\nyarn global add gatsby-cli\n<\/pre>\n<p><\/code><\/p>\n<p>CLI y\u00fcklendikten sonra, yeni bir Gatsby projesi olu\u015fturabilirsiniz. Genellikle, ba\u015flang\u0131\u00e7 \u015fablonlar\u0131n\u0131 kullanmak en h\u0131zl\u0131 yoldur. \u00d6rne\u011fin, \"hello-world\" veya \"default-starter\" \u015fablonlar\u0131 temel bir yap\u0131 sa\u011flar:<\/p>\n<pre><code>\ngatsby new my-wordpress-gatsby-site https:\/\/github.com\/gatsbyjs\/gatsby-starter-default\n<\/pre>\n<p><\/code><\/p>\n<p>Bu komut, <code>my-wordpress-gatsby-site<\/code> ad\u0131nda yeni bir dizin olu\u015fturur ve i\u00e7ine varsay\u0131lan Gatsby ba\u015flang\u0131\u00e7 \u015fablonunun dosyalar\u0131n\u0131 kopyalar. Proje olu\u015fturulduktan sonra, yeni dizine gidin:<\/p>\n<pre><code>\ncd my-wordpress-gatsby-site\n<\/pre>\n<p><\/code><\/p>\n<h3><code>gatsby-config.js<\/code> ve <code>.env<\/code> Dosyas\u0131 Yap\u0131land\u0131rmas\u0131 Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Daha \u00f6nce bahsetti\u011fimiz gibi, <code>gatsby-config.js<\/code> dosyas\u0131 Gatsby projenizin \u00e7ekirdek yap\u0131land\u0131rmas\u0131n\u0131 i\u00e7erir. WordPress verilerini \u00e7ekmek i\u00e7in bu dosyay\u0131 d\u00fczenlememiz gerekecek. Ayr\u0131ca, hassas bilgileri (API anahtarlar\u0131, veritaban\u0131 URL'leri gibi) do\u011frudan kod i\u00e7inde tutmaktan ka\u00e7\u0131nmak i\u00e7in <code>.env<\/code> dosyalar\u0131n\u0131 kullanmak \u00f6nemlidir.<\/p>\n<p>Projenizin k\u00f6k dizininde bir <code>.env.development<\/code> (geli\u015ftirme ortam\u0131 i\u00e7in) ve <code>.env.production<\/code> (canl\u0131 ortam i\u00e7in) dosyas\u0131 olu\u015fturun. \u0130\u00e7ine WordPress GraphQL API URL'nizi ekleyin:<\/p>\n<pre><code>\n\/\/ .env.development\nWP_GRAPHQL_URL=\"http:\/\/localhost\/wordpress\/graphql\" \n\/\/ veya canl\u0131 WordPress sitenizin geli\u015ftirme kopyas\u0131n\u0131n adresi\n<\/pre>\n<p><\/code><\/p>\n<p>Ard\u0131ndan, <code>gatsby-config.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve <code>gatsby-source-wordpress<\/code> eklentisini yap\u0131land\u0131r\u0131n:<\/p>\n<pre><code>\n\/\/ gatsby-config.js\nrequire(\"dotenv\").config({\n  path: <code>.env.${process.env.NODE_ENV}<\/code>,\n});\n\nmodule.exports = {\n  siteMetadata: {\n    title: <code>WordPress&#039;ten Gatsby&#039;ye Ge\u00e7i\u015f<\/code>,\n    description: <code>WordPress i\u00e7eri\u011fiyle g\u00fc\u00e7lendirilmi\u015f h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby sitesi.<\/code>,\n    author: <code>@yourusername<\/code>,\n  },\n  plugins: [\n    <code>gatsby-plugin-react-helmet<\/code>,\n    {\n      resolve: <code>gatsby-source-filesystem<\/code>,\n      options: {\n        name: <code>images<\/code>,\n        path: <code>${__dirname}\/src\/images<\/code>,\n      },\n    },\n    <code>gatsby-transformer-sharp<\/code>,\n    <code>gatsby-plugin-sharp<\/code>,\n    {\n      resolve: <code>gatsby-source-wordpress<\/code>,\n      options: {\n        url: process.env.WP_GRAPHQL_URL, \/\/ .env dosyas\u0131ndan \u00e7ekilen URL\n        \/\/ Di\u011fer opsiyonlar...\n        develop: {\n          hardCacheMediaFiles: true, \/\/ Geli\u015ftirme s\u00fcrecinde medya dosyalar\u0131n\u0131 \u00f6nbelle\u011fe al\u0131r\n        },\n        production: {\n          hardCacheMediaFiles: true, \/\/ Canl\u0131 ortamda medya dosyalar\u0131n\u0131 \u00f6nbelle\u011fe al\u0131r\n        },\n        schema: {\n          timeout: 100000, \/\/ B\u00fcy\u00fck siteler i\u00e7in zaman a\u015f\u0131m\u0131n\u0131 art\u0131r\u0131n\n        },\n        \/\/ ... di\u011fer opsiyonlar\n      },\n    },\n    \/\/ ... di\u011fer eklentileriniz\n  ],\n};\n<\/pre>\n<p><\/code><\/p>\n<p>Burada <code>require(\"dotenv\").config()<\/code> sat\u0131r\u0131, Gatsby'nin <code>.env<\/code> dosyalar\u0131n\u0131z\u0131 y\u00fcklemesini sa\u011flar. <code>url<\/code> alan\u0131 art\u0131k do\u011frudan <code>.env<\/code> dosyas\u0131ndan <code>WP_GRAPHQL_URL<\/code> de\u011fi\u015fkenini kullan\u0131yor.<\/p>\n<h3>Gatsby \u0130\u00e7erik Modeli Olu\u015fturma ve GraphQL Sorgular\u0131yla Veri \u00c7ekme Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Gatsby, GraphQL'i bir veri katman\u0131 olarak kullanarak farkl\u0131 kaynaklardan (bu durumda WordPress) gelen verileri tek bir aray\u00fczde birle\u015ftirir. <code>gatsby develop<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda ve <code>http:\/\/localhost:8000\/__graphql<\/code> adresine gitti\u011finizde, WordPress'ten gelen verilerinizi <code>allWpPost<\/code>, <code>allWpPage<\/code>, <code>allWpCategory<\/code> vb. gibi tipler alt\u0131nda g\u00f6receksiniz. Bu tipleri kullanarak istedi\u011finiz verileri \u00e7ekebilirsiniz.<\/p>\n<p>\u00d6rne\u011fin, t\u00fcm blog yaz\u0131lar\u0131n\u0131 listeleyecek bir ana sayfa (<code>src\/pages\/index.js<\/code>) veya blog sayfas\u0131 olu\u015fturmak i\u00e7in, bir React bile\u015feni i\u00e7inde bir GraphQL sorgusu yazabilirsiniz:<\/p>\n<pre><code>\n\/\/ src\/pages\/blog.js\nimport React from \"react\";\nimport { graphql, Link } from \"gatsby\";\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\";\n\nconst BlogPage = ({ data }) => {\n  const posts = data.allWpPost.nodes;\n\n  return (\n    <div>\n      <h1>Blog Yaz\u0131lar\u0131<\/h1>\n      <ul>\n        {posts.map(post => {\n          const image = getImage(post.featuredImage?.node?.gatsbyImage);\n          return (\n            <li key={post.id}>\n              <Link to={post.uri}>\n                {image && (\n                  <GatsbyImage image={image} alt={post.featuredImage?.node?.altText || post.title} \/>\n                )}\n                <h2>{post.title}<\/h2>\n                <div dangerouslySetInnerHTML={{ __html: post.excerpt }} \/>\n                <small>{post.date} \u2014 {post.categories.nodes.map(cat => cat.name).join(\", \")}<\/small>\n              <\/Link>\n            <\/li>\n          );\n        })}\n      <\/ul>\n    <\/div>\n  );\n};\n\nexport const query = graphql<code>query BlogPosts {\n    allWpPost(sort: { fields: date, order: DESC }) {\n      nodes {\n        id\n        title\n        excerpt\n        uri\n        date(formatString: \"DD MMMM YYYY\")\n        categories {\n          nodes {\n            name\n          }\n        }\n        featuredImage {\n          node {\n            altText\n            gatsbyImage(width: 300, height: 200, formats: [AUTO, WEBP, AVIF])\n          }\n        }\n      }\n    }\n  }<\/code>;\n\nexport default BlogPage;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>graphql<\/code> etiketi i\u00e7indeki sorgu, t\u00fcm WordPress g\u00f6nderilerini tarihe g\u00f6re azalan s\u0131rada \u00e7eker. <code>data<\/code> prop'u arac\u0131l\u0131\u011f\u0131yla bile\u015fene iletilen bu veriler, <code>map<\/code> d\u00f6ng\u00fcs\u00fcyle listelenir. <code>GatsbyImage<\/code> bile\u015feni, resimlerin otomatik olarak optimize edilmesini ve duyarl\u0131 olmas\u0131n\u0131 sa\u011flar. <code>dangerouslySetInnerHTML<\/code> kullan\u0131m\u0131, WordPress'ten gelen HTML i\u00e7eri\u011fini g\u00fcvenli bir \u015fekilde g\u00f6r\u00fcnt\u00fclemek i\u00e7indir, ancak bu \u00f6zelli\u011fi dikkatli kullanmak gerekir.<\/p>\n<blockquote><p>\n  Uzman \u0130pucu: GraphQL sorgular\u0131n\u0131zda <code>gatsby-plugin-image<\/code> ile gelen <code>gatsbyImage<\/code> alan\u0131n\u0131 kullanarak, WordPress'ten \u00e7ekti\u011finiz t\u00fcm medya dosyalar\u0131n\u0131 otomatik olarak optimize edin. Bu, sitenizin y\u00fckleme h\u0131z\u0131n\u0131 dramatik \u015fekilde art\u0131racakt\u0131r. <code>width<\/code>, <code>height<\/code>, <code>formats<\/code> gibi parametrelerle resimlerin nas\u0131l i\u015flenece\u011fini kontrol edebilirsiniz.\n<\/p><\/blockquote>\n<p>Bu ad\u0131mlarla, Gatsby projenizi ba\u015far\u0131yla kurdunuz, WordPress verilerinizi \u00e7ektiniz ve bunlar\u0131 web sitenizde g\u00f6stermek i\u00e7in temel yap\u0131 ta\u015flar\u0131n\u0131 olu\u015fturdunuz. Art\u0131k s\u0131ra, bu verileri kullanarak tam te\u015fekk\u00fcll\u00fc sayfalar ve tasar\u0131mlar olu\u015fturmaya geldi.<\/p>\n<h2>Temaland\u0131rma ve \u0130\u00e7erik G\u00f6sterimi: React Bile\u015fenleriyle Dinamik Sayfalar Olu\u015fturma<\/h2>\n<p>WordPress'ten Gatsby'ye ge\u00e7i\u015fin en heyecan verici ve yarat\u0131c\u0131 k\u0131s\u0131mlar\u0131ndan biri, i\u00e7eri\u011finizi modern React bile\u015fenleri ile yeniden tasarlamak ve dinamik olarak g\u00f6stermektir. WordPress, i\u00e7eri\u011fi do\u011frudan HTML \u00e7\u0131kt\u0131s\u0131 olarak sunarken, Gatsby bu i\u00e7eri\u011fi saf veri olarak \u00e7eker ve size React kullanarak istedi\u011finiz gibi g\u00f6rselle\u015ftirme \u00f6zg\u00fcrl\u00fc\u011f\u00fc tan\u0131r. Bu b\u00f6l\u00fcmde, React bile\u015fenlerini kullanarak blog yaz\u0131lar\u0131n\u0131z\u0131, sayfalar\u0131n\u0131z\u0131 ve di\u011fer i\u00e7erik t\u00fcrlerini nas\u0131l dinamik olarak olu\u015fturaca\u011f\u0131n\u0131z\u0131 inceleyece\u011fiz.<\/p>\n<h3>React Bile\u015fenleriyle \u0130\u00e7erik \u015eablonlar\u0131 Olu\u015fturma Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Gatsby'de, her i\u00e7erik t\u00fcr\u00fc i\u00e7in (\u00f6rne\u011fin blog yaz\u0131s\u0131, sayfa, kategori) ayr\u0131 bir React bile\u015feni \u015fablonu olu\u015fturabilirsiniz. Bu \u015fablonlar, o i\u00e7eri\u011fin nas\u0131l g\u00f6r\u00fcnece\u011fini tan\u0131mlar.<\/p>\n<p>\u00d6rnek olarak, tek bir blog yaz\u0131s\u0131n\u0131 g\u00f6stermek i\u00e7in <code>src\/templates\/Post.js<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m:<\/p>\n<pre><code>\n\/\/ src\/templates\/Post.js\nimport React from \"react\";\nimport { graphql } from \"gatsby\";\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\";\nimport Layout from \"..\/components\/layout\"; \/\/ Genel sayfa d\u00fczenini sa\u011flayan bir bile\u015fen\n\nconst PostTemplate = ({ data }) => {\n  const post = data.wpPost;\n  const featuredImage = getImage(post.featuredImage?.node?.gatsbyImage);\n\n  return (\n    <Layout>\n      <article>\n        <h1>{post.title}<\/h1>\n        <p>Yay\u0131nlanma Tarihi: {post.date}<\/p>\n        {featuredImage && (\n          <GatsbyImage image={featuredImage} alt={post.featuredImage.node.altText || post.title} \/>\n        )}\n        <div dangerouslySetInnerHTML={{ __html: post.content }} \/>\n      <\/article>\n    <\/Layout>\n  );\n};\n\nexport const query = graphql<code>query ($id: String!) { \/\/ Dinamik olarak i\u00e7eri\u011fin ID&#039;si gelecek\n    wpPost(id: { eq: $id }) {\n      title\n      content\n      date(formatString: \"DD MMMM YYYY\")\n      featuredImage {\n        node {\n          altText\n          gatsbyImage(width: 900, formats: [AUTO, WEBP, AVIF])\n        }\n      }\n    }\n  }<\/code>;\n\nexport default PostTemplate;\n<\/pre>\n<p><\/code><\/p>\n<p>Bu \u015fablon, <code>id<\/code> parametresi arac\u0131l\u0131\u011f\u0131yla belirli bir WordPress yaz\u0131s\u0131n\u0131 sorgular ve ba\u015fl\u0131\u011f\u0131n\u0131, i\u00e7eri\u011fini, tarihini ve \u00f6ne \u00e7\u0131kan g\u00f6rselini g\u00f6sterir. <code>Layout<\/code> bile\u015feni, sitenizin \u00fcstbilgi, altbilgi ve navigasyon gibi tekrar eden k\u0131s\u0131mlar\u0131n\u0131 i\u00e7erebilir.<\/p>\n<h3><code>gatsby-node.js<\/code> ile Dinamik Sayfalar Olu\u015fturma Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Gatsby'nin en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, <code>gatsby-node.js<\/code> dosyas\u0131n\u0131 kullanarak programatik olarak sayfalar olu\u015fturabilmesidir. Bu dosya, Gatsby'nin derleme (build) s\u00fcrecinde \u00e7al\u0131\u015f\u0131r ve GraphQL sorgular\u0131ndan gelen verileri kullanarak dinamik sayfalar olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n<p>Projenizin k\u00f6k dizininde <code>gatsby-node.js<\/code> dosyas\u0131n\u0131 olu\u015fturun (veya mevcutsa d\u00fczenleyin) ve a\u015fa\u011f\u0131daki kodu ekleyin:<\/p>\n<pre><code>\n\/\/ gatsby-node.js\nconst path = require(<code>path<\/code>);\n\nexports.createPages = async ({ graphql, actions }) => {\n  const { createPage } = actions;\n\n  \/\/ T\u00fcm WordPress yaz\u0131lar\u0131n\u0131 sorgula\n  const resultPosts = await graphql(<code>query {\n      allWpPost {\n        nodes {\n          uri\n          id\n        }\n      }\n    }<\/code>);\n\n  if (resultPosts.errors) {\n    throw resultPosts.errors;\n  }\n\n  const posts = resultPosts.data.allWpPost.nodes;\n  const postTemplate = path.resolve(<code>.\/src\/templates\/Post.js<\/code>);\n\n  \/\/ Her yaz\u0131 i\u00e7in dinamik sayfa olu\u015ftur\n  posts.forEach(post => {\n    createPage({\n      path: post.uri, \/\/ WordPress'ten gelen URI'yi yol olarak kullan\n      component: postTemplate,\n      context: {\n        id: post.id, \/\/ \u015eablona aktar\u0131lacak ID, GraphQL sorgusunda kullan\u0131lacak\n      },\n    });\n  });\n\n  \/\/ T\u00fcm WordPress sayfalar\u0131n\u0131 sorgula (iste\u011fe ba\u011fl\u0131)\n  const resultPages = await graphql(<code>query {\n      allWpPage {\n        nodes {\n          uri\n          id\n        }\n      }\n    }<\/code>);\n\n  if (resultPages.errors) {\n    throw resultPages.errors;\n  }\n\n  const pages = resultPages.data.allWpPage.nodes;\n  const pageTemplate = path.resolve(<code>.\/src\/templates\/Page.js<\/code>); \/\/ Page.js \u015fablonunuzu olu\u015fturun\n\n  \/\/ Her sayfa i\u00e7in dinamik sayfa olu\u015ftur\n  pages.forEach(page => {\n    createPage({\n      path: page.uri,\n      component: pageTemplate,\n      context: {\n        id: page.id,\n      },\n    });\n  });\n};\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kod:<\/p>\n<ol>\n<li>T\u00fcm WordPress yaz\u0131lar\u0131n\u0131 (<code>allWpPost<\/code>) GraphQL ile sorgular.<\/li>\n<li>Her bir yaz\u0131 i\u00e7in, <code>createPage<\/code> fonksiyonunu kullanarak bir sayfa olu\u015fturur.<\/li>\n<li>Sayfan\u0131n yolu (<code>path<\/code>) olarak WordPress'ten gelen <code>uri<\/code>'yi kullan\u0131r\u0131z. Bu, URL yap\u0131n\u0131z\u0131 koruman\u0131za yard\u0131mc\u0131 olur.<\/li>\n<li><code>component<\/code> olarak <code>src\/templates\/Post.js<\/code> \u015fablonunu atar.<\/li>\n<li><code>context<\/code> objesi arac\u0131l\u0131\u011f\u0131yla yaz\u0131n\u0131n <code>id<\/code>'sini \u015fablona iletir. Bu ID, \u015fablondaki GraphQL sorgusunda kullan\u0131larak do\u011fru yaz\u0131n\u0131n verileri \u00e7ekilir.<\/li>\n<li>Ayn\u0131 i\u015flemi sayfalar (<code>allWpPage<\/code>) i\u00e7in de tekrar eder.<\/li>\n<\/ol>\n<p>Bu i\u015flemi yapt\u0131ktan sonra, <code>gatsby develop<\/code> komutunu yeniden \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, WordPress'teki t\u00fcm yaz\u0131lar\u0131n\u0131z\u0131n ve sayfalar\u0131n\u0131z\u0131n art\u0131k Gatsby sitenizde eri\u015filebilir oldu\u011funu g\u00f6receksiniz.<\/p>\n<h3>Medya Dosyalar\u0131 ve Duyarl\u0131 Tasar\u0131m \u0130\u00e7in Entegrasyonlar<\/h3>\n<p>Gatsby, medya dosyalar\u0131n\u0131 optimize etme konusunda \u00fcst\u00fcn yeteneklere sahiptir. <code>gatsby-plugin-image<\/code> ve <code>gatsby-transformer-sharp<\/code> eklentileri sayesinde, WordPress'ten gelen resimleriniz otomatik olarak farkl\u0131 boyutlarda ve formatlarda (WebP, AVIF) olu\u015fturulur, lazy-load edilir ve duyarl\u0131 hale getirilir. Bu, mobil cihazlarda da harika bir kullan\u0131c\u0131 deneyimi sunar.<\/p>\n<p>CSS i\u00e7in, Gatsby ile birlikte CSS Mod\u00fclleri, Styled Components veya Tailwind CSS gibi farkl\u0131 yakla\u015f\u0131mlar\u0131 kullanabilirsiniz. Duyarl\u0131 tasar\u0131m i\u00e7in standart CSS media query'leri veya bu k\u00fct\u00fcphanelerin sundu\u011fu ara\u00e7lar\u0131 kullanabilirsiniz.<\/p>\n<pre><code>\n\/* src\/styles\/global.css veya bir bile\u015fen CSS mod\u00fcl\u00fc *\/\n.post-container {\n  max-width: 960px;\n  margin: 0 auto;\n  padding: 1rem;\n}\n\n@media (max-width: 768px) {\n  .post-container {\n    padding: 0.5rem;\n  }\n  h1 {\n    font-size: 1.8rem;\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu basit bir media query \u00f6rne\u011fidir. Gatsby ile React'in esnekli\u011fi, sitenizi her t\u00fcrl\u00fc ekranda harika g\u00f6r\u00fcnmesini sa\u011flayacak \u015fekilde tasarlaman\u0131za olanak tan\u0131r.<\/p>\n<blockquote><p>\n  Uzman \u0130pucu: \u0130\u00e7eri\u011finizdeki dahili linklerin (internal links) do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in, WordPress'ten gelen HTML i\u00e7eri\u011fini i\u015flerken bir d\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc (\u00f6rne\u011fin <code>remark-rehype<\/code> veya \u00f6zel bir rehype eklentisi) kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu, dahili linklerin Gatsby'nin <code><Link><\/code> bile\u015fenine d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesini sa\u011flayarak istemci taraf\u0131 navigasyonunu etkinle\u015ftirir. Aksi takdirde, her dahili linke t\u0131kland\u0131\u011f\u0131nda sayfa yeniden y\u00fcklenir.\n<\/p><\/blockquote>\n<p>Bu ad\u0131mlarla, WordPress i\u00e7eri\u011finizle g\u00fc\u00e7lendirilmi\u015f, duyarl\u0131 ve g\u00f6rsel olarak \u00e7ekici bir Gatsby sitesi olu\u015fturma yolunda \u00f6nemli bir mesafe kat etmi\u015f oldunuz. Art\u0131k sitenizin da\u011f\u0131t\u0131ma haz\u0131r hale gelmesine bir ad\u0131m kald\u0131.<\/p>\n<h2>Statik Web Sitesini Da\u011f\u0131tma: Canl\u0131ya Ge\u00e7i\u015f ve S\u00fcrekli Entegrasyon (CI\/CD)<\/h2>\n<p>Gatsby ile geli\u015ftirme s\u00fcrecinizi tamamlad\u0131n\u0131z ve WordPress i\u00e7eri\u011finizi ba\u015far\u0131l\u0131 bir \u015fekilde yeni sitenize entegre ettiniz. \u015eimdi s\u0131ra, bu h\u0131zl\u0131 ve g\u00fcvenli statik web sitesini d\u00fcnya ile payla\u015fmaya geldi. Statik sitelerin da\u011f\u0131t\u0131m\u0131, geleneksel dinamik sitelere g\u00f6re \u00e7ok daha kolay, h\u0131zl\u0131 ve ekonomiktir. Bu b\u00f6l\u00fcmde, Gatsby sitenizi canl\u0131ya almak i\u00e7in en pop\u00fcler platformlar\u0131 ve s\u00fcrekli entegrasyon (CI\/CD) s\u00fcre\u00e7lerini inceleyece\u011fiz.<\/p>\n<h3>Gatsby Sitenizi Da\u011f\u0131t\u0131m Platformlar\u0131na Y\u00fckleme Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n<p>Statik siteler, Nginx veya Apache gibi geleneksel web sunucular\u0131nda bar\u0131nd\u0131r\u0131labilece\u011fi gibi, \u00f6zel olarak statik site bar\u0131nd\u0131rma i\u00e7in optimize edilmi\u015f platformlarda da da\u011f\u0131t\u0131labilir. Bu platformlar genellikle k\u00fcresel CDN'ler (Content Delivery Networks) kullanarak i\u00e7eri\u011finizi son kullan\u0131c\u0131lara en h\u0131zl\u0131 \u015fekilde ula\u015ft\u0131r\u0131r.<\/p>\n<h4>Netlify ile Kolay Da\u011f\u0131t\u0131m<\/h4>\n<p>Netlify, statik siteler i\u00e7in en pop\u00fcler ve kullan\u0131m\u0131 kolay da\u011f\u0131t\u0131m platformlar\u0131ndan biridir. GitHub, GitLab veya Bitbucket depolar\u0131n\u0131zla do\u011frudan entegre olarak, her kod de\u011fi\u015fikli\u011finizde otomatik olarak sitenizi derler ve da\u011f\u0131t\u0131r.<\/p>\n<ol>\n<li><strong>Depo Olu\u015fturma:<\/strong> Gatsby projenizi bir Git deposuna (GitHub, GitLab vb.) y\u00fckleyin.<\/li>\n<li><strong>Netlify'a Ba\u011flanma:<\/strong> Netlify hesab\u0131n\u0131za giri\u015f yap\u0131n, \"Add new site\" (Yeni site ekle) se\u00e7ene\u011fini t\u0131klay\u0131n ve Git sa\u011flay\u0131c\u0131n\u0131z\u0131 se\u00e7erek deponuza ba\u011flan\u0131n.<\/li>\n<li><strong>Ayarlar\u0131 Yap\u0131land\u0131rma:<\/strong> Netlify, Gatsby projenizi otomatik olarak tan\u0131r, ancak manuel olarak baz\u0131 ayarlar\u0131 do\u011frulaman\u0131z gerekebilir:\n<ul>\n<li><strong>Build Command (Derleme Komutu):<\/strong> <code>gatsby build<\/code><\/li>\n<li><strong>Publish directory (Yay\u0131nlama Dizini):<\/strong> <code>public\/<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Ortam De\u011fi\u015fkenleri:<\/strong> WordPress GraphQL URL'niz gibi <code>.env.production<\/code> dosyas\u0131nda tan\u0131mlad\u0131\u011f\u0131n\u0131z ortam de\u011fi\u015fkenlerini Netlify aray\u00fcz\u00fcnde \"Build & deploy\" (Derle ve da\u011f\u0131t) ayarlar\u0131 alt\u0131ndaki \"Environment variables\" (Ortam de\u011fi\u015fkenleri) k\u0131sm\u0131na ekleyin.<\/li>\n<li><strong>Da\u011f\u0131t\u0131m\u0131 Ba\u015flatma:<\/strong> T\u00fcm ayarlar tamamland\u0131ktan sonra, Netlify sitenizi derlemeye ve da\u011f\u0131tmaya ba\u015flar. \u0130lk derleme tamamland\u0131\u011f\u0131nda, siteniz canl\u0131da olacakt\u0131r!<\/li>\n<\/ol>\n<h4>Vercel ile Da\u011f\u0131t\u0131m<\/h4>\n<p>Vercel, Netlify'a benzer \u015fekilde, statik siteler ve sunucusuz fonksiyonlar i\u00e7in optimize edilmi\u015f ba\u015fka bir pop\u00fcler da\u011f\u0131t\u0131m platformudur. React ve Next.js projeleri i\u00e7in \u00f6zellikle tercih edilir, ancak Gatsby ile de m\u00fckemmel uyum sa\u011flar.<\/p>\n<ol>\n<li><strong>Depo Olu\u015fturma:<\/strong> Projenizi bir Git deposuna y\u00fckleyin.<\/li>\n<li><strong>Vercel'e Ba\u011flanma:<\/strong> Vercel hesab\u0131n\u0131za giri\u015f yap\u0131n, \"Import Project\" (Proje \u0130\u00e7e Aktar) se\u00e7ene\u011fini t\u0131klay\u0131n ve Git sa\u011flay\u0131c\u0131n\u0131z\u0131 se\u00e7erek deponuza ba\u011flan\u0131n.<\/li>\n<li><strong>Ayarlar\u0131 Yap\u0131land\u0131rma:<\/strong> Vercel genellikle Gatsby projelerini otomatik olarak alg\u0131lar.\n<ul>\n<li><strong>Build Command:<\/strong> <code>gatsby build<\/code><\/li>\n<li><strong>Output Directory:<\/strong> <code>public\/<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Ortam De\u011fi\u015fkenleri:<\/strong> Ortam de\u011fi\u015fkenlerinizi Vercel proje ayarlar\u0131n\u0131zdaki \"Environment Variables\" b\u00f6l\u00fcm\u00fcne ekleyin.<\/li>\n<li><strong>Da\u011f\u0131t\u0131m:<\/strong> Vercel, deponuzdaki her de\u011fi\u015fikli\u011fi alg\u0131lar ve otomatik olarak bir da\u011f\u0131t\u0131m yapar.<\/li>\n<\/ol>\n<h3>S\u00fcrekli Entegrasyon ve S\u00fcrekli Da\u011f\u0131t\u0131m (CI\/CD) S\u00fcre\u00e7lerinin Otomasyonu<\/h3>\n<p>CI\/CD, kod de\u011fi\u015fikliklerinin otomatik olarak test edilmesini, derlenmesini ve da\u011f\u0131t\u0131lmas\u0131n\u0131 sa\u011flayan bir yaz\u0131l\u0131m geli\u015ftirme metodolojisidir. Gatsby projelerinde CI\/CD kurmak, i\u00e7erik g\u00fcncellemelerinizin (WordPress'ten gelenler dahil) h\u0131zl\u0131 ve hatas\u0131z bir \u015fekilde canl\u0131ya yans\u0131mas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Netlify ve Vercel gibi platformlar, Git tabanl\u0131 CI\/CD'yi varsay\u0131lan olarak sunar. Yani, kod deponuza (\u00f6rne\u011fin <code>main<\/code> dal\u0131na) bir de\u011fi\u015fiklik itti\u011finizde, otomatik olarak yeni bir derleme ve da\u011f\u0131t\u0131m tetiklenir. Ancak, WordPress i\u00e7eri\u011finizde bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda Gatsby sitenizin yeniden derlenmesini sa\u011flamak i\u00e7in ek ad\u0131mlar gerekebilir.<\/p>\n<h4>Webhook'lar ile Otomatik Yeniden Derleme<\/h4>\n<p>WordPress i\u00e7eri\u011finiz g\u00fcncellendi\u011finde Gatsby sitenizin otomatik olarak yeniden derlenmesini sa\u011flaman\u0131n en yayg\u0131n yolu, Webhook kullanmakt\u0131r. Webhook, belirli bir olay (\u00f6rne\u011fin bir yaz\u0131 yay\u0131nland\u0131\u011f\u0131nda veya g\u00fcncellendi\u011finde) ger\u00e7ekle\u015fti\u011finde bir URL'e HTTP POST iste\u011fi g\u00f6nderen bir mekanizmad\u0131r.<\/p>\n<ol>\n<li><strong>Netlify\/Vercel Build Hook Olu\u015fturma:<\/strong> Da\u011f\u0131t\u0131m platformunuzda (Netlify veya Vercel) projenizin ayarlar\u0131nda bir \"Build Hook\" (Derleme Kancas\u0131) olu\u015fturun. Bu size benzersiz bir URL verecektir.<\/li>\n<li><strong>WordPress'te Webhook Eklentisi Kullanma:<\/strong> WordPress sitenize \"WP Webhooks\" veya benzeri bir eklenti y\u00fckleyin.<\/li>\n<li><strong>Webhook'u Yap\u0131land\u0131rma:<\/strong> Bu eklenti arac\u0131l\u0131\u011f\u0131yla, Netlify\/Vercel'den ald\u0131\u011f\u0131n\u0131z Build Hook URL'sini girin. Olay tetikleyicisi olarak \"Post Published\" (Yaz\u0131 Yay\u0131nland\u0131) veya \"Post Updated\" (Yaz\u0131 G\u00fcncellendi) gibi se\u00e7enekleri belirleyin.<\/li>\n<\/ol>\n<p>Bu yap\u0131land\u0131rma sayesinde, WordPress'te herhangi bir i\u00e7erik de\u011fi\u015fikli\u011fi yapt\u0131\u011f\u0131n\u0131zda, WordPress otomatik olarak Build Hook URL'sine bir istek g\u00f6nderir, bu da Gatsby sitenizin yeni i\u00e7erikle yeniden derlenmesini ve da\u011f\u0131t\u0131lmas\u0131n\u0131 tetikler. B\u00f6ylece, WordPress'i bir headless CMS olarak kullanman\u0131n t\u00fcm avantajlar\u0131ndan faydalan\u0131rs\u0131n\u0131z.<\/p>\n<blockquote><p>\n  Uzman \u0130pucu: Da\u011f\u0131t\u0131m platformlar\u0131n\u0131n sundu\u011fu \"Preview Deploys\" (\u00d6nizleme Da\u011f\u0131t\u0131mlar\u0131) \u00f6zelli\u011fini kullanarak, her \u00e7ekme iste\u011fi (Pull Request) i\u00e7in ayr\u0131 bir \u00f6nizleme URL'si olu\u015fturun. Bu sayede, kod de\u011fi\u015fikliklerini canl\u0131ya almadan \u00f6nce test edebilir ve onaylayabilirsiniz. Bu, hatalar\u0131 minimuma indirerek \"ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131\" koruman\u0131za yard\u0131mc\u0131 olur. Ayr\u0131ca, \u00f6zel alan ad\u0131n\u0131z\u0131 platforma ba\u011flamay\u0131 ve SSL sertifikas\u0131n\u0131 (genellikle \u00fccretsiz olarak sunulur) etkinle\u015ftirmeyi unutmay\u0131n.\n<\/p><\/blockquote>\n<p>Bu ad\u0131mlarla, Gatsby sitenizi g\u00fcvenilir bir \u015fekilde canl\u0131ya alabilir ve WordPress'ten gelen i\u00e7erik g\u00fcncellemelerini otomatik olarak sitenize yans\u0131tabilirsiniz. Bu, size hem h\u0131z hem de bak\u0131m kolayl\u0131\u011f\u0131 sa\u011flayacakt\u0131r.<\/p>\n<h2>\u0130leri Seviye Optimizasyonlar ve Deneyimli Kullan\u0131c\u0131lar \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/h2>\n<p>WordPress'ten Gatsby'ye ba\u015far\u0131l\u0131 bir ge\u00e7i\u015f yapt\u0131n\u0131z ve siteniz art\u0131k h\u0131zl\u0131, g\u00fcvenli ve modern. Ancak Gatsby'nin potansiyelini tam olarak kullanmak ve sitenizi bir sonraki seviyeye ta\u015f\u0131mak i\u00e7in baz\u0131 ileri d\u00fczey optimizasyonlar ve teknikler mevcuttur. Bu b\u00f6l\u00fcm, sitenizin performans\u0131n\u0131, SEO'sunu ve geli\u015ftirici deneyimini daha da art\u0131racak ipu\u00e7lar\u0131n\u0131 sunmaktad\u0131r.<\/p>\n<h3>Gatsby Image ile Resim Optimizasyonu ve Lazy Loading<\/h3>\n<p>Gatsby Image, Gatsby'nin en g\u00fc\u00e7l\u00fc eklentilerinden biridir ve web sitelerinin en b\u00fcy\u00fck performans darbo\u011fazlar\u0131ndan biri olan g\u00f6rselleri otomatik olarak optimize eder. WordPress'ten gelen g\u00f6rselleri bile etkili bir \u015fekilde y\u00f6netir.<\/p>\n<ul>\n<li><strong>Otomatik Boyutland\u0131rma ve Format D\u00f6n\u00fc\u015f\u00fcm\u00fc:<\/strong> Gatsby Image, g\u00f6rsellerinizi farkl\u0131 boyutlarda (responsive i\u00e7in) ve modern formatlarda (WebP, AVIF) olu\u015fturur. Bu, taray\u0131c\u0131n\u0131n destekledi\u011fi en uygun format\u0131 kullanmas\u0131n\u0131 sa\u011flayarak dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcr.<\/li>\n<li><strong>Lazy Loading:<\/strong> G\u00f6rseller, kullan\u0131c\u0131 ekran\u0131na yakla\u015fana kadar y\u00fcklenmez. Bu, ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini dramatik \u015fekilde azalt\u0131r.<\/li>\n<li><strong>Placeholderler:<\/strong> G\u00f6rsel y\u00fcklenirken d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir placeholder veya bulan\u0131k bir efekti g\u00f6stererek kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/li>\n<\/ul>\n<p><code>gatsby-config.js<\/code> dosyan\u0131zda <code>gatsby-plugin-image<\/code>, <code>gatsby-plugin-sharp<\/code> ve <code>gatsby-transformer-sharp<\/code> eklentilerinin kurulu ve yap\u0131land\u0131r\u0131lm\u0131\u015f oldu\u011fundan emin olun. Daha sonra, React bile\u015fenlerinizde <code><img><\/code> etiketi yerine <code><GatsbyImage><\/code> bile\u015fenini kullan\u0131n ve GraphQL sorgular\u0131n\u0131zda <code>gatsbyImage<\/code> alan\u0131n\u0131 talep edin.<\/p>\n<pre><code>\n\/\/ GraphQL sorgusunda gatsbyImage kullan\u0131m\u0131\nfeaturedImage {\n  node {\n    altText\n    gatsbyImage(\n      width: 800, \n      placeholder: BLURRED, \n      formats: [AUTO, WEBP, AVIF]\n    )\n  }\n}\n<\/pre>\n<p><\/code><\/p>\n<h3>Gatsby SEO Optimizasyonlar\u0131 ve Schema Markup Entegrasyonu<\/h3>\n<p>Gatsby, do\u011fas\u0131 gere\u011fi h\u0131zl\u0131 oldu\u011fu i\u00e7in SEO dostudur. Ancak ek optimizasyonlarla arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 daha da iyile\u015ftirebilirsiniz.<\/p>\n<ul>\n<li><strong>React Helmet:<\/strong> Sayfa ba\u015fl\u0131klar\u0131, meta a\u00e7\u0131klamalar\u0131 ve di\u011fer head etiketlerini dinamik olarak y\u00f6netmek i\u00e7in <code>gatsby-plugin-react-helmet<\/code> kullan\u0131n.<\/li>\n<li><strong>Sitemap ve Robots.txt:<\/strong> <code>gatsby-plugin-sitemap<\/code> ile otomatik bir sitemap olu\u015fturun ve <code>robots.txt<\/code> dosyan\u0131z\u0131 do\u011fru \u015fekilde yap\u0131land\u0131r\u0131n.<\/li>\n<li><strong>Schema Markup:<\/strong> Makale, \u00fcr\u00fcn veya di\u011fer i\u00e7erik t\u00fcrleri i\u00e7in Schema.org i\u015faretlemesi ekleyerek arama motorlar\u0131na i\u00e7eri\u011finiz hakk\u0131nda daha fazla bilgi verin. Bu, zengin sonu\u00e7lar (rich snippets) elde etmenize yard\u0131mc\u0131 olabilir.<\/li>\n<\/ul>\n<h3>Headless CMS Se\u00e7enekleri ve WordPress'in \u00d6tesi<\/h3>\n<p>WordPress'i bir headless CMS olarak kullanmak harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Ancak Gatsby, Contentful, Sanity.io, Strapi veya DatoCMS gibi di\u011fer headless CMS \u00e7\u00f6z\u00fcmleriyle de sorunsuz entegre olabilir. Bu platformlar genellikle daha modern API'ler ve geli\u015ftirici dostu \u00f6zellikler sunar.<\/p>\n<ul>\n<li><strong>Esneklik:<\/strong> \u0130\u00e7eri\u011fi istedi\u011finiz herhangi bir veri format\u0131nda (JSON, Markdown) depolayabilir ve Gatsby ile \u00e7ekebilirsiniz.<\/li>\n<li><strong>Geli\u015ftirici Deneyimi:<\/strong> Genellikle daha iyi API dok\u00fcmantasyonu ve SDK'lar sunarlar.<\/li>\n<li><strong>\u00d6l\u00e7eklenebilirlik:<\/strong> \u0130\u00e7erik sunumu i\u00e7in ayr\u0131 bir veritaban\u0131 veya sunucu altyap\u0131s\u0131na ihtiya\u00e7 duymazlar.<\/li>\n<\/ul>\n<p>E\u011fer ileride WordPress'ten tamamen ayr\u0131lmay\u0131 d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z, bu headless CMS se\u00e7eneklerini de\u011ferlendirmek, i\u00e7erik y\u00f6netimi deneyiminizi daha da geli\u015ftirebilir.<\/p>\n<h3>Uygulamal\u0131 Vaka Analizi: B\u00fcy\u00fck Bir Blogun D\u00f6n\u00fc\u015f\u00fcm\u00fc<\/h3>\n<p>Hayali bir senaryoda, \"Kodlama Dura\u011f\u0131\" ad\u0131nda, on binlerce blog yaz\u0131s\u0131 ve y\u00fcz binlerce ayl\u0131k ziyaret\u00e7isi olan b\u00fcy\u00fck bir teknoloji blogunun WordPress'ten Gatsby'ye ge\u00e7i\u015f s\u00fcrecini ele alal\u0131m.<\/p>\n<ol>\n<li><strong>Sorun:<\/strong> Blog, yava\u015f y\u00fckleme s\u00fcreleri (ortalama 5-7 saniye), s\u0131k s\u0131k sunucu \u00e7\u00f6k\u00fc\u015fleri ve g\u00fcvenlik a\u00e7\u0131klar\u0131 nedeniyle SEO s\u0131ralamalar\u0131nda d\u00fc\u015f\u00fc\u015f ya\u015f\u0131yor ve kullan\u0131c\u0131lar\u0131n\u0131 kaybediyordu. Bar\u0131nd\u0131rma maliyetleri y\u00fcksekti.<\/li>\n<li><strong>\u00c7\u00f6z\u00fcm:<\/strong> Gatsby'ye ge\u00e7i\u015f karar\u0131 al\u0131nd\u0131.\n<ul>\n<li><strong>\u0130\u00e7erik Aktar\u0131m\u0131:<\/strong> <code>gatsby-source-wordpress<\/code> kullanarak t\u00fcm yaz\u0131lar, kategoriler, etiketler ve medya dosyalar\u0131 \u00e7ekildi.<\/li>\n<li><strong>Optimizasyon:<\/strong> Gatsby Image ile t\u00fcm g\u00f6rseller otomatik olarak optimize edildi, WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc ve lazy-load edildi. Bu, sayfa boyutunu %60 azaltt\u0131.<\/li>\n<li><strong>Yeniden Tasar\u0131m:<\/strong> Modern bir React tabanl\u0131 tema s\u0131f\u0131rdan olu\u015fturuldu, bu da daha iyi bir mobil deneyim ve eri\u015filebilirlik sa\u011flad\u0131.<\/li>\n<li><strong>Da\u011f\u0131t\u0131m:<\/strong> Site Netlify \u00fczerinde bar\u0131nd\u0131r\u0131ld\u0131. WordPress'teki i\u00e7erik g\u00fcncellemeleri i\u00e7in Netlify Build Hooks kullan\u0131larak otomatik da\u011f\u0131t\u0131m sa\u011fland\u0131.<\/li>\n<li><strong>Yorumlar:<\/strong> WordPress yorum sistemi yerine Disqus entegrasyonuna gidildi.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Sonu\u00e7:<\/strong>\n<ul>\n<li><strong>H\u0131z:<\/strong> Ortalama y\u00fckleme s\u00fcresi 500 ms'nin alt\u0131na d\u00fc\u015ft\u00fc.<\/li>\n<li><strong>G\u00fcvenlik:<\/strong> Dinamik veritaban\u0131 sald\u0131r\u0131lar\u0131na kar\u015f\u0131 tam koruma sa\u011fland\u0131.<\/li>\n<li><strong>SEO:<\/strong> H\u0131z art\u0131\u015f\u0131 ve geli\u015ftirilmi\u015f mobil deneyim sayesinde arama motoru s\u0131ralamalar\u0131nda %25 art\u0131\u015f g\u00f6r\u00fcld\u00fc.<\/li>\n<li><strong>Maliyet:<\/strong> Sunucu maliyetleri %80 oran\u0131nda d\u00fc\u015ft\u00fc.<\/li>\n<li><strong>Kullan\u0131c\u0131 Deneyimi:<\/strong> Kullan\u0131c\u0131lar, h\u0131zl\u0131 ve ak\u0131c\u0131 site deneyiminden memnun kald\u0131, hemen \u00e7\u0131kma oranlar\u0131 d\u00fc\u015ft\u00fc.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Bu vaka analizi, Gatsby'ye ge\u00e7i\u015fin sadece teorik bir fayda sa\u011flamad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda somut i\u015f sonu\u00e7lar\u0131 ve \u00f6nemli teknik iyile\u015ftirmeler getirdi\u011fini g\u00f6stermektedir.<\/p>\n<blockquote><p>\n  Uzman \u0130pucu: Sitenizin performans\u0131n\u0131 izlemek i\u00e7in Google Lighthouse, WebPageTest ve Google Search Console gibi ara\u00e7lar\u0131 d\u00fczenli olarak kullan\u0131n. Bu ara\u00e7lardan gelen veriler, s\u00fcrekli iyile\u015ftirmeler yapman\u0131za ve sitenizin en \u00fcst d\u00fczeyde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.\n<\/p><\/blockquote>\n<p>Bu ileri d\u00fczey ipu\u00e7lar\u0131 ve vaka analizi, Gatsby ile neler ba\u015farabilece\u011finizi ve statik web sitenizin performans\u0131n\u0131 nas\u0131l s\u00fcrekli olarak optimize edebilece\u011finizi ortaya koymaktad\u0131r. WordPress'ten Gatsby'ye ge\u00e7i\u015f, sadece bir teknoloji de\u011fi\u015fikli\u011fi de\u011fil, ayn\u0131 zamanda daha h\u0131zl\u0131, daha g\u00fcvenli ve daha esnek bir web gelece\u011fine yap\u0131lan bir yat\u0131r\u0131md\u0131r.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>WordPress'ten Gatsby'ye ge\u00e7i\u015f s\u00fcreci, ilk bak\u0131\u015fta karma\u015f\u0131k g\u00f6r\u00fcnse de, do\u011fru ad\u0131mlar\u0131 izledi\u011finizde ve gerekli \u00f6n haz\u0131rl\u0131klar\u0131 yapt\u0131\u011f\u0131n\u0131zda \"ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden\" ba\u015far\u0131yla tamamlanabilir. Bu rehberde, neden bu de\u011fi\u015fimin \u00f6nemli oldu\u011funu, ge\u00e7i\u015f \u00f6ncesi nas\u0131l bir planlama yapman\u0131z gerekti\u011fini, WordPress verilerinizi nas\u0131l \u00e7ekece\u011finizi, Gatsby projenizi nas\u0131l kuraca\u011f\u0131n\u0131z\u0131, i\u00e7eri\u011finizi nas\u0131l temaland\u0131raca\u011f\u0131n\u0131z\u0131 ve son olarak sitenizi nas\u0131l canl\u0131ya alaca\u011f\u0131n\u0131z\u0131 detayl\u0131 bir \u015fekilde ele ald\u0131k. Gatsby'nin sundu\u011fu h\u0131z, g\u00fcvenlik ve geli\u015ftirici deneyimi, modern web d\u00fcnyas\u0131nda rekabet\u00e7i kalmak i\u00e7in vazge\u00e7ilmez avantajlard\u0131r.<\/p>\n<p>WordPress, i\u00e7erik y\u00f6netiminde hala g\u00fc\u00e7l\u00fc bir oyuncu olmaya devam etse de, Gatsby ile birle\u015fti\u011finde ortaya \u00e7\u0131kan headless mimari, her iki d\u00fcnyan\u0131n en iyi y\u00f6nlerini bir araya getirerek, sadece h\u0131zl\u0131 de\u011fil, ayn\u0131 zamanda bak\u0131m\u0131 kolay ve gelece\u011fe haz\u0131r web siteleri olu\u015fturman\u0131z\u0131 sa\u011flar. Bu d\u00f6n\u00fc\u015f\u00fcm, sitenizin performans\u0131n\u0131 art\u0131rman\u0131n yan\u0131 s\u0131ra, daha esnek bir geli\u015ftirme ortam\u0131 ve daha iyi bir kullan\u0131c\u0131 deneyimi sunarak uzun vadede yat\u0131r\u0131m\u0131n\u0131z\u0131n kar\u015f\u0131l\u0131\u011f\u0131n\u0131 fazlas\u0131yla verecektir.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<p>\u0130\u015fte WordPress'ten Gatsby'ye ge\u00e7i\u015fle ilgili en s\u0131k kar\u015f\u0131la\u015f\u0131lan sorulardan baz\u0131lar\u0131:<\/p>\n<ol>\n<li>\n        <strong>S: WordPress'ten Gatsby'ye ge\u00e7i\u015f ne kadar s\u00fcrer?<\/strong><br \/>\n        <strong>C:<\/strong> Bu, sitenizin karma\u015f\u0131kl\u0131\u011f\u0131na, i\u00e7erik miktar\u0131na ve geli\u015ftirme ekibinizin deneyimine ba\u011fl\u0131d\u0131r. K\u00fc\u00e7\u00fck bir blog sitesi birka\u00e7 g\u00fcn veya hafta i\u00e7inde tamamlanabilirken, \u00e7ok say\u0131da \u00f6zel g\u00f6nderi t\u00fcr\u00fc, karma\u015f\u0131k eklenti ba\u011f\u0131ml\u0131l\u0131klar\u0131 veya yo\u011fun bir i\u00e7erik bar\u0131nd\u0131ran b\u00fcy\u00fck siteler birka\u00e7 ay s\u00fcrebilir. \u00d6nceden iyi bir planlama yapmak s\u00fcreyi k\u0131saltacakt\u0131r.\n    <\/li>\n<li>\n        <strong>S: Ge\u00e7i\u015f yaparken SEO s\u0131ralamalar\u0131m\u0131 kaybetme riskim var m\u0131?<\/strong><br \/>\n        <strong>C:<\/strong> Do\u011fru ad\u0131mlar\u0131 izledi\u011finizde (URL yap\u0131s\u0131n\u0131 korumak, 301 y\u00f6nlendirmeleri yapmak, meta etiketlerini do\u011fru yap\u0131land\u0131rmak, sitemap ve robots.txt kullanmak) SEO s\u0131ralamalar\u0131n\u0131z\u0131 kaybetme riski minimumdur. Hatta Gatsby'nin do\u011fal h\u0131z avantaj\u0131 sayesinde SEO performans\u0131n\u0131zda art\u0131\u015f bile g\u00f6rebilirsiniz.\n    <\/li>\n<li>\n        <strong>S: WordPress'teki t\u00fcm eklentilerimin Gatsby'de bir kar\u015f\u0131l\u0131\u011f\u0131 olacak m\u0131?<\/strong><br \/>\n        <strong>C:<\/strong> Hay\u0131r. Gatsby statik bir yap\u0131ya sahip oldu\u011fu i\u00e7in, WordPress'in dinamik eklentilerinin \u00e7o\u011fu (\u00f6rne\u011fin \u00f6nbellekleme, g\u00fcvenlik duvar\u0131, dinamik form i\u015fleme) do\u011frudan bir kar\u015f\u0131l\u0131\u011fa sahip olmayacakt\u0131r. Bu i\u015flevselliklerin \u00e7o\u011fu ya Gatsby eklentileriyle (\u00f6rne\u011fin SEO i\u00e7in) ya da \u00fc\u00e7\u00fcnc\u00fc taraf headless hizmetleriyle (\u00f6rne\u011fin formlar, yorumlar i\u00e7in Disqus) sa\u011flan\u0131r. Bu nedenle, eklenti analizi yapmak kritik \u00f6neme sahiptir.\n    <\/li>\n<li>\n        <strong>S: WordPress'i bir headless CMS olarak kullanmak ne anlama geliyor?<\/strong><br \/>\n        <strong>C:<\/strong> Headless CMS, i\u00e7eri\u011fi bir API arac\u0131l\u0131\u011f\u0131yla sunan bir i\u00e7erik y\u00f6netim sistemidir ve sunum katman\u0131ndan (front-end) ayr\u0131lm\u0131\u015ft\u0131r. WordPress'i headless olarak kullan\u0131rken, WordPress sadece i\u00e7eri\u011fi depolayan ve y\u00f6neten bir arka u\u00e7 (backend) g\u00f6revi g\u00f6r\u00fcrken, Gatsby i\u00e7eri\u011fi bu API \u00fczerinden \u00e7eker ve front-end'i (kullan\u0131c\u0131lar\u0131n g\u00f6rd\u00fc\u011f\u00fc siteyi) olu\u015fturur. Bu, i\u00e7eri\u011finizi farkl\u0131 platformlarda (web, mobil uygulama vb.) daha esnek bir \u015fekilde kullanman\u0131za olanak tan\u0131r.\n    <\/li>\n<li>\n        <strong>S: Gatsby projemde WordPress'teki gibi bir y\u00f6netici paneli olacak m\u0131?<\/strong><br \/>\n        <strong>C:<\/strong> Hay\u0131r. Gatsby projeniz sadece \u00f6n y\u00fcz\u00fc (front-end) olu\u015fturur ve statik dosyalardan olu\u015fur. Y\u00f6netici paneli olarak hala WordPress'i kullanacaks\u0131n\u0131z. \u0130\u00e7erik olu\u015fturma ve d\u00fczenleme i\u015flemleri WordPress y\u00f6netici panelinde ger\u00e7ekle\u015fmeye devam edecek, Gatsby ise bu g\u00fcncel i\u00e7eri\u011fi \u00e7ekip sitenizi yeniden derleyecektir.\n    <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress&#8217;in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[133],"tags":[],"class_list":{"0":"post-30474","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-php","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress&#039;ten Gatsby&#039;ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n<\/title>\n<meta name=\"description\" content=\"Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress&#039;in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa dayal\u0131 modern web d\u00fcnyas\u0131nda bazen yeterli gelmeyebilir. \u0130\u015fte tam da bu noktada, Gatsby gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu devreye giriyor. Peki, milyonlarca sitenin g\u00fcvendi\u011fi WordPress&#039;ten modern, h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby altyap\u0131s\u0131na ge\u00e7i\u015f yapmak, \u00f6zellikle de t\u00fcm i\u00e7eriklerinizi kaybetmeden ve en \u00f6nemlisi &quot;ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden&quot; nas\u0131l m\u00fcmk\u00fcn olur? Bu kapsaml\u0131 rehberde, bu zorlu ama bir o kadar da \u00f6d\u00fcllendirici s\u00fcreci ad\u0131m ad\u0131m inceleyece\u011fiz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress&#039;ten Gatsby&#039;ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n\" \/>\n<meta property=\"og:description\" content=\"Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress&#039;in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa dayal\u0131 modern web d\u00fcnyas\u0131nda bazen yeterli gelmeyebilir. \u0130\u015fte tam da bu noktada, Gatsby gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu devreye giriyor. Peki, milyonlarca sitenin g\u00fcvendi\u011fi WordPress&#039;ten modern, h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby altyap\u0131s\u0131na ge\u00e7i\u015f yapmak, \u00f6zellikle de t\u00fcm i\u00e7eriklerinizi kaybetmeden ve en \u00f6nemlisi &quot;ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden&quot; nas\u0131l m\u00fcmk\u00fcn olur? Bu kapsaml\u0131 rehberde, bu zorlu ama bir o kadar da \u00f6d\u00fcllendirici s\u00fcreci ad\u0131m ad\u0131m inceleyece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-28T05:01:18+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"32 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"WordPress&#8217;ten Gatsby&#8217;ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n\",\"datePublished\":\"2025-09-28T05:01:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/\"},\"wordCount\":5616,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"PHP\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/\",\"name\":\"WordPress'ten Gatsby'ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-28T05:01:18+00:00\",\"description\":\"Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress'in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa dayal\u0131 modern web d\u00fcnyas\u0131nda bazen yeterli gelmeyebilir. \u0130\u015fte tam da bu noktada, Gatsby gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu devreye giriyor. Peki, milyonlarca sitenin g\u00fcvendi\u011fi WordPress'ten modern, h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby altyap\u0131s\u0131na ge\u00e7i\u015f yapmak, \u00f6zellikle de t\u00fcm i\u00e7eriklerinizi kaybetmeden ve en \u00f6nemlisi \\\"ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden\\\" nas\u0131l m\u00fcmk\u00fcn olur? Bu kapsaml\u0131 rehberde, bu zorlu ama bir o kadar da \u00f6d\u00fcllendirici s\u00fcreci ad\u0131m ad\u0131m inceleyece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress&#8217;ten Gatsby&#8217;ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress'ten Gatsby'ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n","description":"Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress'in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa dayal\u0131 modern web d\u00fcnyas\u0131nda bazen yeterli gelmeyebilir. \u0130\u015fte tam da bu noktada, Gatsby gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu devreye giriyor. Peki, milyonlarca sitenin g\u00fcvendi\u011fi WordPress'ten modern, h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby altyap\u0131s\u0131na ge\u00e7i\u015f yapmak, \u00f6zellikle de t\u00fcm i\u00e7eriklerinizi kaybetmeden ve en \u00f6nemlisi \"ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden\" nas\u0131l m\u00fcmk\u00fcn olur? Bu kapsaml\u0131 rehberde, bu zorlu ama bir o kadar da \u00f6d\u00fcllendirici s\u00fcreci ad\u0131m ad\u0131m inceleyece\u011fiz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/","og_locale":"tr_TR","og_type":"article","og_title":"WordPress'ten Gatsby'ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n","og_description":"Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress'in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa dayal\u0131 modern web d\u00fcnyas\u0131nda bazen yeterli gelmeyebilir. \u0130\u015fte tam da bu noktada, Gatsby gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu devreye giriyor. Peki, milyonlarca sitenin g\u00fcvendi\u011fi WordPress'ten modern, h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby altyap\u0131s\u0131na ge\u00e7i\u015f yapmak, \u00f6zellikle de t\u00fcm i\u00e7eriklerinizi kaybetmeden ve en \u00f6nemlisi \"ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden\" nas\u0131l m\u00fcmk\u00fcn olur? Bu kapsaml\u0131 rehberde, bu zorlu ama bir o kadar da \u00f6d\u00fcllendirici s\u00fcreci ad\u0131m ad\u0131m inceleyece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-28T05:01:18+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"32 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"WordPress&#8217;ten Gatsby&#8217;ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n","datePublished":"2025-09-28T05:01:18+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/"},"wordCount":5616,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["PHP"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/","url":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/","name":"WordPress'ten Gatsby'ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-28T05:01:18+00:00","description":"Geleneksel web sitelerinin h\u0131z\u0131, g\u00fcvenli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi konusunda ya\u015fad\u0131\u011f\u0131n\u0131z hayal k\u0131r\u0131kl\u0131klar\u0131ndan s\u0131k\u0131ld\u0131n\u0131z m\u0131? WordPress'in esnekli\u011fi tart\u0131\u015f\u0131lmaz, ancak performansa dayal\u0131 modern web d\u00fcnyas\u0131nda bazen yeterli gelmeyebilir. \u0130\u015fte tam da bu noktada, Gatsby gibi g\u00fc\u00e7l\u00fc bir statik site olu\u015fturucu devreye giriyor. Peki, milyonlarca sitenin g\u00fcvendi\u011fi WordPress'ten modern, h\u0131zl\u0131 ve g\u00fcvenli bir Gatsby altyap\u0131s\u0131na ge\u00e7i\u015f yapmak, \u00f6zellikle de t\u00fcm i\u00e7eriklerinizi kaybetmeden ve en \u00f6nemlisi \"ak\u0131l sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 kaybetmeden\" nas\u0131l m\u00fcmk\u00fcn olur? Bu kapsaml\u0131 rehberde, bu zorlu ama bir o kadar da \u00f6d\u00fcllendirici s\u00fcreci ad\u0131m ad\u0131m inceleyece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/wordpressten-gatsbyye-gecis-akil-sagliginizi-kaybetmeden-statik-web-sitesi-gucune-ulasin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress&#8217;ten Gatsby&#8217;ye Ge\u00e7i\u015f: Ak\u0131l Sa\u011fl\u0131\u011f\u0131n\u0131z\u0131 Kaybetmeden Statik Web Sitesi G\u00fcc\u00fcne Ula\u015f\u0131n"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30474"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30474\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}