- 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
onceden derlenmis HTML, CSS and Javascript dosyalarini tarayiciya iletir. Dinamik web sitelerine gore esnek, hafif, hizli ve yayina almasi ucuzdur
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.
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.
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.
Statik siteler tamamen pre-built edilmis dosyalardan olustugu icin sadece bant-genisligini arttirarak bile sitenizi yogun trafik altinda ayakta tutabilirsiniz.
- Hugo
- VuePress
- Jekyll
- Hexo
- 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
npm init gatsbyterminal 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
cd whatIsGatsby
/*
Bu benim projeye ve proje dosyasina verdigim isim
siz ne isterseniz onu verebilirsiniz.
*/
//calistirmak icinse
npm run develop
//or
yarn developardindan 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
//index.js dosyasinin icerigini temizleyip kendi istegimize gore dolduralim
import React from 'react'
const IndexPage = () => {
return (
<h1>Merhaba Gatsby</h1>
)
}
export default IndexPage
/*localhost:8000 adresine gittiginizde ekraninizda Merhaba Dunya yazisini
gormus olmaniz gerek.*/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.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
Sitenin Basligini, Linkini, Aciklamasini barindiri ve nerede kullanmak isterseniz buradan cekebilirsiniz bu bilgileri.
//gatsby-config.js
module.exports = {
siteMetaData: {
title: `Caner Tuzunar`,
siteUrl: `https://canertuzunar.github.io`,
description: `Personal WebSite, Portfolio, Blog`
}
}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
//gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-sass`
//Ya da
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`
}
}
]
}Gatsby ES6 Promise API'sini kullaniyor. Gatsby varsayilan olarak Promise polyfill aktif olarak geliyor, cunku bazi tarayicilar desteklemiyor.
//gatsby-config.js
module.exports = {
polyfill: false,
}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.
---
title: Statik Web Site Nedir ve GatsbyJS
author: Caner Tuzunar
---# author.yaml
- id : Caner Tuzunar
bio: Merakli bir yazilim gelistirici.
twitter: "@tuzunar"olusturdugumuz author dosyasini markdown dosyalarina haritalayip verileri otomatik olarak kullanabiliriz.
//gatsby-config.js
module.exports = {
plugins: [...],
mapping: {
"MarkdownRemark.frontmatter.author": `AuthorYaml`,
}
}#graphql
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
rawMarkdownBody
frontmatter {
title
author {
# author objesinden id degerini getirecek
id
}
}
}
}//sonuc soyle olacaktir
{
"data": {
"markdownRemark": {
"edges": [
{
"node": {
"rawMarkdownBody": "# Buralar Degerlenecek",
"frontmatter": {
"title": "GameWiki",
"author": {
"id": "Caner Tuzunar"
}
}
}
}
]
}
},
"extensions": {}
}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
//gatsby-node.js
exports.onPostBuild = ({ repoter }) => {
reporter.info(`Siteniz yayinlamaya hazir hale geldi!`)
}
/*Build islemi bittikten sonra onPostBuild API sayesinde
bize build isleminin bittigini yazan bir uyari donecek*/Gatsby Browser API kullanici tarafi ile etkilesim kurmaniz icin bir cok API sunar. Ayrica kullanici tarafinda tarayici ustunde aksiyon almanizi saglar.
//gatsby-browser.js
exports.onRouteUpdate = ({ location, preLocation }) => {
console.log("new pathname", location.pathname)
console.log("old pathname", prevLocation ? prevLocation.pathname : null)
}
//Ya da
import "./src/styles/reset.css" //reset.css dosyasimizi direk tarayica ekleyecektir.Gatsby'nin en buyuk avantajlarindan bir tanesi ise hali hazirda GraphQL ile entegre olmasi
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
# Ornek bir query ile nasil calistigini anlayalim. Ilk oncelikle src klasoru altinda
# posts diye bir klasor olusturalim ardindan localhost:8000/__graphql adresine gidelim
# "query MyQuery" taginin icini temizleyelim ve ardindan su sorguyu girelim
query MyQuery {
allDirectory(filter: {absolutePath: {regex: "/src/"}}) {
edges {
node {
name
}
}
}
}
# Sonuc Soyle olacaktir
{
"data": {
"allDirectory": {
"edges": [
{
"node": {
"name": "posts"
}
}
]
}
},
"extensions": {}
}
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 yerlesik bir bilesendir ve veri katmanindan bilgileri gatsby sayfalarina iletir. Sayfa basina tek bir sayfa sorgusu olusturulabilir.
//PageQuery bir metod degildir. Export edilebilir bir degisken olarak kullanilir
export const HomePageQuery = graphql`
{
site {
siteMetadata {
description
}
}
}
`Sayfa sorgusu olusturmak icin graphql sorugusu bir degiskene atamak gerekmez. Gatsby sayfa icerisinde export edilmis bir graphql yapisi olup olmadigini kontrol eder
Kullanimi
const HomePage = ({ data }) => {
return (
<div>
{data.site.siteMetadata.description}
</div>
)
}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
<StaticQuery
query={graphql`
query HeadingQuery {
site {
siteMetadata {
title
}
}
}
`}
render={(data) => (
<header>
<h1>{data.site.siteMetadata.title}</h1>
</header>
)}
/>Bu hook StaticQuery ile benzer isleve sahiptir. Bir ihtiyac duymaz veri katmanindan donecek olan sonucu bir degiskene aktarir, bu degisken bilesen icinde kullanilabilir.
const data = useStaticQuery(graphql`
query HeaderQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<header>
<h1>{data.site.siteMetadata.title}</h1>
</header>
)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.
//Projemizi olusturmak icin su adimlari takip edelim
npm init gatsby
/*Projeyi Example-Gatsby-Project olarak adlandirdim
siz kendi tercih ettiginiz bir ismi koyabilirsiniz*/
/* Kurulumu Resim 1 de oldugu gibi sade bir sekilde gerceklestirdim */
cd Example-Gatsby-Projectyarn add gatsby-transformer-remark gatsby-plugin-frontmatter-featured-image//gatsby-config.js
module.exports = {
siteMetadata: {
title: "example-gatsby-project",
},
plugins: [
"gatsby-plugin-image",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
"gatsby-transformer-remark",
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: "./src/images/",
},
__key: "images",
},
{
resolve: "gatsby-source-filesystem",
options: {
path: "./src/blog/"
}
}
],
};yazdigimiz yazilari sunmak icin bize bir blog sayfasi lazim bunu olusturmak icin ise src klasorunun altinda template klasoru olusturup icinde blog-template.jsx olusturalim
//src/template/blog-template.jsx
import React from 'react'
export default function Blog({pageContext: { frontmatter, html }}) {
return(
<>
<h1>{frontmatter.title}</h1>
<p>{frontmatter.date}</p>
<div dangerouslySetInnerHTML={{__html: html}}></div>
</>
)
}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
const path = require('path')
const { createFilePath } = require(`gatsby-source-filesystem`)
/* adi ilk gonderi olan bir markdown dosyasi oldugunu varsayalim. bu dosyayi linklerken
kullanilacak olan patterndir dosyanin linkini /ilk-gonderi olarak olusturacaktir*/
exports.onCreateNode =({ node, getNode, actions}) => {
const { createNodeField } = actions
if(node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages`})
createNodeField({
node,
name: `slug`,
value: slug
})
}
}
exports.createPages = async ({graphql, actions, reporter}) => {
const { createPage } = actions
//olusturdugumuz blog sayfasinda kullanmak uzere sorgu hazirliyoruz
const result = await graphql(`
{
allMarkdownRemark(limit:1000) {
edges{
node{
fields{
slug
}
frontmatter{
title
date
description
}
html
rawMarkdownBody
}
}
}
}
`)
//Olusabilecek hatalari gormek icin reporter kullaniyoruz
if(result.errors){
reporter.panicOnBuild(`Graphql Sorgusunda bir hata olustu. ${result.errors}`)
}
//Olusturulan her post dosyasi icin blog sayfasi olusturuyoruz
const blogPostTemplate = path.resolve(`./src/templates/blog.jsx`)
result.data.allMarkdownRemark.edges.forEach( ({node}) => {
const path = node.fields.slug
createPage({
path, //md dosyasi gatsby sayfasi haline geldikten sonra olusacak linki
component: blogPostTemplate, /* md dosyasi goruntulenirken kullanilacak
olan react componenti*/
context: {
pagePath: path,
html: node.html,
frontmatter: node.frontmatter
} /* olusan gatsby sayfalarinin alacagi propslari belirliyoruz */
})
})artik blog klasoru altinda olusturdugumuz her markdown dosyasini gatsby sayfasi haline getirmis bulunuyoruz sirada bir anasayfa olusturup bu bloglarin linkleri liste seklinde anasayfada gostermek.
//src/pages/index.js
import React from 'react'
import { graphql, Link } from 'gatsby'
export default function IndexPage({data}) {
return(
<>
<h1>Gatsby Blog</h1>
<h3>this project created for provide resource to this <a href="https://www.notion.so/tuzunarcaner/Statik-Web-Sitesi-ve-Gatsby-JS-f2a902d281b04c8cb3b0ac97ef49fdf5">
article
</a></h3>
<ul>
{
data.allMarkdownRemark.edges.map(({node}) => {
return <li>
<Link to={node.fields.slug}> {node.frontmatter.title} </Link>
</li>
})
}
</ul>
</>
)
}
export const query = graphql`
query HomeQuery {
allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/blog/"}}) {
edges {
node {
fields {
slug
}
frontmatter{
title
}
}
}
}
}
`blog altinda olusturdugumuz her markdown dosyasini gatsby sayfasi haline getirip bu sayfalarin linklerini artik anasayfamizda gosteriyoruz
Projeye bu linkten ulasabilirisiniz