⏳ Özetle Gatsby: Altyapısında React ve GraphQL kullanan hem çok hızlı hem çok performanslı hem de server side rendered web uygulamaları oluşturmak için kullanılan bir static site generator'dür. Site içeriğini oluşturmak için Markdown, JSON, CSV veya Contentful gibi içerik yönetici API'leri kullanır.

Gatsby'i kısaca özetlediğimize göre gatsby hakkındaki düşüncelerimi aktarmaya başlayabilirim. Önce gatsby ile olan hikayemden bahsedeyim. Uzun zamandır bir blog sayfam olsun; bildiklerimi, öğrendiklerimi aktarmak ve en azından kendimce türkçe içerik sağlamak istiyordum. Bunun üzerine bir blog sitesi oluşturmak için neler kullanabilirim diye bir liste oluşturdum.

• Wordpress
• Blogspot
• Backend + Frontend sıfırdan bir blog (gereksiz zaman kaybı)
• Jekyll
• Hexo
• Gatsby 😍

Bu liste üzerinde çok düşündüm ve gatsby'de karar kıldım. Neden gatsby'i seçtiğimden başlıklar halinde bahsetmeye çalışacağım.

Yazı Başlıkları

• Neden Gatsby?
• Öğrenme Süreci
• Sitede Neler Kullandım?
• Siteyi Yayına Alma Sürecim
• Son Sözlerim

Hadi devam edelim...

Neden Gatsby?

Bu sorunun ilk cevabı yeni ve güncel bir teknoloji öğrenmek istemem diye tahmin ediyorum. Şuan gatsby hiç beklemediğim kadar popüler ve çok büyük şirketler tarafından kullanılmaya başlandı. Aslında tek taşla birden fazla kuş vuracaktım. Hem yeni bir teknoloji öğrenecektim hem React ve GraphQL tarafımı daha da geliştirecektim hem de kendim için güzel bir blog sitesi oluşturacaktım. Kolları sıvadım ve hemen gatsby'nin anasayfasına girip -neymiş lan bu- diye baktım? Hemen size gatsby'nin birkaç harika özelliğini sıralayayım.

• Altyapısında güncel teknolojiler kullanıyor. (React & GraphQL)
• Herhangi bir database bağımlılığı olmadan içerik oluşturabiliyor.
• Tek bir dille (javascript) baştan sona website oluşturabiliyor.
• PWA desteği var.
• Static bir çıktı ürettiği için olduça masrafsız.
• Dökümantasyonu çok özenli hazırlanmış. Takılıpta bulamayacağınız bir sorun neredeyse çok az.
• Community'si gün geçtikçe artıyor.
• Çok fazla plugin desteği var.
• Çoklu dil desteği mevcut.
• Performans iyileştirmesi için çok güzel özellikler sunuyor.
• Ve daha nicesi...

Öğrenme Süreci

Evet o kadar övgüden sonra gelelim bazı sıkıntılı noktalara. Öğrenme sürecinde gerçekten zorlandım. Belki çok üstüne gitmedim belki de çok kurcalayacak zamanım yoktu bilmiyorum. Ama öğrenmek için baya bi çaba sarf ettiğimi biliyorum. İşin güzel yanı öğrenmeye ve yapıyı anlamaya başladıktan sonra gatsby'i kullanması çok zevkli bir hale geliyor. O yüzden ilk başlarda çok hızlı sonuçlar görmeye çalışmamak ve sabırlı olmak lazım. Neyse gatsby'i öğrenme sürecinde kullandığım ve faydalandığım bazı linkleri paylaşıp diğer bölüme geçelim.

• Gatsby dökümantasyonu
• John Smilga'nın Udemy'deki kursu
• Detaylı bir gatsby tutorial serisi
• Andrew Mead'ın Gatsby Bootcamp'i
• Stackoverflow, dev.to vs.

Sitede Neler Kullandım?

Bu bölümde de blog'umu kodlarken hangi araçları kullandığımı aktarmaya çalışacağım. Kabaca blog içeriğini en kolay yoldan oluşturabilmek için markdown, styling için sass, yorumlar için disqus, code highlighting için prismjs ve seo tarafındaki düzenlemeler için de react-helmet kullandım.

Kullandığım tüm eklentiler için package.json dosyamı aşağıda paylaşıyorum.

{
  // ...
  "dependencies": {
    "@mdx-js/mdx": "^1.5.1",
    "@mdx-js/react": "^1.5.1",
    "disqus-react": "^1.0.7",
    "gatsby": "^2.18.17",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-manifest": "^2.2.34",
    "gatsby-plugin-mdx": "^1.0.57",
    "gatsby-plugin-sass": "^2.1.26",
    "gatsby-plugin-sharp": "^2.3.4",
    "gatsby-plugin-sitemap": "^2.2.24",
    "gatsby-remark-images": "^3.1.34",
    "gatsby-remark-prismjs": "^3.3.28",
    "gatsby-remark-reading-time": "^1.1.0",
    "gatsby-source-filesystem": "^2.1.38",
    "node-sass": "^4.13.0",
    "prismjs": "^1.17.1",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-helmet": "^5.2.1"
  }
  // ...
}

Siteyi Yayına Alma Sürecim

Siteyi yayına almak sandığımdan da kolay oldu. Gatsby kendi içinde çok güzel bir build sistemine sahip. gatsby build komutuyla projenin build olmuş halini alabiliyoruz. Bu almış olduğum build'i github'da oluşturduğum private repo'da barındırıyorum. Aynı zamanda siteyi yayınlamak için github pages kullandım. Github pages repo adınızla ulaşacabileceğiniz bir web adresi sunuyor. Bu web adresini de var olan bir domain'e yönlendirme işlemi yapabiliyoruz. Son olarak build işlemlerini daha da kolaylaştırmak için github-actions kullanıyorum. Bu da yaptığım her git push komutu sonrası yeni bir build oluşturup sitenin güncellenmesini sağlıyor.

Son Sözlerim

Evet hem blog sitemi oluşturma sürecim hem de gatbsy hakkında ufak tefek bilgiler vermeye çalıştım. Gatsby'nin giderek popülerleşeceğine de inanıyorum. Kısa zamanda da gatbsy kullanarak sıfırdan bir proje nasıl oluşturulur ile ilgili bir yazı paylaşıyor olacağım.