Gatsby nedir, headless CMS nedir ve ButterCMS-Gatsby entegrasyonu nasıl yapılır

6 min readJul 20, 2020

Gatsby nedir sorusuna kitabi bir açıklama gerekirse; geliştiricilerin hızlı web siteleri ve uygulamalar oluşturmasına yardımcı olan React tabanlı ücretsiz ve açık kaynaklı bir framework’tür diyebiliriz.

Peki nasıl çalışır?

1- Veriyi bir yerden alır.

Veriyi aldığı yer; CMS uygulamaları olabilir (Contentful,Drupal, Wordpress gibi) ya da API, veritabanı, json gibi veri kaynakları olabilir.

2- Derleme(build) aşamasına geçer.

Gatsby bünyesinde GraphQL, HTML,CSS, React teknolojilerini barındırır.

3- Deploy aşamasına gelinir.

Burada Netlify, AWS Amplify, GitHub Pages gibi teknolojiler kullanabilirsiniz.

Aklıma takılan sorulara bulduğum cevaplar;

Gatsby, normal react uygulamasından farklı mı?

Gatsby ile aslında hızlıca bir React uygulaması ayağa kaldırıyorsunuz gibi düşünün(tıpkı create-react-app kullanarak yaptığımız gibi). Ama basit bir React uygulamasından farklı olarak size CMS ile uyumlu çalışabilecek ve build işlemi farklı olan bir alt yapı sunuyor.

Gatsby’nin diğer framework’lerden ne farkı var?

İnternette aradığımda çıkan sonuçlarda hep Nextjs ile karşılaştırıldığını gördüm. Temel farkında Nextjs için sunucunun gerekmesi ama Gatsby için bunun şart olmaması olduğunu gördüm. Nextjs ile ilgili daha ayrıntılı araştırma yapıp onu da kullanabilirsiniz. Basit bir proje yaratıp farklarını deneyiminizle görmenizde fayda var. Konuyu dağıtmamak adına çok araştırmadım ama ilerde incelemek isterim.

Gatsby’de bir proje nasıl yaratılır?

Kurulum ve ilk projeyi yaratma için bu dökümanı takip ettim. Burda tüm adımlar düzgünce anlatılmış ama bazı noktalar benim gördüğüm eski kalmış. Bu nedenle sadece dikkat etmeniz gereken noktalardan bahsetmem daha mantıklı olacak.

node.js kurulumunu yapmamız gerekiyor öncelikle. İşletim sisteminize göre kurulum şekilleri değişiyor tabi ki. Bunun için yukarıdaki linkte paylaştığım dökümana bakabilirsiniz. Burada dikkat edilmesi gereken varsayılan npm ve node versiyonlarınızın şu şekilde görünmesi:

Bir de eğer varsayılan olarak npm ve node versiyonları dökümanda belirtilenden ya da ondan daha sonraki versiyonlar olmalı. Bunun için şu dökümanı inceleyebilirsiniz. Terminali kapatıp açtıktan sonra bu versiyonlar eski haline geri dönüyor (benim başıma geldi, noluyor dedim) eğer aklınıza gelmezse daha önce çalışan uygulama neden çalışmıyor diye bir süre düşünmeniz gerekebilir :)

Git kurulumu yapmanız gerekiyor. Sonra da gatsby-cli kurmak lazım. Eğer kurulumunuz başarılı ise “gatsby — help” komutu ile hangi komutları kullanabileceğinizi görebilirsiniz. Eğer hata alıyorsanız npm kurulumu veya yetkilendirme ile ilgili bir sıkıntı olabilir. Bunları kontrol etmenizde fayda var.
Sıra ilk Gatsby sitemizi oluşturmaya geldi.

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Bu komutla yeni bir proje yarat(bir klasör yaratılacak), adı ‘hello-world’ olsun diyoruz ve kullanmak istediğimiz github’ta yer alan projemizin linkini veriyoruz. Burada gatsby’nin başlangıç için koyduğu hazır bir projesi var.

hello-world klasörünüzün içerisine girip

gatsby develop

komutunu çalıştırmanız lazım. Şuna benzer bir çıktı görmeniz gerekiyor:

Şimdi ButterCMS’e sıra geldi.

CMS nedir?

CMS dediğimiz aslında içerik yönetim sistemidir. Örneğin; pazarlama ekibinden sürekli şu içeriği sayfaya koyalım gibi talepler çok sık geliyor ve/veya sizin bu değişiklikleri yapmanız çok kolay olmuyorsa; ya kendiniz bir CMS uygulaması yazmanız ya da hazırını alıp kullanmanız gerekiyor. Bu uygulamalar sayesinde içeriğin oluşturulması ve değiştirilmesini yönetmek çok daha kolay hale gelir.

ButterCMS de bir içerik yönetim uygulamasıdır. İnternette bu konu ile ilgili araştırma yaptığınızda ‘headless CMS’ tabirini göreceksiniz. ‘Headless CMS’ başsız CMS demektir, yani varsayılan olarak gelen bir frontend olmadan servis edilen CMS demektir. İçerisinde herhangi bir frontend bilgisi olmadığı için aslında sadece içerik/veri sunan bir sistem haline gelir. Siz buradan içerikleri alıp farklı frontend’ler kullanarak farklı tasarımlar ile aynı bilgiyi farklı şekillerde sunabilirsiniz.

Gatsby ve ButterCMS nasıl uyumlu çalışacak hale gelir?

