WordPress ve Gatsby’yi kullanarak bir web sitesi nasıl oluşturulur (4 adımda)
Kafaları olmayan WordPress, içerikleri üzerinde daha fazla kontrol isteyen geliştiriciler arasında giderek daha popüler hale geliyor. Ancak, bir noktada başsız içerik yönetim sisteminiz (CMS) için bir ön uç yapmalısınız. Neyse ki, özel ön uç oluşturmada çok fazla karmaşıklığı ortadan kaldırabilecek araçlar var. WordPress Sumber Gatsby’nin entegrasyonundan en son sürümle, bu popüler statik site jeneratörünü başsız CMS’nizle eşleştirmek ve içeriğiniz için güzel bir halka açık yüz oluşturmak artık daha kolay. Bu makalede, Gatsby’nin ne olduğunu ve WordPress geliştiricileri için yeni entegrasyonun anlamı ne olduğunu keşfedeceğiz. Daha sonra WordPress ve Gatsby’nin statik site jeneratörünü kullanarak nasıl basit bir web sitesi oluşturacağınızı göstereceğiz. Başlayalım!
Gatsby çerçevesine giriş (ve neden kullanmak isteyebilirsiniz) Gatsby, GraphQL tarafından desteklenen statik bir reaksiyon tabanlı site jeneratörüdür. Bu, içerik oluşturduğu ve yönettiği bilinen WordPress’in arka ucunu kullanmaya devam ederken kendi ön ucunuzu tasarlama ve oluşturma özgürlüğü verir. Bu, Gatsby’nin çerçevesini başsız ayarlar yapmak isteyen WordPress geliştiricileri arasında popüler bir seçim haline getiriyor. Diğer bazı reaksiyon teknolojilerinden farklı olarak, Gatsby hıza odaklanmıştır. Bu sitenin üreticisi, performans için optimize edilmiş statik HTML dosyalarını kullanarak projenizi oluşturur.
Daha fazla performans geliştirme sağlamak için Gatsby yalnızca gerekli dosyaları içerir. Bu, yükleme sürenizi minimumda tutmaya yardımcı olurken, Gatsby’ye gerektiğinde ek kaynakları çağırma esnekliği sağlar. Sayfanızın açılış süresini azaltarak, Gatsby çerçevesi oranınızı azaltabilir ve insanları web sitelerinizi daha fazla ziyaret etmeye teşvik edebilir. Bu, sitenizde harcanan süre dahil olmak üzere ana metriği artırabilir ve daha fazla dönüşümü teşvik etmeye yardımcı olabilir. Ayrıca Google, içeriğin arama sonuçlarında nerede görüneceğini değerlendirirken sayfa hızını sıralama faktörü olarak kullandığını doğruladı. Gatsby gibi performansa odaklanan bir çözüm seçerek, arama motoru optimizasyonunda (SEO) bir artış yaşayabilirsiniz. Öte yandan, Gatsby’nin özellikle rekabetçi ön çerçeveye kıyasla zor bir üne sahip. Ancak, Gatsby ekibi geçtiğimiz günlerde WordPress Gatsby Sumber Gatsby’nin resmi entegrasyonunun artık istikrarlı olduğunu duyurdu. Bu eklentiyi WPGatsby eklentisi ve Gatsby WordPress Başlangıç Site Projesi ile bir kombinasyon halinde kullanarak, şimdi WordPress kurulumunuzdan veri çizmeyi ve Gatsby’yi kullanarak görüntülemeyi daha kolay bulacaksınız. WordPress ve Gatsby’yi kullanarak bir web sitesi nasıl oluşturulur (4 adımda) Şimdi Gatsby’nin ne olduğunu ve neden kullanmak isteyebileceğinizi tartıştık, bu popüler site jeneratörüyle nasıl başlayabileceğinize bakalım. Bu bölümde, Gatsby’yi mevcut WordPress kurulumuna bağlayarak basit bir başlangıç web sitesi oluşturacağız.
Adım 1: Geliştirme ortamınızı hazırlayın WordPress sitenizi Gatsby için bir veri kaynağı olarak işlev görecek şekilde optimize eden WPGatsby eklentisini kullanarak başlangıç sitemizi oluşturacağız. Ayrıca WPGraphql eklentisini kullanarak WordPress ve Gatsby arasında bir bağlantı kuracağız: WPGatsby eklentisi, Gatsbsy’nin ilk derlemeden sonra içerik değişikliklerini çekmek için kullanacağı yönetici günlüklerini yapar. Bu proje üzerinde çalışmaya devam etmeye karar verirseniz, WPGatsby, Gatsby’nin önizlemesi de dahil olmak üzere bu yapıyı otomatik olarak tetiklemek için ihtiyacınız olan her şeyi sağlar. WPGATSBY ve WPGRAPHQL’i yükledikten ve etkinleştirdikten sonra, bilgisayarınızda Düğüm Paketi Yöneticisi (NPM), Çalışma Zamanı Node.js ve Gatsby’yi yüklediğinizden emin olmanız gerekir. Tüm bu bileşenleri indirmenin en kolay yolu bir homebrew paket yöneticisi kullanmaktır. Bu program MacOS ve Linux için mevcuttur:
Bir HomeBrawe yüklemek için bilgisayarınıza komut satırı uygulamasını açın. Ardından, aşağıdaki komutu çalıştırın:/bin/bash -c “$ (curl -fssl https://raw.githubusercontent.com/homebrew/install/head/install.sh)” Daha sonra talimatları takip ederek homeBew’i yükleyebilirsiniz verilen. Aktif ve yürüdükten sonra Node.js ve NPM’yi bir komut kullanarak yükleyebilirsiniz: Bir sonraki düğümü kurun, Gatsby CLI aracını yükleme zamanı. Bu NPM paketini Gatsby tarafından desteklenen bir site geliştirmek için siparişleri çalıştırmak için kullanacağız. Komut satırı uygulamanızda aşağıdakileri girin:
Artık sitenizi ön ucunu oluşturmaya başlayabilirsiniz. Adım 3: Gatsby Framework Geliştirme Sunucusu’nu başlatın Komut satırı şimdi sizden iki komut sağlayarak projenizi geliştirmeye başlamanızı isteyecektir. Gatsby projenizi nerede oluşturduğunuza bağlı olarak, bu komut şuna benzer: My WordPress-Gatsby sitesi Gatsby Geliştirme Sunucusunu başlatmak için CD geliştirin, bu iki komutu çalıştırın. Hepsi bu – demo siteniz artık geliştirme ortamınızda çalışıyor. Sitenizi tarayıcınızda yeni bir sekme açarak ve http: // localhost: 8000/: bu noktada gezerek görebilirsiniz, bu noktada Gatsby çerçevesi yalnızca kukla içeriği görüntüler. Bir sonraki adımda, kendi yayınlarınızı ve sayfalarınızı görüntüleyebilmeniz için Gatsby’yi WordPress kurulumunuza bağlayacağız. Adım 4: Gatsby’yi WordPress’e bağlayın Yerel bir Gatsby dizini açarsanız, Gatsby başlangıç sitesi için tüm dosyaları bulacaksınız. Daha sonra Gatsby-consig.js dosyasını bulabilir ve herhangi bir uyumlu metin düzenleyicisinde açabilirsiniz:
WordPress’i Gatsby’ye bağlamak için Gatsby’yi sitenizin URL’sine yönlendirmelisiniz. Metin düzenleyicinizde aşağıdaki bölümleri bulun:
URL: Process.env.wpgraphql_url || ‘https://wpgatsbydemo.wpengine.com/graphql’ URL’yi WPGraphql eklentisini yüklerken oluşturduğunuz son nokta/grafik ile değiştirebilirsiniz. Varsayılan olarak, WPGRAPHQL bu bitiş noktasını http://yoursite.com/graphql adresinden ekleyecektir. Örneğin, web siteniz örneğin.com ise, aşağıdakileri eklemeniz gerekir: url: process.env.wpgraphql_url || ‘https://example.com/graphql’ Bu değişikliği yaptıktan sonra dosyayı kaydedin ve metin düzenleyicinizi kapatın. Web tarayıcınızda http: // localhost: 8000/. Sayfa yeniden yüklendiğinde, WordPress sitenizi görüntüler: İçeriğiniz görünmüyorsa, komut satırı uygulamanızın penceresinden çıkarak Gatsby geliştirme işleminden çıkmanız gerekebilir. Daha sonra yeni komut satırı penceresini açabilir, dizinini (CD) değiştirebilirsiniz, böylece yerel Gatsby projenize yol açabilir ve Gatsby Geliştirme komutunu geri çalıştırırsınız. Web sitesi içeriğiniz Localhost sekmesinde görünecektir. Sonuç Gatsby’nin çerçevesi, web sitenizin ve arama motoru sıralamalarınızın performansını artırabilir, ancak tarihsel olarak öğrenilmesi en kolay araç değildir. Bununla birlikte, yeni bir WordPress entegrasyon eklentisi yayınlayarak, artık biraz karmaşıklıkla basit bir ön uç yapabilirsiniz. Dört kolay adımda WordPress ve Gatsby’yi kullanarak web sitelerini nasıl oluşturabileceğinizi kaydedelim: Geliştirme ortamınızı hazırlayın. Gatsby Starter WordPress projesini indirin. Gatsby geliştirme sunucusunu başlatın.Gatsby’yi WordPress’e bağlayın. WordPress ve Gatsby’yi kullanarak web siteleri oluşturma hakkında sorularınız var mı? Aşağıdaki yorum bölümünde bize bildirin!
