Gridsome ile Blog Oluşturma: Tüm Yazıları Listeleme ve Sayfalama

Gridsome ile Blog Oluşturma: Tüm Yazıları Listeleme ve Sayfalama

Gridsome, modern web geliştirmenin en popüler yaklaşımlarından biri olan statik site oluşturucular (Static Site Generators – SSG) kategorisinde yer alan, Vue.js tabanlı güçlü bir frameworktür. Geleneksel içerik yönetim sistemlerinin (CMS) aksine, Gridsome gibi SSG’ler, web sitelerini önceden oluşturulmuş HTML, CSS ve JavaScript dosyaları olarak sunar. Bu yaklaşım, sitelerin inanılmaz derecede hızlı yüklenmesini sağlar, güvenlik açıklarını minimize eder ve sunucu maliyetlerini düşürür. Özellikle bloglar, dokümantasyon siteleri ve pazarlama sayfaları gibi içerik odaklı projeler için Gridsome, geliştiricilere mükemmel bir deneyim sunar. Bu makalede, Gridsome kullanarak bir blog nasıl oluşturulur, tüm yazılar nasıl listelenir ve en önemlisi, sayfalama (pagination) özelliği nasıl entegre edilir, adım adım inceleyeceğiz.

Gridsome ve Statik Site Oluşturucuların Yükselişi

Son yıllarda web geliştirme dünyasında statik site oluşturucuların popülaritesi önemli ölçüde arttı. Geleneksel CMS’ler (WordPress, Drupal vb.) dinamik olarak içerik üretirken, her istekte veritabanı sorguları ve sunucu taraflı işlemler gerektirir. Bu durum, özellikle yüksek trafikli sitelerde performans sorunlarına yol açabilir ve sunucu kaynaklarını tüketebilir. SSG’ler ise, geliştirme aşamasında tüm içeriği statik dosyalara dönüştürür. Ortaya çıkan bu statik dosyalar, bir CDN (Content Delivery Network) üzerinden hızla dağıtılabilir, bu da kullanıcılara neredeyse anında yüklenen sayfalar sunar.

Gridsome, bu avantajları Vue.js ekosistemiyle birleştirerek geliştiricilere tanıdık ve verimli bir ortam sunar. GraphQL katmanı sayesinde farklı veri kaynaklarından (Markdown dosyaları, CMS API’leri, veritabanları vb.) veri çekmek son derece kolaylaşır. Bu makalede, blog yazılarını Markdown dosyaları olarak saklayacak ve Gridsome’un GraphQL API’si ile bu verilere erişeceğiz.

Gridsome Projesini Kurulumu

Bir Gridsome projesi başlatmak için öncelikle sisteminizde Node.js ve npm (veya yarn) kurulu olması gerekmektedir. Eğer kurulu değillerse, resmi Node.js web sitesinden indirebilirsiniz.

Önkoşullar ve Proje Oluşturma

Terminalinizi açın ve Gridsome CLI’yi global olarak kurun:

npm install --global @gridsome/cli
veya
yarn global add @gridsome/cli

CLI kurulduktan sonra, yeni bir Gridsome projesi oluşturabiliriz:

gridsome create my-blog
cd my-blog

Bu komut, my-blog adında yeni bir dizin oluşturacak ve Gridsome’un varsayılan başlangıç şablonunu kuracaktır. Proje dizinine girdikten sonra, geliştirme sunucusunu başlatabiliriz:

gridsome develop

Bu komut, http://localhost:8080 adresinde çalışan bir geliştirme sunucusu başlatacaktır. Ayrıca, Gridsome’un GraphQL veri katmanını keşfetmenizi sağlayan bir GraphQL Playground’a http://localhost:8080/___explore adresinden erişebilirsiniz. Bu araç, veri sorgulama işlemlerini test etmek için son derece kullanışlıdır.

Proje Yapısı

Yeni oluşturulan Gridsome projesinin temel dizin yapısı şöyledir:

* src/: Tüm Vue bileşenleri, sayfaları ve şablonları burada bulunur.
* src/pages/: Gridsome, bu dizindeki her .vue dosyasını otomatik olarak bir sayfaya dönüştürür. Örneğin, src/pages/Index.vue ana sayfa, src/pages/About.vue ise /about yolunda erişilebilir bir sayfa oluşturur.
* src/components/: Yeniden kullanılabilir Vue bileşenleri burada saklanır.
* src/layouts/: Sayfalar için ortak düzenler (header, footer vb.) burada tanımlanır.
* src/templates/: Dinamik olarak oluşturulan sayfalar (örneğin, her blog yazısı için ayrı bir sayfa) için şablonlar burada bulunur.
* static/: Doğrudan web sunucusuna kopyalanacak statik dosyalar (resimler, fontlar vb.) burada saklanır.
* gridsome.config.js: Gridsome projesinin ana yapılandırma dosyasıdır. Eklentiler, veri kaynakları ve genel site ayarları burada tanımlanır.
* gridsome.server.js: Gridsome’un Node.js API’sini kullanarak daha gelişmiş sunucu tarafı işlemler (dinamik sayfa oluşturma gibi) için kullanılır.

