GatsbyJS ile Modern Web Sitesi 1.Bölüm from Berkay Demirbas
Berkay Demirbas
Aug 13 · 4 min read

Gatsby, React tabanlı modern ve hızlı web uygulamaları yapmanıza olanak sağlayan ücretsiz bir framework’tür. Kyle Mathew tarafından geliştirilmiştir. Github’da 35k+ yıldıza sahiptir. Bağımlılıklarına buradan ulaşabilirsiniz.

Gereksinimler:

  • 1 adet internete bağlı bilgisayar

Başlangıç için kaynaklar:


Kurulum

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

yarn add gatsby-cli

Sonra yeni bir proje başlatalım:

gatsby new sitenizin-ismi
cd sitenizin-ismi

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

C:\gatsby-site\app>gatsby develop
(node:10308) ExperimentalWarning: The fs.promises API is experimental
success open and validate gatsby-configs - 0.084 s
success load plugins - 0.936 s
success onPreInit - 0.040 s
success initialize cache - 0.045 s
success copy gatsby files - 0.167 s
success onPreBootstrap - 0.050 s
success source and transform nodes - 0.204 s
success building schema - 0.251 s
success createPages - 0.033 s
success createPagesStatefully - 0.095 s
success onPreExtractQueries - 0.042 s
success update schema - 0.057 s
success extract queries from components - 0.356 s
success write out requires - 0.070 s
success write out redirect data - 0.038 s
success Build manifest and related icons - 0.178 s
success onPostBootstrap - 0.223 s

info bootstrap finished - 7.627 s

success run static queries - 0.225 s — 3/3 17.50 queries/second
success run page queries - 0.093 s — 5/5 118.82 queries/second
success Generating image thumbnails — 6/6 - 0.387 s
DONE Compiled successfully in 4230ms 15:33:50⠀
You can now view gatsby-starter-default in the browser.

http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema

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

gatsby developgatsby buildgatsby serve

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ı:

|-- /.cache
|-- /plugins
|-- /public
|-- /src
|-- /pages
|-- /templates
|-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

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

import React from "react"const Iletisim= () => (
<main>
<h1>Bize Ulaşın</h1>
</main>
)
export default Iletisim

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.

import React from "react"
import { Link } from "gatsby"
const Iletisim= () => (
<main>
<h1>Bize Ulaşın</h1>
<Link style={{ color: `purple` }} to="/">Ana Sayfa</Link>
</main>
)
export default Iletisim

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:

module.exports = {
plugins: [
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `content`,
path: `${__dirname}/src/content`,
},
},
]

/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

---
title: Blog Başlığı
date: 13.08.2019
path: /dinamik-sablon
---

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

const path = require(`path`)exports.createPages = async ({ actions, graphql }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/post.js`)const result = await graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
frontmatter {
path
}
}
}
}
}
`)
if (result.errors) {
console.log(result.errors)
throw new Error("Hatalar için konsola bakın!")
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: blogPostTemplate,
context: {},
})
})
}

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

import React from "react"
import { graphql } from "gatsby"
export default function Template({ data }) {
const { markdownRemark } = data
const { frontmatter, html } = markdownRemark
return (
<div className="blog-post">
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
)
}
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`

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:

Berkay Demirbas

Written by

JAMstack SEO Developer, Digital Marketing Director

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade