Öğretici: Sitenizi WordPress ve Gatsby ile Oluşturun

WordPress ile statik bir web sitesi oluşturmak, başsız WordPress ile mümkündür. Statik dosyalar sunucunuza kaydedildiğinden, bu tür web siteleri daha hızlı yüklenir. Soru şu ki, WordPress ile başsız bir web sitesini nasıl kurarsınız?

Gatsby gibi bir statik site oluşturucunun devreye girdiği yer burasıdır. Bu oluşturucular, WordPress'te zengin özelliklere sahip statik web siteleri oluşturmanıza yardımcı olur. Ancak, bunlardan en iyi şekilde yararlanmak için bunları WordPress kurulumunuzla doğru bir şekilde entegre etmeniz gerekir. Bu entegrasyon, WordPress Gatsby'nin yüklenmesini, oluşturulmasını ve yapılandırılmasını içerir.

Bu yazıda, Gatsby'nin ne olduğuna ve onu neden WordPress ile kullanmak isteyebileceğinize bakacağız. Daha sonra Gatsby'yi nasıl kullanacağınızı ve kullanmanız gerekip gerekmediğini ayrıntılarıyla açıklayacağız. Başlayalım!

Gatsby Nedir?

Basitçe söylemek gerekirse, Gatsby statik bir site üreticisidir. Bu, Gatsby'nin web sitenizin sunucusuna yüklenen statik HTML dosyalarını oluşturduğu anlamına gelir. Bir ziyaretçi sitenize geldiğinde, WordPress'in genellikle sunduğu dinamik içerik yerine bu statik dosyalar tarayıcılarına sunulur.

Bu dosyaları oluşturmak için Gatsby, web sitenize ilişkin verileri çeşitli kaynaklardan alır. Buna GraphQL aracılığıyla mevcut web siteleri, API çağrıları ve düz dosyalar dahildir. Statik web siteniz daha sonra ayarladığınız yapılandırmalara göre oluşturulur.

Diğer statik site oluşturucularla karşılaştırıldığında, Gatsby nispeten yenidir. Ancak bu, birçok şirketin bunu denemesini engellemedi. En büyük örneklerden biri, Gatsby tarafından desteklenen Airbnb Engineering & Data Science blogudur.

Neden Gatsby'yi WordPress ile Kullanmalı?

WordPress ile statik bir web sitesi oluşturmak mümkün olduğundan, neden WordPress ve Gatsby'yi birlikte kullanmanız gerektiğini merak edebilirsiniz. WordPress kendi başına güçlü olsa da, Gatsby daha yüksek hızlar ve daha düşük sunucu maliyetleri dahil olmak üzere web siteniz için isteyebileceğiniz bazı avantajlar sunar. Gatsby'nin avantajlarını ve dezavantajlarını anlamak, bilinçli bir karar vermenize yardımcı olabilir.

Gatsby Kullanmanın Artıları

Gatsby, herhangi bir web sitesinin yararlanabileceği bir dizi avantaj sunar:

• Daha hızlı yükleme hızları. Statik web siteleri dinamik olanlardan daha hızlı yüklenir ve bu, Arama Motoru Optimizasyonunuzu (SEO) etkileyebilir. Sayfa yükleme hızları, arama motorları tarafından kullanılan bir sinyaldir ve web sitenizin hemen çıkma oranlarını etkiler.
• Azaltılmış sunucu maliyetleri. Dinamik web siteleri, uyumlu teknoloji yığınları ve sunucular gerektirir. Statik web siteleri bunu yapmaz ve bunları herhangi bir sunucuda barındırabilirsiniz. Bu, sunucu maliyetlerinizi azaltabilir.
• Geliştirilmiş güvenlik. Statik web siteleri gelişmiş güvenlik sağlar. Sunulan statik HTML dosyaları, bilgisayar korsanlarının üzerinde çalışacakları pek bir şey sunmaz. Bu dosyalar herhangi bir nedenle kaybolursa, bunları Gatsby ile de yeniden oluşturabilirsiniz.

Web siteniz tüm bu avantajlardan yararlanabilir. Ancak, bunları Gatsby kullanmanın dezavantajlarına karşı tartmalısınız.

Gatsby Kullanmanın Eksileri

Hiçbir yazılım sistemi mükemmel değildir ve Gatsby'nin bilmeniz gereken birkaç dezavantajı vardır:

• Teknik bilgi gerekli. Gatsby, ReactJS üzerine kuruludur ve GraphQL kullanır. Bunu kullanmak için biraz JavaScript bilgisi gereklidir. Ayrıca bir web sitesi oluşturmak için temel GraphQL bilgisine sahip olmanız gerekir.
• Dinamik içerik yok. Gatsby yalnızca statik web siteleri oluşturur. İletişim formları gibi dinamik içerik istiyorsanız, bunların bir üçüncü taraf sağlayıcı aracılığıyla yönlendirilmesi gerekir.

Birçok geliştirici, Gatsby'nin artılarının eksilerinden daha ağır bastığını görse de, her ikisinin de önceden anlaşılması önemlidir.

Gatsby'yi WordPress ile Nasıl Kullanırım?

Gatsby'yi kurmak biraz zaman alabilir ve uygulamanız gereken belirli adımlar vardır. Sitenizi oluşturmaya ve yapılandırmaya başlamadan önce Gatsby'yi kurmanız gerekir. Ek olarak, yapılması gereken birkaç başlangıç ​​değerlendirmesi vardır.

1. Adım: Ön Koşulları Kontrol Edin