Veri Kaynağı: Markdown Yazılar

Blog yazılarını yönetmenin en basit yollarından biri, her yazıyı ayrı bir Markdown dosyası olarak saklamaktır. Gridsome, bu Markdown dosyalarını kolayca ayrıştırabilir ve GraphQL katmanına entegre edebilir.

Markdown Dosyalarını Oluşturma

Öncelikle, blog yazılarını saklamak için bir dizin oluşturalım:

mkdir -p src/content/blog

Şimdi bu dizine birkaç örnek Markdown dosyası ekleyelim. Her dosya, yazının başlığını, tarihini, yazarını ve diğer meta verilerini içeren bir “front-matter” bölümü ile başlamalıdır. Front-matter, YAML formatında yazılır.

src/content/blog/ilk-yazi.md:

---
title: İlk Blog Yazım
date: 2023-01-15
author: Ahmet Yılmaz
excerpt: Bu, Gridsome ile oluşturduğum ilk blog yazımın kısa bir özeti.
cover_image: /uploads/ilk-yazi-kapak.jpg
---

Merhaba dünya! Bu benim Gridsome ile oluşturduğum ilk blog yazım. Gridsome'un statik site oluşturma yetenekleri sayesinde performans ve geliştirme hızı konusunda harika bir deneyim yaşıyorum.

Bu yazıda, Gridsome'un temel kurulumunu ve Markdown ile içerik yönetimini ele aldık. Yaklaşan yazılarda daha derin konulara dalacağız.

Kod Örneği:

javascript
// Örnek JavaScript kodu
console.log(‘Gridsome harika!’);

function greet(name) {
return Merhaba, ${name}!;
}

console.log(greet(‘Gridsome Kullanıcısı’));

Umarım bu başlangıç size ilham verir!

src/content/blog/ikinci-yazi.md:

---
title: Gridsome ile GraphQL Kullanımı
date: 2023-02-20
author: Ayşe Demir
excerpt: Gridsome'un GraphQL veri katmanının nasıl çalıştığını keşfedin ve verilerinizi nasıl sorgulayacağınızı öğrenin.
cover_image: /uploads/ikinci-yazi-kapak.jpg
---

Gridsome, Vue.js geliştiricileri için GraphQL ile sorunsuz bir entegrasyon sunar. Bu sayede, uygulamanızın ihtiyaç duyduğu verileri kolayca çekebilirsiniz.

GraphQL Playground'u kullanarak sorgularınızı test edebilir, veri yapınızı anlayabilir ve istediğiniz alanları seçerek yalnızca ihtiyacınız olan veriyi alabilirsiniz.

Örnek GraphQL Sorgusu:

graphql
query {
allBlogPost {
edges {
node {
title
date
path
}
}
}
}

Bu sorgu, tüm blog yazılarının başlıklarını, tarihlerini ve yollarını döndürecektir.

Gridsome’u Markdown Kaynaklarını Kullanmaya Ayarlama

Gridsome’un Markdown dosyalarımızı tanıması ve GraphQL katmanına eklemesi için gridsome.config.js dosyasını yapılandırmamız gerekiyor. Bunun için gridsome-source-filesystem ve gridsome-transformer-remark eklentilerini kullanacağız.

Öncelikle bu eklentileri kuralım:

npm install --save gridsome-source-filesystem gridsome-transformer-remark
veya
yarn add gridsome-source-filesystem gridsome-transformer-remark

Şimdi gridsome.config.js dosyasını açın ve aşağıdaki gibi güncelleyin:

module.exports = {
  siteName: 'Gridsome Blog',
  siteDescription: 'Gridsome ile oluşturulmuş basit bir blog.',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'src/content/blog//*.md', // Markdown dosyalarının yolu
        typeName: 'BlogPost', // GraphQL'de kullanılacak tip adı
        remark: {
          // Remark transformer için ayarlar
          // Bu kısma ek eklentiler eklenebilir (örneğin kod vurgulama)
          plugins: [
            // Örneğin, kod vurgulama için prismjs eklentisi
            // require('@gridsome/remark-prismjs')
          ]
        }
      }
    }
  ],
  templates: {
    BlogPost: '/blog/:slug' // Her BlogPost için dinamik sayfa oluşturma
  }
}

