Gatsby JS Nedir? Gastby İle Statik Site Oluşturmak

Gatsby, React tabanlı, GraphQL destekli, statik bir site üreticisidir. Geliştiricilerin en son web standartlarını izleyerek optimize edilmiş web uygulamaları oluşturmalarına olanak tanıyan, ücretsiz ve açık kaynaklı bir framework’tür. Öne çıkan ve herkes tarafından sevilen en önemli özelliği hızlı olmasıdır.

Javascript ve Framework Nedir?

Javascript web sayfasını interaktif hale getiren, 1995 ortalarında çıkmış bir programlama dilidir. Günümüze kadar gelişimini sürdüren Javascript ile uyumlu birçok framework yayımlanmıştır. Framework dediğimiz kavram geliştiriciye proje için gerekli olan bileşenleri paket halinde sunulması demektir. Farklı ihtiyaçlar doğrultusunda birçok framework’ler (iskelet/çatı) ismini duyurmuştur. React, Angular, Vue üçlüsü Javascript dilinin en popüler framework’lerindendir.

React Nedir?

React arayüzleri oluşturmaya odaklanmış 2011 yılında Facebook tarafından duyurulmuş bir kütüphanedir. React ile uyumlu binlerce eklentiler, framework’ler bulunmaktadır. Bu özelliği ile geliştiricilere geniş bir çerçeve çizerek dilediklerini geliştirme özgürlüğü verir.

GraphQL Nedir?

GraphQL Facebook’da ortaya çıkmış, kısaca verileri çekmek için kullanılan bir dizi döngü şeklidir. Birden fazla kaynaktan veri alabilirsiniz. İstemcinin ihtiyacı olan veriyi tam olarak tanımlama imkanı sunmaktadır. Bunu da kendine özel bir sistem ile gerçekleştirir.

Farklı veri tabanlarıyla uğraşmak için hepsine tek tek birer “takipçi” adadığımızı düşünün. O işin nerede, nasıl bittiğini takip edecek. Fakat bu yöntem hem karmaşık hem de zaman kaybına yol açıyor. Veri tabanlarını okul, ev, iş yeri olarak düşünün. Hepsinden bilgi almak için tek tek gidildiğini ve de ayrı kodların yazıldığını, karmaşık değil mi? GraphQL ise farklı veri tabanlarını tek bir seferde halledebilecek bir sisteme sahip. Bu özelliğiyle fazlasıyla kullanışlı ve geliştiricilerin tercihleri arasında yer almaktadır.

Statik Site Oluşturmak Nedir?

Kısa bir tanımla statik siteyi tamamıyla HTML dosyalarından oluşmuş site olarak tanımlayabiliriz. 2000’lerin başlarından beri bu tanım hayatımızın içinde ve kullanmaktayız. Değişmekte olan ise statik siteyi oluşturma yöntemdir. Bu yöntemler statik sayfa oluşturucu framework’lerdir. Kaynak dosyayı okuyup tamamıyla bir web sitesi oluşturmaktadırlar. Bu kaynak dosyalarına bağlı bir veri tabanı ya da ek bir kaynak ihtiyacını ortadan kaldırmayı amaçlarlar.

Geliştiricilerin Statik Siteleri Tercih Etme Nedenleri:

Sadelik: Statik sayfaları yayımlamak diğerlerine göre oldukça kolay. Web tarayıcısı tek ihtiyacınız olan kaynak. Hosting için isim seçmenizin ardından sayfanızı çok kolay ve hızlı bir şekilde yayımlayabilirsiniz. Bu konuda Netlify, Github gibi kaynakların desteğini de kullanabilirsiniz.

Güvenlik: Sunucu taraflı kod yazmadığınızdan güvenlik için doğacak bazı problemler de ortadan kalkmış oluyor. Elbette %100 güvenlik diyebileceğimiz bir ortama sahip değil fakat fazlasıyla güvenli olduğu aşikar.

