Gatsby ile Blogging Site Nasıl Yapılır

Tepki gibi çerçeveler sadece JavaScript'i istemcilere gönderin, bu daha sonra ekrandaki elemanları oluşturmak için kullanılır. Sayfaya yüklenen HTML minimumdur, çünkü her şeyin yüklendikten sonra istemci tarafında üretilir.

Bir blog veya dükkan gibi dinamik verilere sahip olan projelerde, diğer verilerden önce JavaScript önce aşağı inmesi gerekir. Kod bölünmesi gibi hız artırma tekniklerini kullanırken bile, paket indirilemezse, tüm site çalışmayı durduracaktır.

• Daha akıllıca çalışmanıza yardımcı olacak web tasarım araçları

Statik site jeneratörleri dinamik içerik alır ve önceden oluşturulmuş sayfalar oluşturmaya hazır. Veriler değişiyorsa, proje yeniden oluşturulabilir ve yeni içerik servis edilebilir. Sonuç, iyileştirilmiş hız, ölçeklenebilirlik ve - bir veritabanına sabit bağlantılar olmadan - güvenlik. Yaklaşım, bir haddeleme haberi gibi verileri sürekli değiştirmek için ideal olmasa da, birçok proje yararlanabilir.

Gatsby reaksiyona girdikten sonra inşa edilmiş statik site jeneratörüdür. GRAPHQL ve eklentilerin kullanılmasıyla, farklı kaynaklardan veri alabilir ve bunları bileşenlere iletebilir. Bu yapıldıktan sonra, projeyi analiz eder ve müşterilere hizmet etmek için HTML dosyalarını oluşturur, reaksiyona girerken ve uygulama mantığı arka planda indirilir.

Daha fazla site oluşturma seçeneği için, bizim üstümüze bakın Web Sitesi Oluşturucu alır. Doğru desteğe mi ihtiyacınız var? Bunlar ağ sağlayıcısı İhtiyacınız olan hizmetler.

Dosyaları indirin Bu eğitim için.

• En İyi 10 Statik Site Jeneratörleri

Başlamak

Başlamak için, bizim için temel bir proje olan GATSBY iskele sahibi olabiliriz. Birkaç yararlı geliştirici aracı ile birlikte kullanabileceğimiz bir geliştirme sunucusu sağlar. Düğüm ve NPM'nin güncel ve çalıştırıldığından emin olun NPX Gatsby New Gatsby sitesi Komut satırında, "GATESBY Site" ile oluşturulacak klasör olmak.

Bu klasör içerisinde GATESBY, başlatma işleminin bir parçası olarak birkaç komut sağlar. Bunları çalıştırmak, siteyi daha kolay hale getirir. Koşmak npm koşusu geliştirmek Geliştirme sunucusunu başlatmak ve herhangi bir değişikliği tarayıcıda otomatik olarak güncelleştirin.

/ SRC klasörü içindeki tüm içerikler ve herhangi bir kurulum dosyası, projenin kökünündeki "Gatsby" ile önceden eklenmiştir. Her şey, GATSBY ile önceden oluşturulması için herhangi bir ek yapıya veya davranışa sahip olması gerekmeyen bileşenlerle çalışır.

/ SRC / Sayfalar klasörünün içeriği özeldir. GATSBY, bir sayfa oluşturmak için bu klasör içindeki herhangi bir bileşeni alacaktır. İndex.js açın ve bileşenin içeriğini temizleyin. Kaydettikçe sayfanın tarayıcıda güncellendiğine dikkat edin.

 Const indexpage = () = & gt; (
  & lt; layout & gt;
    {/* Boş */}
  & lt; / layout & gt;
) 

Bir sayfa oluştur

Her blog sonrası kendi sayfasına ihtiyaç duyar. Her yeni yazı için bir sayfa bileşeni yapmak mümkündür, ancak bu, reaksiyona girmeyenler için bir engel oluşturur ve gelecekte tasarımlar değişikliği olarak daha fazla bakım gerektirecektir.

