Daha fazla kullanıcı deneyimi ve genel performans getirmek için WordPress ile açık kaynak Gatsby’yi yapılandırın. Bu statik site jeneratörünü nasıl kullanacağınızı öğrenelim.
Genel Bakış
GATSBYJS, ücretsiz ve açık kaynaklı reaksiyon tabanlı, GraphQL ile çalışan statik site jeneratörüdür. İnanılmaz derecede hızlı sayfa yükleri için yalnızca statik dosyalar kullanan bir web sitesi oluşturmak için güçlü bir ön oluşturma kullanır. WordPress harika bir açık kaynak bloglama platformudur. Sonuç olarak, bir sitenin bir WordPress sitesi olup olmadığını nasıl anlayacağını bilen birçok insan var, böylece onu hackleyebilir ve bilgi çalabilirler. Gatsby WordPress’i birlikte kullanmak size WordPress içerik yönetiminin ve Gatsby’nin hızının aynı gücünü verecektir. Bu makalede, Gatsby’nin ne olduğuna ve neden CMS yazılımı ile kullanmanız gerektiğine bakacağız. Ardından, inanılmaz bir web sitesi deneyimi oluşturmak için WordPress ve Gatsby’yi birlikte nasıl kullanacağınız konusunda ayrıntılara gireceğiz. Hadi başlayalım!
- Gatsby nedir ?
- WordPress ve Gatsby kullanmanın artıları ve eksileri
- Gatsby ile WordPress ile nasıl kullanılır
- Sonuç
Gatsby nedir
Gatsby statik bir site jeneratörüdür. Bu, Gatsby’nin web sitenizin sunucusuna yüklenen statik HTML dosyalarını oluşturduğu anlamına gelir. Bir ziyaretçi sitenize indiğinde, bu statik dosyalar, WordPress’in genel olarak hizmet ettiği dinamik içerik yerine tarayıcılarına sunulur. Geliştiricilerin yanan hızlı web siteleri ve uygulamaları oluşturmasına yardımcı olan React’e dayanan ücretsiz ve açık kaynaklı bir çerçevedir.
WordPress ve Gatsby’yi kullanmanın artıları ve eksileri
Gatsby’nin resmi belgeleri uyarınca, Gatsby WordPress kombinasyonunun harika ve kimin olmadığını bir masa derlediler. Kolaylık uğruna, bunları burada listeliyorum. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress ve Gatsby için harika {{LINE_27}} {{LINE_28}} {{LINE_29}} WordPress içerik düzenleme deneyimi ile rahat olan içerik ekipleri {{LINE_31}} {{LINE_32}} Popüler, açık kaynaklı teknolojiler kullanarak değer veren geliştirme ekipleri {{LINE_34}} {{LINE_35}} WordPress’te zaten depolanmış içeriğe sahip sitelerin yeniden tasarlanması {{LINE_37}} {{LINE_38}} Veri ve teknoloji yığınlarına sahip olmak isteyen ekipler {{LINE_40}} {{LINE_41}} Karmaşık erişim kontrol iş akışları veya içerik modelleme kısıtlamaları {{LINE_43}} {{LINE_44}} Güvenliğin önemli olduğu projeler {{LINE_46}} {{LINE_47}} Performansın çok önemli olduğu yüksek talep projeleri {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress ve Gatsby için harika değil {{LINE_55}} {{LINE_56}} {{LINE_57}} WordPress UI temalarının kullanılmasını gerektiren ekipler {{LINE_59}} {{LINE_60}} Tamamen yönetilen bir bulut CMS arayanlar {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Bu resmi noktaların yanı sıra, Gatsby WordPress’i birlikte kullanmanın bazı artılarını ve eksilerini listelemek istiyorum. {{LINE_67}} {{LINE_68}} {{LINE_69}} Profesyonel {{LINE_71}} {{LINE_72}} {{LINE_73}} Daha hızlı yük hızları - Statik web siteleri dinamikten daha hızlı yüklenir. Sonuç olarak, sayfanızı yükleme hızlarını ve SEO sıralamasını etkiler. {{LINE_75}} {{LINE_76}} Daha az sunucu maliyeti - Statik dosyaların özel yazılımlara ihtiyaç duymadığından, daha ucuz bir sunucudan statik HTML sayfaları da sunulabilir. {{LINE_78}} {{LINE_79}} Daha güvenli - statik siteler için, parçaların hareketli bileşenleri yoktur, bu nedenle bilgisayar korsanlarının yazılımınızı kullanma şansı yoktur. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Eksileri {{LINE_89}} {{LINE_90}} {{LINE_91}} Öğrenme eğrisi - Geliştiriciler için ek beceriler gerektirir. Reactjs ve Graphql öğrenmek gibi {{LINE_93}} {{LINE_94}} Yalnızca statik içerik - herhangi bir dinamik içerik sunmanız gerekiyorsa. O zaman Gatsby senin için değil. Yalnızca sunucu statik dosyaları olabilir. Bu nedenle, verileri veritabanından getiren herhangi bir yorum sisteminiz olamaz. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}
WordPress ile Gatsby Nasıl Kullanılır
Gatsby’yi yükleyebilmeniz için, web sitenize Nodejs ve NPM yüklemeniz gerekir.
Adım 1 - Gatsby’yi yükle
npm install -g gatsby-cli
Bu komut yükleyiciyi otomatik olarak çalıştırır. Gatsby’yi yüklemeden önce tüm bağımlılıkları indirir ve yükler. Bu tamamlandıktan sonra, ilk Gatsby web sitenizi oluşturmaya başlayabilirsiniz.
gatsby new gatsby-site
Bu, Gatsby’nin başlangıç şablonunu indirecek ve/Gatsby-WordPress dizine yerleştirecek. Kurulum tamamlandıktan sonra, sitenin geliştirme sürümünü açabilirsiniz
gatsby develop
Şimdi, web tarayıcınızda http: // localhost: 8000 girin ve varsayılan şablonunuz açılmalıdır.
Adım 2 - Gatsby’yi WordPress’e bağlayın
Gatsby WordPress kılavuzunun bu bölümünde, bu statik site jeneratörünü WordPress ile bağlayacağız. Temel bir statik web siteniz var, ancak 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 şablonunuza dayalı statik bir web sitesi oluşturacaktır. Gatsby kaynak WordPress eklentisini NPM deposundan yükleyin.
npm install gatsby-source-wordpress
Adım 3 - Gatsby’yi yapılandırın
Aşağıdaki kodu gatsby-config.js dosyanıza koyun
module.exports = {
...
plugins: [
...,
{
resolve: `gatsby-source-wordpress`,
options: {
// your WordPress source
baseurl: `wpexample.com`,
aliases: - `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.
Adım 4 - Sayfa şablonları oluşturun
Bina Sayfa Şablonları Bu Site Jeneratörünün WordPress web sitenizdeki her sayfa için bir gönderi oluşturmasını sağlar. Kaynak eklentisi, bu sayfalar için WordPress’ten ihtiyacınız olan verileri çeker, ancak tasarım şablonunu oluşturmanız gerekir. Gatsby-node.js dosyanızda 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 aradıktan sonra, Gatsby her yazı için bir sayfa oluşturur. Geliştirme komutunu kullanarak, oluşturulan URL’yi kullanarak her yeni sayfaya gidebilirsiniz.
Çözüm
Bu Gatsby WordPress öğreticisinde, WordPress’ten bir Gatsby web sitesi nasıl oluşturulacağını ele aldık. Bu iki açık kaynak yazılımının artıları ve eksileri olduğunu öğrendik. Ayrıca Gatsby geliştirme ortamına nasıl kurulacağını ve başlayacağını da ele aldık. Son olarak, Containerize.com diğer açık kaynaklı ürünler üzerine makaleler yazıyor. Bu nedenle, düzenli haberler ve güncellemeler için lütfen açık kaynak bloglama platform kategorisiyle iletişim halinde olun.