Hızlı Yapısı: Küçük boyuttaki yapısıyla web tarayıcıları üzerinde çok hızlı çalışabilmektedir. Kullanıcıları web sayfalarını statik yapmalarının ardından hız seviyesinin %95’in üzerinde olduğunu sıkça bildirmektedirler. Bunlara ek olarak SEO uyumu da istatistiklerde yüksek çıkmaktadır.

Gatsby JS Özellikleri

React bilenler için en iyi tercihlerin başında gelebilir. Ön yüz konusunda React kullanılmaktadır. React ise bu konuda binlerce eklentiye sahip bir kütüphanedir.

GraphQL yapısını içermesiyle birçok farklı yerden veri çekebilir, veri akışı sağlayabilirsiniz ve sizin yerinize GraphQL bunları kontrol etmektedir.

Birçok eklentiye sahiptir ve kütüphaneler ile uyumludur. React içinde bulunmayan routing gibi işlemleri kendi içinde içermektedir. Bu konuda geliştiricileri fazlasıyla paylaşıma açıktır. Kendi uygulamalarında kullandıkları parçaları, fonksiyonları paylaşmaktadırlar. Bunları kendi uygulamanıza eklemek ise kopyala-yapıştır kadar kolaydır.

Gatsby Kullanan Popüler Uygulamalar

Kullanıcıları tarafından tercih edilme nedenleri:
hızlı olması,
React ile uyumlu olması,
son gün projeleri için ideal olması,
açık kaynak olması,
yeni başlayanlar için birçok yardımcı kaynağa sahip olmasıdır.

Gatsby İle İlk Projeniz

Gatsby’yi okuyup, öğrenmenizin ardından bir Gatsby projesi yapmak isteyenler verdiğimiz adımları takip ederek bunu gerçekleştirebilirler.

Gatsby kendisine ait bir komut satırıyla gelmektedir. İlk başta bunu bilgisayarımıza yükleyelim.

npm install -g gatsby-cli

Komut satırı başarıyla yüklendikten sonra artık Gatsby projeleri oluşturabiliriz.

Bir proje oluştururken sırasıyla gatsby new projenin ismi yazmamızın ardından, proje için gerekli dosyaların oluşmasını bekliyoruz.

gatsby new hello-world

Projemiz oluştuktan sonra, projenin olduğu dizine geçiş yapabiliriz. Ardından projeyi çalıştıracağız.

cd hello-world

gatsby develop

Bu komutun çalışmasının ardından herhangi bir tarayıcı açıp, http://localhost:8000 üzerinden oluşturduğumuz siteyi görüntüleyebiliriz.

Karşınızda “hello world” başlıklı bir ekran çıkacak. Terminali kapatmadan değişiklikleri yapabiliriz. Gatsby hızlı yükleme özelliğine sahip. Sayfayı yenilemeden, terminali çalıştırmadan değişiklikler birebir yansımaktadır.

Değişiklik yapmadan önce projenin içindeki dosyalara göz atalım.

/src/pages web sitesinin sayfalarını içeren klasördür. Bu sayfalardaki her bir kod parçası React parçasıdır. Bunun nedeni görüntü için Gatsby, React kullanmaktadır.

Kodu incelediğimizde basit bir React kodu olduğunu görmekteyiz. Buradaki Hello World yazısını Merhaba Dünya! olarak değiştirip, kaydedelim ve sonucu görelim. Değişim tarayıcıyı yenilenmeden hızla gerçekleşmektedir.

import React from "react"

export default function Home() {
  return <div>Hello World</div>
}

Gatsby Proje Düzeni

Aşağıdaki ekte Gatsby’deki dosyaların listelenmiş halini görüyoruz. Bazı önemli başlıkların ne içerdiğini ele alalım.

├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-config.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

