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:

• JAMStack Development
• ReactJS
• GatsbyJS
• GraphQL
• Markdown

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 develop
gatsby build
gatsby 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:

• GatsbyJS — Adding Markdown Pages