Image for post
Image for post
GatsbyJS ile Modern Web Sitesi 1.Bölüm from Berkay Demirbas

⚛ReactJS ve GatsbyJS ile Modern Web Sitesi | 1. Bölüm (Başlangıç ve Kurulum)

GatsbyJs Nedir?

Bangıç

Gatsby, React tabanlı modern ve hızlı web uygulamaları yapmanıza olanak sağlayan açık kaynak bir framework’tür. Github’da 35k+ yıldıza sahiptir.

Bağımlılıklarına buradan ulaşabilirsiniz.

Gereksinimler:

  • 1 adet internete bağlı bilgisayar

in kaynaklar:

Kurulum

Öncelikle Gatsby komut arayüzünü (CLI) yüklüyoruz. Npm ya da Yarn paket yükleyicilerinden birini seçebilirsiniz.

Sonra yeni bir proje başlatalım:

Bu noktadan sonra paket yükleyicinizden herhangi bir hata almadıysanız, bağımlılıklarınız eksiksizse, projeniz oluştu demektir.

Detaylı arayüz komutlarına buradan ulaşabilirsiniz. Ancak en çok kullanacağınız temel komutlar şu şekilde:

Develop: IDE üzerinde paket geliştirmelerinizi yapabilirsiniz ve eş zamanlı olarak http://localhost:8000/ adresinde önizleyebilirsiniz. Yerel ağ üzerinde diğer kullanıcılarla paylaşmak için, gatsby develop -H lokaladresiniz -p 8000komutunu kullanabilirsiniz.

Build: Kodlarınızdaki hataları kontrol etmek için ve deploy öncesi yüklediğiniz paketlerin doğru compile olup olmadığını test etmek için kullanabilirsiniz.

Serve: Bu kısımda sitenizin react üzerinde nasıl render olduğunu, deploy öncesi kontrol edebilirsiniz. Sitenizin arama motorları tarafından nasıl göründüğünü, sitenizin yüklenme hızını ve mobil uyumluluk gibi SEO testlerinizi yapabilirsiniz.

Aynı şekilde sitenizin renderli halini gatsby serve -H lokaladresiniz -p 8000 ile serve edebilirsiniz.

Geliştirme

Şimdi herhangi bir IDE üzerinde geliştirmeye başlayabilirsiniz.
Mevcut dosya ağacınız şu şekilde olmalı:

Statik Sayfa Oluşturma

Web siteniz için siteniz.com/iletisim gibi bir uzantı için, /pages içerisinde iletisim.js dosyası oluşturmalısınız.

/pages/iletisim.js

Sayfalar arası navigasyon için, layoutunuzda bir şablon oluşturarak <Link /> komponentini kullanmalısınız. Harici olarak React-Router’dan bağımsız olarak, Gatsby kütüphanesini kullanın.

Dinamik Sayfa Oluşturma

Dinamik olarak içerik sayfaları oluşturmak isterseniz, burada devreye CMS consepti (Wordpress gibi) ve bir veritabanı gereksinimi devreye giriyor.

CMS kısmını Markdown dosyası ile halledebilirsiniz ancak teknik detay gerektirdiğinden, deploying aşamasında da altyapınıza ekleyebileceğiniz bir çok pluginler var. Netlify CMS‘yi de kullanabilirsiniz. Daha sonraki bölümlerde bunlara değinmeye çalışacağım. Ancak temelde dinamik sayfa oluşturma şu şekilde:

Markdown dosyalarımızı, şablon olarak kullanıp bunları serve edebilmek için gatsby-transformer-remark eklentisine ihitaycımız var.

/gatsby-config.js dosyasında eklentimizi düzenleyelim:

/src/contentiçerisinde bir Markdown dosyası oluşturarak, dinamik blog sayfasında post edilmek üzere olması gereken temel verileri belirleyelim.

/src/content/dinamik-sablon.md

/gatsby-node-js dosyası içerisinde Markdown post dosyalarımızın, GraphQL sorgularıyla çağırılıp build etmesini sağlayalım.

/src/template içerisinde de şablonumuzun hangi sorgularla çağırılıp build edileceğini belirleyelim:

Son olarak gatsby develop komutuyla http://localhost:8000/dinamik-sablonadresine giderseniz, şablonunu oluşturduğunuz dosya üzerinde, .md dosyanızdaki verilerin çağırılarak dinamik sayfa oluşturduğunu görürsünüz.

Kaynaklar:

Written by

JAMstack Developer / UI-UX Designer / Growth Hacker raufsamestone.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store