Gatsby, Gatsbyjs.org/Plugins'te bulunabilecek sayfa oluşturma şeklini değiştirmeye hazır eklentilerle dolu bir kütüphaneye sahiptir. Orada iki tür eklenti bulabiliriz - 'kaynak' ve 'trafo'.

Bir kaynak eklentisi, bir kaynaktan veri alır ve bunları 'düğümlere' dönüştürür, bu da bir sitedeki bilgilerle nasıl anlaşılır. Veriler, görüntüler gibi dosyalar için yerel olarak veya bir veritabanı gibi dış veriler için uzaktan alınabilir.

Bir trafo eklentisi daha sonra bu düğümleri alabilir ve Gatsby'nin çalışması için işleri kolaylaştırmak için yenilerini oluşturabilir. Örneğin, YAML dosyaları varsayılan olarak ayrıştırılamaz, ancak bir transformatör eklentisi, iç içe geçmiş sözdizimini içerideki bileşenleri okumak için nesnelere dönüştürebilir.

Markdown, metin için kullanılan ortak bir formattır, çünkü çok yönlü, okunması kolaydır ve HTML'ye dönüştürülebilir. Kaynak eklentisi "GATSBY-SOURCE-FILESSYSTEM", dosyaları yerel olarak alabilir ve bunları düğümlere dönüştürebilir, "Gatsby-Transformer-Notark" dönüşüm eklentisi "Gatsby-Transformer-Notark", işaretleyebileceğimiz bir şeye dönüştürmek ve GRAPHQL ile sorgulamak için açıklama kullanır.

Başlangıç ​​projesi zaten kaynak eklentisi ile birlikte geliyor. Çalışarak diğerini takın NPM, Gatsby-Transformer-Remark Yükle . Lütfen geliştirme sunucusunun alınması için yeniden başlatılması gerekebileceğini lütfen unutmayın.

Eklentileri ayarlamak

Eklenti takılı olan Gatsby'nin nasıl kullanılacağı söylenmesi gerekiyor. Bütün bu mantık, başlangıçta oluşturulan "Gatsby-config.js" dosyasında tutulur. Zaten kutudan çıkan birkaç eklenti ile birlikte gelir, ancak markdown'ı alabilmek ve kullanmak için karışıma eklememiz gerekir.