Gatsby'yi kurmadan önce, web sitesi ortamınıza NodeJS ve npm kurmanız gerekir. Kod yönetimi için de Git gereklidir. Önkoşulları yükleme adımları, çalıştırdığınız işletim sistemine bağlı olarak değişiklik gösterir.

Windows'unuz varsa, indirme sayfasındaki yükleyici aracılığıyla NodeJS ve Git'i yükleyebilirsiniz. Aynı şey Mac ile de mümkündür. Ancak, Linux çalıştırıyorsanız, apt gibi bir paket yükleyici gereklidir.

2. Adım: Gatsby'yi yükleyin

NodeJS ve Git'i kurduktan sonra Gatsby'yi kurmaya başlayabilirsiniz. Bunu yapmanın en kolay yöntemi, yazılım terminalinizde aşağıdaki komutu kullanmaktır:

 npm install -g gatsby-cli

Bu komut yükleyiciyi otomatik olarak çalıştırır. Gatsby'yi kurmadan önce tüm bağımlılıkları indirip kuracaktır. Bu tamamlandığında, ilk Gatsby web sitenizi oluşturmaya başlayabilirsiniz.

3. Adım: Bir Gatsby Sitesi Oluşturun

Gatsby web sitenizi oluşturmak için aşağıdaki komutu çalıştırmanız gerekir:

 gatsby new gatsby-site

Bu komut, Gatsby başlangıç ​​şablonunu kopyalar ve onu /gatsby-wordpress dizinine yerleştirir. Klonlama ve kurulum tamamlandıktan sonra sitenin geliştirme sürümünü açabilirsiniz. Bu, aşağıdaki komut kullanılarak yapılır:

 gatsby develop

Geliştirme ortamı çalışırken, yeni web sitenizi yerel olarak ziyaret edebilirsiniz. Web tarayıcınıza http://localhost:8000 girin ve varsayılan şablonunuz açılmalıdır.

Bu sayfayı görürseniz, web sitenizi oluşturmaya başlayabilirsiniz. Bu, statik dosyaları bu web sitesinin genel dizininde oluşturmak anlamına gelir. Aşağıdaki komut, tohse statik dosyalarının üretimini otomatik olarak başlatır:

 gatsby build

Bu komut ayrıca web siteniz için ön yönlendirme JavaScript kod paketlerini de oluşturur. Ardından, yeni web sitenizi yerel olarak görüntülemek için serve komutunu kullanabilirsiniz:

 gatsby serve

Bu komut yalnızca build komutunu zaten çalıştırdıysanız çalışacaktır.

Adım 4: Gatsby'yi WordPress'e Bağlayın

Artık temel bir statik web siteniz var, ancak onu WordPress ile entegre etmeniz gerekiyor. Bu, Gatsby sitenizi WordPress blogunuzun adresine yönlendirerek geliştirme sunucusunu çalıştırdığınızda en son verileri çekmesini sağlar. Bağlandıktan sonra Gatsby, mevcut WordPress şablonunuzu temel alan statik bir web sitesi oluşturacaktır.

İkisini birbirine bağlamak için WordPress için Gatsby eklentisini yüklemeniz gerekir. Aşağıdaki komut bununla ilgilenecektir:

 npm install gatsby-source-wordpress

Eklentiyi yükledikten sonra Gatsby'yi yapılandırmaya başlayabilirsiniz.

5. Adım: Gatsby'yi Yapılandırın

Gatsby'yi yapılandırmak için gatsby-config.js dosyasıyla çalışmanız gerekir. O dosyaya aşağıdaki kodu ekleyin:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

WordPress web sitenize işaret etmek için bu kodu güncelleyin. Web siteniz yerel olarak barındırılıyorsa, baseUrl'den sonra web sitenizin URL'si yerine localhost:8888/wordpress kullanabilirsiniz. Dosyayı kaydettikten sonra, sayfa şablonlarınızı oluşturmanız gerekir.

6. Adım: Sayfa Şablonları Oluşturun

Sayfa şablonları oluşturmak, Gatsby'nin WordPress web sitenizdeki her sayfa için bir gönderi oluşturmasını sağlar. Kaynak eklenti, bu sayfalar için ihtiyacınız olan verileri WordPress'ten alacaktır, ancak tasarım şablonunu oluşturmanız gerekecektir.

gatsby-node.js dosyanıza aşağıdaki kodu ekleyin:

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

Tüm verileri WordPress'ten çağırdıktan sonra, Gatsby her gönderi için bir sayfa oluşturacaktır. Develop komutunu kullanarak, oluşturulan URL'yi kullanarak her yeni sayfaya gidebilirsiniz.

WordPress için Gatsby Kullanmalı mıyım?

Gatsby web sitenizin hızını ve güvenliğini artırabilse de herkes için doğru seçim olmayabilir. Web siteniz sık sık değişmeyen statik içeriğe sahipse, Gatsby faydalı olabilir. Ancak, web sitenizde dinamik içeriğe ihtiyacınız varsa, geleneksel WordPress daha iyi bir seçim olabilir.

WP Engine'de Sitenizden En Fazlasını Yapın

Gatsby, WordPress ile kolayca entegre edebileceğiniz etkili bir statik web sitesi üreticisidir. Sistemi kurmak ve yapılandırmak için izlemeniz gereken adımlar bulunmaktadır. Ayrıca başlamadan önce biraz Gatsby ve GraphQL bilgisine sahip olmanız gerekir.

Statik içerik, web sitenizin hızını ve güvenliğini artırabilir, ancak doğru ana bilgisayara da ihtiyacınız vardır. WP Engine, mükemmel bir dijital deneyim oluşturmak için web siteniz için en iyi kaynakları sunar. Bu, geliştirmeye odaklanmak için size daha fazla zaman bırakır!