Bu yapılandırma ile:
* @gridsome/source-filesystem eklentisi, src/content/blog dizinindeki tüm .md dosyalarını tarayacak.
* Bu Markdown dosyaları, GraphQL katmanında BlogPost adında bir veri tipi olarak erişilebilir olacak.
* remark özelliği sayesinde, Markdown içeriği HTML’e dönüştürülecek ve front-matter alanları da GraphQL’de sorgulanabilir hale gelecek.
* templates bölümü, her BlogPost için otomatik olarak /blog/:slug formatında bir sayfa oluşturulacağını belirtir. :slug değeri, Markdown dosyasının adından veya front-matter’daki slug alanından türetilir.

gridsome.config.js dosyasını güncelledikten sonra, geliştirme sunucusunu yeniden başlatmanız gerekebilir (gridsome develop).

GraphQL ile Veri Sorgulama

Gridsome’un en güçlü özelliklerinden biri, GraphQL veri katmanıdır. Tüm veri kaynakları (bu durumda Markdown dosyalarımız) tek bir GraphQL API üzerinden erişilebilir hale gelir.

GraphQL Playground’u Kullanma

gridsome develop komutunu çalıştırdıktan sonra, tarayıcınızda http://localhost:8080/___explore adresine gidin. Burası GraphQL Playground’dur. Sol taraftaki “DOCS” sekmesini açarak mevcut veri tiplerini ve alanlarını görebilirsiniz. allBlogPost gibi bir tipi görmelisiniz.

Şimdi tüm blog yazılarını sorgulayalım:

query {
  allBlogPost {
    edges {
      node {
        id
        title
        date
        path
        excerpt
        author
        content // Markdown içeriğinin HTML'e dönüştürülmüş hali
        cover_image
      }
    }
  }
}

Bu sorguyu çalıştırdığınızda, Markdown dosyalarınızdan gelen tüm verileri JSON formatında göreceksiniz. content alanı, Markdown’dan HTML’e dönüştürülmüş yazının kendisini içerir.

Tüm Yazıları Listeleme

Artık verilerimize GraphQL üzerinden erişebildiğimize göre, bu yazıları ana sayfamızda veya bir blog listeleme sayfasında gösterebiliriz. src/pages/Index.vue dosyasını ana sayfa olarak kullanabiliriz.

query BlogPosts {
  posts: allBlogPost(sortBy: "date", order: DESC) {
    edges {
      node {
        id
        title
        date (format: "DD MMMM, YYYY")
        author
        excerpt
        path
        cover_image
      }
    }
  }
}

Yukarıdaki kodda:
* bloğu, GraphQL sorgumuzu tanımlar. allBlogPost tipinden tüm yazıları date alanına göre azalan sırada (en yeni yazılar en üstte) çeker.
* posts: allBlogPost(...) ile sorgunun sonucunu posts adında bir değişkene atarız. Bu değişkene daha sonra $page.posts ile erişilir.
* date (format: "DD MMMM, YYYY") ile tarihi okunabilir bir formata dönüştürüyoruz.
*

query BlogPosts ($page: Int) {
  posts: allBlogPost(sortBy: "date", order: DESC, perPage: 5, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
      hasPreviousPage
      hasNextPage
    }
    edges {
      node {
        id
        title
        date (format: "DD MMMM, YYYY")
        author
        excerpt
        path
        cover_image
      }
    }
  }
}

query BlogPosts ($page: Int) {
  posts: allBlogPost(sortBy: "date", order: DESC, perPage: 5, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
      hasPreviousPage
      hasNextPage
    }
    edges {
      node {
        id
        title
        date (format: "DD MMMM, YYYY")
        author
        excerpt
        path
        cover_image
      }
    }
  }
}

  
    ← Önceki Sayfa
  

  
    {{ n }}
  

  
    Sonraki Sayfa →
  

// gridsome.config.js
module.exports = {
  // ...
  templates: {
    BlogPost: '/blog/:slug' // Her BlogPost için dinamik sayfa oluşturma
  }
}

query BlogPost ($path: String!) {
  post: blogPost (path: $path) {
    title
    date (format: "DD MMMM, YYYY")
    author
    content
    cover_image
  }
}

npm install --save @gridsome/remark-prismjs
veya
yarn add @gridsome/remark-prismjs

// gridsome.config.js
module.exports = {
  // ...
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'src/content/blog//*.md',
        typeName: 'BlogPost',
        remark: {
          plugins: [
            require('@gridsome/remark-prismjs') // Kod vurgulama eklentisi
          ]
        }
      }
    }
  ],
  // ...
}

// main.js
import DefaultLayout from '~/layouts/Default.vue'
import 'prismjs/themes/prism.css' // Bir Prism.js teması

export default function (Vue, { head }) {
  Vue.component('Layout', DefaultLayout)
}