Gatsby ve ButterCMS entegrasyonu için yukarıda oluşturduğunuz Gatsby projesini kullabilirsiniz, ben öyle yaptım. Entegrasyon için şu dökümanı takip ettim. Burada hazır başlangıç projesi de bulunuyor, direk onu da kullanabilirsiniz.

Gatsby projenizi bir IDE ile açıp dosyalarda yapacağımız değişiklikleri yapabilirsiniz (IntellijIDEA kullanıyorum) ya da yine terminali kullanarak değişiklikleri yapmanız mümkün.

Başlangıç için öncelikle ButterCMS sitesine giriş yapıp orada yeni bir sayfa yaratmanız gerekiyor. Bu dökümanda bu güzel bir şekilde anlatılmış. Aşağıya benim sayfamda tanımlı olan alanlar ve değerlerini yazdım.

SEO Title — Acme Co

Headline — Acme Co provides supplies

Hero Image — Örnek bir resim koydum

Call To Action — Buy Now

Customer Logos — örnek bir resim koydum

‘slug’ adı “homepage” ve ‘page_type’ değeri “customer_case_study” olarak atadım. En önemli veriler bu bizim için şimdilik. Buradaki auth_token değerini de kullanacağız tabi ki.

Bu aşamadan sonra ButterCMS de sayfamız var ve elimizde ‘auth token’ değerimiz var, bunu kullanarak CMS den verileri çekebiliriz.

Terminalde aşağıdaki kodu çalıştırmanız gerekiyor.

npm install gatsby-source-buttercms

Sıra geldi proje içerisinde gerekli değişiklikleri yapmaya.

Öncelikle gatsby-config.js dosyası içerisinin şu şekilde olması gerekiyor:

module.exports = {
    plugins: [
        {
            resolve: 'gatsby-source-buttercms',
            options: {
                authToken: '7916e26cf4e6f6821bcebc63d895dbcfb4b52d67',
                pages: [`homepage`],
                pageTypes: [`customer_case_study`],
            },
        }
    ]
}

Burada dikkat edilmesi gereken noktalar;

authToken yerine sizin kendi token değerinizi yazmanız ve
pageTypes değerinin butterCMS’te belirlediğinizle aynı olması lazım. pageTypes değeri dökümanda opsiyonel olarak yazıldığı için ilk başta bu değeri config dosyasına yazmamıştım. ‘gatsby develop’ komutunu çalıştırdım. http://localhost:8000/___graphql üzerinden grapql sorguları çalıştırdığımda herhangi bir sorgu sonucu gelmiyordu. pageTypes değerini eklediğimde sorun ortadan kalktı.

Basit bir ana sayfa yaratmamız gerekiyor.

Bunun için src klasörü altına ‘pages’ klasörü yaratın ve ‘index.js’ adında bir doysa oluşturun. index.js içerisine aşağıdaki kodu alıp, yapıştırın.

src/pages/index.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

const IndexPage = ({ data }) => {
    const home = data.home.edges[0].node

    return (
        <Layout>

            <div
                style={{
                    height: `50%`,
                    display: `flex`,
                    padding: `1rem`,
                    alignItems: `center`,
                    justifyContent: `center`,
                    flexDirection: `column`,
                    background: `linear-gradient(-45deg, rgb(29, 64, 86) 0%, rgb(60, 24, 78) 100%)`,
                }}
            >
                <h1
                    style={{
                        textAlign: `center`,
                        color: `white`,
                        fontSize: `2.5rem`,
                        fontWeight: `100`,
                        maxWidth: `960px`,
                    }}
                >
                    {home.headline}
                </h1>
                <button
                    style={{
                        padding: `0.75rem`,
                        backgroundColor: `white`,
                        border: `none`,
                        fontSize: `1.5rem`,
                        borderRadius: `10px`,
                    }}
                >
                    {home.call_to_action}
                </button>
            </div>

            {/* <h1> {page.hero_image}</h1> */}

            <h1 style={{ fontWeight: `100`, textAlign: `center` }}>Our Customers</h1>
            <div
                style={{
                    display: `flex`,
                    flexDirection: `column`,
                    alignItems: `center`,
                    justifyContent: `center`,
                }}
            >
                {home.customer_logos.map(({ logo_image }) => (
                    <img
                        key={logo_image}
                        style={{ width: `200px`, borderRadius: `10px` }}
                        src={logo_image}
                    />
                ))}
            </div>
        </Layout>
    )
}

//GraphQl query to fetch homepage data
export const query = graphql`
  {
  home: allButterPage(filter: {page_type: {eq: "customer_case_study"}}) {
    edges {
      node {
        slug
        headline
          seo_title
          customer_logos {
            logo_image
          }
          hero_image
          call_to_action
      }
    }
  }
 }
`

export default IndexPage

Burda ne yapılmaya çalışılmış peki?

React, graphql kullanıyorum ve layout olarakta components klasörü altındaki layout.js dosyasını al dedik:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

Sonra bize gelecek olan veriyi şu şekilde aldık:

const home = data.home.edges[0].node

‘home’ değişkeni içerisinde olan verilere şu şekilde erişerek onları da uygun yerlerde kullandık:

{home.headline}
{home.call_to_action}
{home.customer_logos.map(...

Veriye de graphql ile sorgu atarak ulaştık:

export const query = graphql`
  {
  home: allButterPage(filter: {page_type: {eq: "customer_case_study"}}) {
    edges {
      node {
        slug
        headline
          seo_title
          customer_logos {
            logo_image
          }
          hero_image
          call_to_action
      }
    }
  }
 }
`