Kurulum prosedürüne sahip olmayan basit eklentiler, dizeleri olarak eklenebilir. Dönüşüm eklentisinin sadece bir işi olduğu için, kuruluma ihtiyacı yoktur. Ancak, kaynak eklentisi yazıların nerede bulunacağı söylenmelidir. Bunları eklentiler dizinin altına ekleyin.

 Eklentiler: [
  [...]
  "Gatsby-Transformer-Remark",
  {
    Çözünür: `Gatsby-Source-dosya sistemi",
    Seçenekler: {
      İsim: `Sayfalar`,
      Yolu: `$ {__ dirname} / SRC / Pages`
    }
  }
] 

Her yazı kendi sayfası olacak, bunları SRC / Pages klasörüne eklemek mantıklıdır. Bu ayar seçenekleri, GATESBY'nin bu klasöre bakmasını ve herhangi bir dosyayı dışarı çekmesini söyler.

Blog yazısı oluştur

Eklentiler yerine, ilk görevimizi oluşturabiliriz. "İlk Mesajım" adlı bir klasör oluşturun ve içinde bir "My-First-post.md" markdown dosyası ekleyin. Bu SÖZLEŞME, görüntüler gibi resimler gibi ilgili herhangi bir dosya eklememizi sağlar.

Bu yazıya bazı markdown eklememiz gerekiyor, böylece beklendiği gibi çalıştığını biliyoruz.

 -----
Yol: / POST / MY-POST POST
Tarih: 2018-12-01
Özet: Posta Özeti
Etiketler: [Benim, İlk, Post]
Başlık: İlk gönderi
---
Bu benim ilk görevim! 

Dosyanın üstündeki kısa çizgiler arasındaki içerik 'ön madde' denir. Bu, tarih ve başlık gibi yazılan postun etrafında meta veriler içerecektir. Bu verilerin tümü açıklama tarafından alınacaktır ve GraphQL içindeki sorgulanabilir.

Bu durumda önemli ön madde parçası yol değer. Bu, gönderinin yaşayacağı ve benzersiz olması gerekecek. Gatsby yolu okuyacak ve orada yeni bir sayfa oluşturacak.

Gönderileri göstermeden önce, postayı görüntülemek için bir sayfa bileşenine ihtiyacımız var. Değerleri sahne olarak alabilmesi ve içeriği bir HTML bloğu olarak görüntüleyebilmesi gerekecektir.

"SRC / BLOGPOST.JS" de yeni bir bileşen oluşturun. Her yazı ile ilgili bilgiler bir veri GraphQL'den Prop.

 İthalat 'tepki' dan tepki
'Gatsby' dan ithal {graphql}
'tepki-kask' dan kask ithalatı
'../components/layout' dan ithalat düzenini ithalat
Const Blog = ({Data: {markdownremark}}) = & gt; {
  const {frontmatter, html} = MarkDownRemark
  dönüş (
    & lt; layout & gt;
      & lt; kask başlığı = {frontmatter.title} / & gt;
      & lt; div dangerouslysetinnerhtml = {{__HTML: html}} / ve gt;
    & lt; / layout & gt;
  )
} 

Gatsby ile birlikte verilen "tepki-kask" paketi, genellikle içinde yaşayacak değerleri güncellememizi sağlar. & lt; head & gt; bir HTML sayfasının. Burada, görevin başlığını ayarlıyoruz. & lt; unvanı ve gt; Sayfanın kendisi. Kabul ettiği birçok seçenek var, bu konuda daha fazla şey öğrenebileceğiniz github.com/nfl/react-helmet .

Veri için sorgu

Bu noktada GATSBY, bu sayfayı güçlendirmiyor. Bu bilgiyi doldurmak için Markdown dosyalarından veri almamız gerekiyor. Bunu yapmak için, grafipql kullanabiliriz - Facebook tarafından oluşturulan bir sorgulama dili, ilgili verileri reaksiyona giren bileşenlere dönüştürür. Kısacası, GraphQL yapıyı tanımlar. Veri iç içe geçmiş nesnelerin kullanımı yoluyla iade edilecektir. Bu şekilde, yalnızca kullandığımız verileri sorguluyoruz.

GATSBY, sorguları yorumlayabilen bir şablon edebi işlevi sağlar. Herhangi bir kullanımını tespit edecek ve sonuçlarını bileşene girecek şekilde geçirir. Bu, sorguyu aynı dosyanın içine ekleyebileceğimiz ve ilgili mantığı bir araya getirebileceğimiz anlamına gelir.

İhracat Const PageQuery = Graphql`
  sorgu ($ yol: string!) {
    MarkDownRemark (Frontmatter: {yol: {EQ: $ path}}) {
      html
      frontmatter {
        Tarih (Biçimlendirme: "D MMMM YYYY")
        Başlık
      }
    }
  } `

Bu sorguda, biz açtığımız sayfayla eşleşen bir yolu olan tüm Markdown düğümleri için GATESBY'ye soruyoruz. Bir tane bulursa, oluşturulan HTML'yi, tarihin tarihini ve başlığını bileşene iletir.

Sorguları yazma bu şekilde sadece sayfa bileşenleri ile sınırlıdır. Düğümlerin sorgusuna ihtiyacı olan diğer bileşenler kullanmalı & lt; staticquery & gt; ve ön yükleyin. Bu noktada, geliştirme sunucusu bunun için uyarabilir. Blog yazısı Bileşen, ancak bu, henüz bir sayfa bileşeni olacağının farkında olmadığı için. Bunu değiştirelim.

Sayfalar oluştur

Varsayılan olarak, GATSBY sadece içindeki bileşenler için sayfalar yapar. / SRC / Sayfalar , yani başka bir şekilde sayfalar oluşturmamız gereken anlamına gelir.

GATSBY, veri düğümlerine erişmenize yardımcı olmak için yapım işleminden birkaç yöntem ortaya çıkarır. Bunların projenin kökünde "Gatsby-node.js" ile erişilebilir. Bu durumda, tüm blog mesajlarını almak ve izin vermek için GraphQL kullanacağız. createpages Geri arama her biri için bir sayfa oluşturur. Bu eşzamansız bir eylem olduğu için, GATSBY'nin yapım sürecine devam edebileceği bir söz vermemiz gerekir.

 Const Path = Gereksinim ('Yolu')
ihracatçı.createPages = ({eylemler, graphql}) = & gt; {
  GRAPHQL (`)
    {
      allmarkdownRemark {
        kenarları {
          düğüm {
            frontmatter {
              yol
            }
          }
        }
      }
    }
  `)
} 

Geri çağrının ilk kısmı, her bir yazının yolunu getiren bir sorgudur, çünkü her bir sayfa o zaman kendi verilerini alır. GraphQL çağrısı, tüm yazıları içerecek bir söz veriyor. Verileri bazı sayfalar oluşturmak için kullanabiliriz.

 .Then (sonuç = ve gt; {
  if (sonuç.errors) {
    İade sözü. (Sonuç.Errors)
  }
  Const BlogPosttemplate = Path.Resolve ('SRC / Components / Blogpost.js')
  sonuç.data.allmarkdownRemark.edges.foreach (({node}) = & gt; {
    eylemler.createPage ({
      Yol: node.frontmatter.path,
      Bileşen: BlogPostTemplate,
    })
  })
}) 

Sorgu bir hatayla karşılaşırsa, nedenini bulmak için derleme işlemini durdurun. Her şey yolundaysa, yapılan bileşeni alın ve arayın. sayfa oluştur Sağlanan yolda bir sayfa oluşturma yöntemi.

Sayfalar üreten, şimdi gerekli olan tek şey onları bulmanın bir yoludur. Bunu yapmak için mevcut indeks sayfası bileşeninde bir sorgu kullanabiliriz.

 İhracat Const Pagequery = Graphql`
  sorgu {
    CillmarkDownRemark (Sırala: {alanlar: [frontmatter___date], Sipariş: DESC}) {
      kenarları {
        düğüm {
          frontmatter {
            yol
            Başlık
          }
        }
      }
    }
  }
`; 

Bu sorguda, yalnızca görevin başlıkları ve yoluyla ilgileniyoruz. Ayrıca, en son yazıları ters sırayla almak için bazı parametreleri de geçiyoruz. Özellikle bu sorgu, her yazıdaki ön maddeden tarihi kontrol ediyor. Her sorgu için sözdizimi, üretmek için kullanılan eklentiye bağlı olacaktır.

Son olarak, bileşenin verileri kullanmak için güncellenmesi gerekiyor. Gatsby tarafından sağlanan "Bağlantı" bileşeni, hangi bileşenlerin bu bağlantıyı oluşturması gerektiğini bilmesini sağlar ve doğru demetleri buna göre getirdiğinden emin olacaktır.

 Const indexpage = ({data}) = & gt; {
  dönüş (
    & lt; layout & gt;
      {data.allmarkownRemark.edges.map (
        ({düğüm: {frontmatter: {yol, başlık}}}) = & gt; (
          

Bununla, blogumuz bitti. Kalıntıları olan tek şey, sümsemek ve GATSBY'nin üretime hazır bir web sitesi oluşturmasıdır. Koşarak npm çalıştırmak inşa Geliştirme için kullanılan geliştirmeleri soyabilir ve dağıtım yapmaya hazır demetleri üretebilir. Bir kez bittiğinde, "genel" klasörü daha sonra statik sitelere hizmet edebilecek herhangi bir yere yüklenebilir. Blogunuz için saklamak için dosyalar var mı? Parlak olarak güvende olduklarından emin olun Bulut depolama .

Bu makale başlangıçta 314 sayısında yayınlandı. ağ , dünyanın web tasarımcıları ve geliştiricileri için en çok satan dergisi. Sayı 314 burada satın al veya abone olun .

İlgili Makaleler:

• 16 en iyi ücretsiz blog platformları
• WordPress'i başsız bir CMS olarak kullanın
• Daha hızlı kod yapılır, daha hafif JavaScript