1. /node_modules: Projenin ihtiyaç duyduğu tüm modülleri içeren dosya dizinidir. npm ile indirilmiş modüller burada yer almaktadır.
2. /src: source code, kaynak kodu olan src projenin ön yüzüyle ilgili tüm kodların yer aldığı dizindir.
3. .gitignore: Bu dosya git’e hangi dosyalar için bir sürüm geçmişini izlememesi / tutmaması gerektiğini söyler.
4. .prettierrc: Prettier için gerekli bir yapılandırma dosyasıdır. Prettier, kodunuzun biçimlendirmesini tutarlı tutmanıza yardımcı olacak bir araçtır.
5. gatsby-config.js: Sitenizle ilgili bilgileri ekleyebileceğiniz bölümdür. Adı, tanımı, hangi eklentilerin dahil olacağı gibi bölümleri ekleyebilirsiniz.

Bir örnek:

module.exports = {
  siteMetadata: {
    title: `Teknoloji.org'a Hoş geldiniz`,
    description: `Teknolojiyle ilgili bilgileri, haberleri alabileceğiniz bir teknoloji sayfası.`,
  },
}

Bu örneği kullanarak projemize bir sayfa ekleyelim. Yukarıdaki kodu gatsby-config.js’e ekleyerek buna başlayalım. Bu örnekte GraphQL kullanmış olacağız.

src/pages dizini altında page-2.js adlı bir sayfa oluşturalım ve altta verilen kodu ekleyelim.

Burada gördüğümüz <h2> </h2> tagları arasında az önce config dosyasına eklediğimiz başlığı kullanacağımız bir kod yerleştirdik.

import React from "react"
import { Link } from "gatsby"


const SecondPage = ({data}) => (
  <div>
    <h2>{data.site.siteMetadata.title}</h2>
    <p> GraphQL örneği kullandım. </p>
    <Link to="/">Ana sayfaya dön.</Link>
  </div>
)

export const query = graphql`
  query testQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`
export default SecondPage
 },
}

Kodumuzu kaydettiğimizde sonuca ulaşmak için http://localhost:8000/page-2/ adresine gidelim.

Karşımıza çıkan sayfada başlığı görmekteyiz. Hemen altında verilmiş linkte ana sayfaya dönmekteyiz. Bu Gatsby’nin içinde bulundurduğu Link paketi sayesinde gerçekleşmektedir. Kod içinde de bunu import ederek kullanacağımızı belirtmiştik.

Gatsby projesinin nasıl bir yapıya sahip olduğunu, nasıl çalıştırdığımızı öğrendik. Peki bunu nasıl yayımlayacağız? Bu konuda Netlify, Github, Gatsby Cloud gibi birçok isim ortaya çıkmaktadır.

Yazımızda Netlify’e nasıl yükleme gerçekleştirilir, bahsedeceğiz.

Netlify statik siteler için ideal bir ortam sunmaktadır.

İlk başta Gatsby projemizi yayımlanmaya hazır hale getireceğiz. Bunun için aşağıdaki komutu yazıyoruz. Bu kod sonucu public adında bir dizin oluşacaktır. Bu dizin web sitenizin tarayıcı üzerinde çalışmasını sağlayan tüm statik dosyalara sahiptir.

gatsby build

Ardından projemizi GitLab, Github, Bitbucket gibi bir ortama yükleyeceğiz. Bu konuda bilginiz yoksa Github nedir adlı başlıklı yazımızı okuyabilirsiniz.

Netlify, Github (ve benzeri) yerlerde eklediğiniz kodu takip eder. Siz ne zaman bir güncelleme yaparsanız (commit) eş zamanlı siteyi günceller.

Github üzerine kodunuzu ekledikten sonra Netlify’a giriş yapınız. Ardından Git üzerinden repo’nuzu seçiniz sonrasında istenilen bilgileri giriniz.

Şimdi ise bir çay ya da kahve içmeniz için ideal bir zaman. Web siteniz yaratılırken, gözlerinizi dinlendirin ve geldiğinizde bulun. Birkaç dakika içinde hazır olan yapım aşamasının ardından sitenize ulaşabilirsiniz!