Icindekiler
- Statik Site Nedir ve Gatsby
- Statik Site Nedir?
- Hiz ve Performans
- Guvenlik
- Gelistirme
- Olceklendirme
- GatsbyJS Nedir?
- Kurulum
- Gatsby Dosyalari
- Gatsby Config
- Gatsby Browser
- Gatsby Node
- Gatsby Veri Katmani
- GraphQL
- Sorgulari(Sayfa ve Sayfa Propslari)
- Statik Sorgular
- Ornek Proje
- Kaynakca
Statik Site Nedir?
onceden derlenmis HTML, CSS and Javascript dosyalarini tarayiciya iletir. Dinamik web sitelerine gore esnek, hafif, hizli ve yayina almasi ucuzdur
Hiz ve Performans
Sayfayi hazirlamak icin API veya veritabanindan sonuc donmesini beklemedigi icin statik web siteleri dinamik sitelere gore hizlidir. Ayrica web serverdan donmesi gereken sey pre-built edilmis HTML, CSS, JS dosyalaridir. Hizli acilan web sayfalari seo optimazsyonunda statik web sitelerine avantaj sagliyor.
Guvenlik
Hackerlar dinamik sitelere sizmak icin daha fazla firsata sahiptir cunku butun sistem birbirine baglidir fakat statik web sitelerin bagimliligi yoktur iceriklerinizi tuttugunuz veri tabanlarina dogrudan bagli degildir bu hackerlara sizmak icin daha az giris noktasi verir.
Gelistirme
Son yillarda statik sitelerin populerlesmesiyle birlikte statik site uretmek icin bir cok framework cikti. Bu frameworkler bir cok acidan gelistiricelere kolaylik saglamakta markdown dosyalarini blog postu haline getirmek, React'in populerligi sayesinde yayginlasan JSX ile statik siteler uretmek gibi bir cok kolaylik sagliyorlar.
Olceklendirme
Statik siteler tamamen pre-built edilmis dosyalardan olustugu icin sadece bant-genisligini arttirarak bile sitenizi yogun trafik altinda ayakta tutabilirsiniz.
Static WebSite Generators
- Hugo
- VuePress
- Jekyll
- Hexo
- Gatsby JS
Gatsby JS
Gatsby React tabanli acik kaynak bir framework. Blog, Portfolyo sitesi, sirket tanitim sayfasi uretebilirsiniz. Sundugu eklentiler ile birlikte kolay ve efektif bir gelistirme sureci olusturuyor yazimizin ilerleyen kisimlarinda bunlara deginecegiz. Ufak bir blog olusturarak hem gatsby'i taniyalim hem de ilk projemizi gelistirelim.
Kurulum
https://gist.github.com/2226f07a5e4d37f8f7202c195a7234c8
terminal ekraninda gelistirme surecini hizlandirmak icin size bir kac onayar soracak sade bir kurulum yapacagim.
Y tusuna veya enter tusuna basarak kurulumu baslatabilirsiniz. kurulum bittikten sonra
https://gist.github.com/9561fff37dff7a2bf47a0b8271fba82e
ardindan tarayicinizda localhost:8000 baglantisina gittinizde bu sayfayi goruyorsaniz basariyla kurulumu tamamlamissiniz demektir.
herhangi bir kod editorunde projeyi actiginiz zaman dosya dizininiz soyle olacaktir.
hazir gelen index.js dosyasini duzenleyerek projemizi gelistirmeye baslayabiliriz
https://gist.github.com/7a6fd9459fe808695a0d4714bd4f6e3f
Gatsby Dosyalari
GatsbyJS projenizi yapilandirmak icin bazi ayar dosyalarini sahiptir bu dosyalar sayesinde verilerinizi site icerisinde kullanmak, eklenti kurmak, sayfa olusturmak gibi imkanlar sunar.
Bu dosyalar projenin ana dizininde olmalidir.
Gatsby Config
gatsby-config.js en temel ayar dosyasidir en sade kurulumda bile hali hazirda projenin icinde bulunur cunku gatsby'nin temel ayarlarini barindirir
- Site MetaData
- Eklentiler
- Proxy
- PathPrefix
- Haritalama
- Proxy
Site Metadata
Sitenin Basligini, Linkini, Aciklamasini barindiri ve nerede kullanmak isterseniz buradan cekebilirsiniz bu bilgileri.
https://gist.github.com/a75679414fe1a2844e6e8eb0a0412b41
Eklentiler
Eklentiler Gatsby icin uyarlanmis npm paketleridir. Gatsby icin uyarlanmis npm eklenti paketlerini indirmek eklentileri aktif etmez
eklentileri aktif etmek icin gatsby-config.js dosyasina eklemelisiniz eklentileri aktif etmek iki turlu gerceklesir birincisi sadece eklentilerin ismini girerek digeri ise eklentilerin gerekli veya tercihen duzenlenebilecek ayarlari icin obje olarak girmek
https://gist.github.com/a085eb3c85189de904e68913082c01b7
Polyfill
Gatsby ES6 Promise API'sini kullaniyor. Gatsby varsayilan olarak Promise polyfill aktif olarak geliyor, cunku bazi tarayicilar desteklemiyor.
https://gist.github.com/bcbca8ba601970ff963a2aec1a7aee43
Haritalama
Gatsby veriler arasinda haritalama imkani sagliyor ama bu ne demek?
bu yazi icerisinde gelistirecegimiz boog projesi icin bir senaryo olusturalim. Blogumuz icin olusturacagimiz yazilarin tekrar eden bir kismi olacak Yazar, Yazarin Biyografisi bu veriler tekrar eden veriler olacagi icin bunlar tekrar tekrar yazilara eklemek yerine bunlari otomatik olarak butun yazilara entegre etmemiz bize zaman kazandiracaktir.
https://gist.github.com/f9cee2eec0fe0bcbb58d69963aad72a3
https://gist.github.com/8890ac1b3770a45480c6fa93acf5f323
olusturdugumuz author dosyasini markdown dosyalarina haritalayip verileri otomatik olarak kullanabiliriz.
https://gist.github.com/9811e32b6d059d0d2cfd277d43a61c36
https://gist.github.com/81a1f473ba22afed48821127f9ec53e1
https://gist.github.com/d0ad39bb54e0f5e1cf632498881210ce
Gatsby Node
Gatsby gelistirme surecinde bize bircok eklenti ve API verir. bunlarla GraphQL veri katmanina node ekleyebilir, sayfalar olusturabiliriz(Blog Postlari icin vb.). Buradan sunulan API'larin listesine ulasabilirsiniz. Yapacagimiz ornek projede bu API'lardan bir kacini kullanacagiz. Bir orner vermek gerekirse
https://gist.github.com/ccb92157a631a7c3d727d97914ffb00e
Gatsby Browser
Gatsby Browser API kullanici tarafi ile etkilesim kurmaniz icin bir cok API sunar. Ayrica kullanici tarafinda tarayici ustunde aksiyon almanizi saglar.
https://gist.github.com/d069aca5e4507aaa65d07f5f9ee7f6e8
Gastby Veri Katmani
Gatsby'nin en buyuk avantajlarindan bir tanesi ise hali hazirda GraphQL ile entegre olmasi
GraphQL Nedir?
API'ler icin veri sorgulama ve isleme dilidir. Her Sorgu ve Mutaston icin endpointler hazirlamak yerine tek bir endpoint ustunden bu islemleri yapmaniza olanak saglar.
localhost:8000/__graphql adresinde GraphQL editorunu kullanarak sorgularinizi calistirabilirsiniz
https://gist.github.com/46e4a735cea78e7e7e1d3da197fa576b
Gatsby sorugular icin iki cesit component ve bir tane hook kullanir bunlar
- PageQuery(Compenent)
- StaticQuery(Component)
- useStaticQuery(Hooks)
Tek bir dosya icinde birden fazla query componentini kullanamazsiniz. Yani tek bir dosya icerisinde birden fazla PageQuery veya staticQuery olusturamazsiniz.
PageQuery
PageQuery yerlesik bir bilesendir ve veri katmanindan bilgileri gatsby sayfalarina iletir. Sayfa basina tek bir sayfa sorgusu olusturulabilir.
https://gist.github.com/0bb1f3cf4a5bee2b9cf065e4490ae263
Sayfa sorgusu olusturmak icin graphql sorugusu bir degiskene atamak gerekmez. Gatsby sayfa icerisinde export edilmis bir graphql yapisi olup olmadigini kontrol eder
Kullanimi
https://gist.github.com/63662fb8b941dda33a44f110cdfbefd8
StaticQuery
StaticQuery yerlesik bir bilesendir ve veri katmanindan bilgileri sayfa disi bilesenlere iletir. Bir bilesen sadece bir StaticQuery bilesenine sahip olabilir.
Iki parametre alir.
- query: graphql string
- render: veri dondugunde ekrana gosterecek olan bilesen
https://gist.github.com/3a50c4b3ba964b9e211e582c4a9b34ba
useStaticQuery
Bu hook StaticQuery ile benzer isleve sahiptir. Bir ihtiyac duymaz veri katmanindan donecek olan sonucu bir degiskene aktarir, bu degisken bilesen icinde kullanilabilir.
https://gist.github.com/40d28e39a1c6bf7989acc2db7b3243b7
Ornek Proje
Bu bilgiler dogrultusunda bir proje yapalim, kendi adimiza bir blog olusturalim.
Bu ornek bir proje olacagi icin tasarim kismina fazla ozen gostermeyecegim. Burada amac gatsby'nin veri katmanini tanitmak ve kullanisini gostermek.
https://gist.github.com/112e7b34659c32b069140039f1c61aad
https://gist.github.com/29359e61ca2a05f1f6843c92011ae65c
https://gist.github.com/e7152195d70fcacbdce25a850f762dcd
yazdigimiz yazilari sunmak icin bize bir blog sayfasi lazim bunu olusturmak icin ise src klasorunun altinda template klasoru olusturup icinde blog-template.jsx olusturalim
https://gist.github.com/0428fe3f285ae7d9e8277f3012bed3b1
simdi sirada blog klasoru aslinda olusturdugumuz markdown dosyalarini birer gatsby sayfasi haline getirmek var. Bunun icin gatsby-node.js icinde gatsby tarafindan bize sunulan APIlari kullanacagiz
https://gist.github.com/7e5164a9e2400241f5c79b505a6e4bae
artik blog klasoru altinda olusturdugumuz her markdown dosyasini gatsby sayfasi haline getirmis bulunuyoruz sirada bir anasayfa olusturup bu bloglarin linkleri liste seklinde anasayfada gostermek.
https://gist.github.com/b3d6a0fcb80e4e5d92af7a659931c9a1
blog altinda olusturdugumuz her markdown dosyasini gatsby sayfasi haline getirip bu sayfalarin linklerini artik anasayfamizda gosteriyoruz
Projeye bu linkten ulasabilirisiniz
Top comments (0)