{"id":32898,"date":"2025-10-27T05:41:00","date_gmt":"2025-10-27T02:41:00","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32898"},"modified":"2025-10-27T05:41:00","modified_gmt":"2025-10-27T02:41:00","slug":"gridsome-ile-blog-olusturma-tum-yazilari-listeleme-ve-sayfalama","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gridsome-ile-blog-olusturma-tum-yazilari-listeleme-ve-sayfalama\/","title":{"rendered":"Gridsome ile Blog Olu\u015fturma: T\u00fcm Yaz\u0131lar\u0131 Listeleme ve Sayfalama"},"content":{"rendered":"

<\/p>\n

Gridsome ile Blog Olu\u015fturma: T\u00fcm Yaz\u0131lar\u0131 Listeleme ve Sayfalama<\/h2>\n

Gridsome, modern web geli\u015ftirmenin en pop\u00fcler yakla\u015f\u0131mlar\u0131ndan biri olan statik site olu\u015fturucular (Static Site Generators – SSG) kategorisinde yer alan, Vue.js tabanl\u0131 g\u00fc\u00e7l\u00fc bir frameworkt\u00fcr. Geleneksel i\u00e7erik y\u00f6netim sistemlerinin (CMS) aksine, Gridsome gibi SSG’ler, web sitelerini \u00f6nceden olu\u015fturulmu\u015f HTML, CSS ve JavaScript dosyalar\u0131 olarak sunar. Bu yakla\u015f\u0131m, sitelerin inan\u0131lmaz derecede h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar, g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 minimize eder ve sunucu maliyetlerini d\u00fc\u015f\u00fcr\u00fcr. \u00d6zellikle bloglar, dok\u00fcmantasyon siteleri ve pazarlama sayfalar\u0131 gibi i\u00e7erik odakl\u0131 projeler i\u00e7in Gridsome, geli\u015ftiricilere m\u00fckemmel bir deneyim sunar. Bu makalede, Gridsome kullanarak bir blog nas\u0131l olu\u015fturulur, t\u00fcm yaz\u0131lar nas\u0131l listelenir ve en \u00f6nemlisi, sayfalama (pagination) \u00f6zelli\u011fi nas\u0131l entegre edilir, ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Gridsome ve Statik Site Olu\u015fturucular\u0131n Y\u00fckseli\u015fi<\/h3>\n

Son y\u0131llarda web geli\u015ftirme d\u00fcnyas\u0131nda statik site olu\u015fturucular\u0131n pop\u00fclaritesi \u00f6nemli \u00f6l\u00e7\u00fcde artt\u0131. Geleneksel CMS’ler (WordPress, Drupal vb.) dinamik olarak i\u00e7erik \u00fcretirken, her istekte veritaban\u0131 sorgular\u0131 ve sunucu tarafl\u0131 i\u015flemler gerektirir. Bu durum, \u00f6zellikle y\u00fcksek trafikli sitelerde performans sorunlar\u0131na yol a\u00e7abilir ve sunucu kaynaklar\u0131n\u0131 t\u00fcketebilir. SSG’ler ise, geli\u015ftirme a\u015famas\u0131nda t\u00fcm i\u00e7eri\u011fi statik dosyalara d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Ortaya \u00e7\u0131kan bu statik dosyalar, bir CDN (Content Delivery Network) \u00fczerinden h\u0131zla da\u011f\u0131t\u0131labilir, bu da kullan\u0131c\u0131lara neredeyse an\u0131nda y\u00fcklenen sayfalar sunar.<\/p>\n

Gridsome, bu avantajlar\u0131 Vue.js ekosistemiyle birle\u015ftirerek geli\u015ftiricilere tan\u0131d\u0131k ve verimli bir ortam sunar. GraphQL katman\u0131 sayesinde farkl\u0131 veri kaynaklar\u0131ndan (Markdown dosyalar\u0131, CMS API’leri, veritabanlar\u0131 vb.) veri \u00e7ekmek son derece kolayla\u015f\u0131r. Bu makalede, blog yaz\u0131lar\u0131n\u0131 Markdown dosyalar\u0131 olarak saklayacak ve Gridsome’un GraphQL API’si ile bu verilere eri\u015fece\u011fiz.<\/p>\n

Gridsome Projesini Kurulumu<\/h3>\n

Bir Gridsome projesi ba\u015flatmak i\u00e7in \u00f6ncelikle sisteminizde Node.js ve npm (veya yarn) kurulu olmas\u0131 gerekmektedir. E\u011fer kurulu de\u011fillerse, resmi Node.js web sitesinden indirebilirsiniz.<\/p>\n

\u00d6nko\u015fullar ve Proje Olu\u015fturma<\/h4>\n

Terminalinizi a\u00e7\u0131n ve Gridsome CLI’yi global olarak kurun:<\/p>\n

npm install --global @gridsome\/cli\n
veya<\/h2>\nyarn global add @gridsome\/cli<\/code><\/pre>\n
CLI kurulduktan sonra, yeni bir Gridsome projesi olu\u015fturabiliriz:<\/p>\n
gridsome create my-blog\ncd my-blog<\/code><\/pre>\n
Bu komut, my-blog<\/code> ad\u0131nda yeni bir dizin olu\u015fturacak ve Gridsome’un varsay\u0131lan ba\u015flang\u0131\u00e7 \u015fablonunu kuracakt\u0131r. Proje dizinine girdikten sonra, geli\u015ftirme sunucusunu ba\u015flatabiliriz:<\/p>\n
gridsome develop<\/code><\/pre>\n
Bu komut, http:\/\/localhost:8080<\/code> adresinde \u00e7al\u0131\u015fan bir geli\u015ftirme sunucusu ba\u015flatacakt\u0131r. Ayr\u0131ca, Gridsome’un GraphQL veri katman\u0131n\u0131 ke\u015ffetmenizi sa\u011flayan bir GraphQL Playground’a http:\/\/localhost:8080\/___explore<\/code> adresinden eri\u015febilirsiniz. Bu ara\u00e7, veri sorgulama i\u015flemlerini test etmek i\u00e7in son derece kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Proje Yap\u0131s\u0131<\/h4>\n
Yeni olu\u015fturulan Gridsome projesinin temel dizin yap\u0131s\u0131 \u015f\u00f6yledir:<\/p>\n
*   src\/<\/code>: T\u00fcm Vue bile\u015fenleri, sayfalar\u0131 ve \u015fablonlar\u0131 burada bulunur.
\n    *   src\/pages\/<\/code>: Gridsome, bu dizindeki her .vue<\/code> dosyas\u0131n\u0131 otomatik olarak bir sayfaya d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00d6rne\u011fin, src\/pages\/Index.vue<\/code> ana sayfa, src\/pages\/About.vue<\/code> ise \/about<\/code> yolunda eri\u015filebilir bir sayfa olu\u015fturur.
\n    *   src\/components\/<\/code>: Yeniden kullan\u0131labilir Vue bile\u015fenleri burada saklan\u0131r.
\n    *   src\/layouts\/<\/code>: Sayfalar i\u00e7in ortak d\u00fczenler (header, footer vb.) burada tan\u0131mlan\u0131r.
\n    *   src\/templates\/<\/code>: Dinamik olarak olu\u015fturulan sayfalar (\u00f6rne\u011fin, her blog yaz\u0131s\u0131 i\u00e7in ayr\u0131 bir sayfa) i\u00e7in \u015fablonlar burada bulunur.
\n*   static\/<\/code>: Do\u011frudan web sunucusuna kopyalanacak statik dosyalar (resimler, fontlar vb.) burada saklan\u0131r.
\n*   gridsome.config.js<\/code>: Gridsome projesinin ana yap\u0131land\u0131rma dosyas\u0131d\u0131r. Eklentiler, veri kaynaklar\u0131 ve genel site ayarlar\u0131 burada tan\u0131mlan\u0131r.
\n*   gridsome.server.js<\/code>: Gridsome’un Node.js API’sini kullanarak daha geli\u015fmi\u015f sunucu taraf\u0131 i\u015flemler (dinamik sayfa olu\u015fturma gibi) i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Veri Kayna\u011f\u0131: Markdown Yaz\u0131lar<\/h3>\n
Blog yaz\u0131lar\u0131n\u0131 y\u00f6netmenin en basit yollar\u0131ndan biri, her yaz\u0131y\u0131 ayr\u0131 bir Markdown dosyas\u0131 olarak saklamakt\u0131r. Gridsome, bu Markdown dosyalar\u0131n\u0131 kolayca ayr\u0131\u015ft\u0131rabilir ve GraphQL katman\u0131na entegre edebilir.<\/p>\n
Markdown Dosyalar\u0131n\u0131 Olu\u015fturma<\/h4>\n
\u00d6ncelikle, blog yaz\u0131lar\u0131n\u0131 saklamak i\u00e7in bir dizin olu\u015ftural\u0131m:<\/p>\n
mkdir -p src\/content\/blog<\/code><\/pre>\n
\u015eimdi bu dizine birka\u00e7 \u00f6rnek Markdown dosyas\u0131 ekleyelim. Her dosya, yaz\u0131n\u0131n ba\u015fl\u0131\u011f\u0131n\u0131, tarihini, yazar\u0131n\u0131 ve di\u011fer meta verilerini i\u00e7eren bir “front-matter” b\u00f6l\u00fcm\u00fc ile ba\u015flamal\u0131d\u0131r. Front-matter, YAML format\u0131nda yaz\u0131l\u0131r.<\/p>\n
src\/content\/blog\/ilk-yazi.md<\/code>:<\/strong><\/p>\n
---\ntitle: \u0130lk Blog Yaz\u0131m\ndate: 2023-01-15\nauthor: Ahmet Y\u0131lmaz\nexcerpt: Bu, Gridsome ile olu\u015fturdu\u011fum ilk blog yaz\u0131m\u0131n k\u0131sa bir \u00f6zeti.\ncover_image: \/uploads\/ilk-yazi-kapak.jpg\n---\n\nMerhaba d\u00fcnya! Bu benim Gridsome ile olu\u015fturdu\u011fum ilk blog yaz\u0131m. Gridsome'un statik site olu\u015fturma yetenekleri sayesinde performans ve geli\u015ftirme h\u0131z\u0131 konusunda harika bir deneyim ya\u015f\u0131yorum.\n\nBu yaz\u0131da, Gridsome'un temel kurulumunu ve Markdown ile i\u00e7erik y\u00f6netimini ele ald\u0131k. Yakla\u015fan yaz\u0131larda daha derin konulara dalaca\u011f\u0131z.\n\nKod \u00d6rne\u011fi:<\/strong><\/code><\/pre>\n
javascript
\n\/\/ \u00d6rnek JavaScript kodu
\nconsole.log(‘Gridsome harika!’);<\/p>\n
function greet(name) {
\n  return Merhaba, ${name}!<\/code>;
\n}<\/p>\n
console.log(greet(‘Gridsome Kullan\u0131c\u0131s\u0131’));<\/p>\n
Umar\u0131m bu ba\u015flang\u0131\u00e7 size ilham verir!<\/code><\/pre>\n
src\/content\/blog\/ikinci-yazi.md<\/code>:<\/strong><\/p>\n
---\ntitle: Gridsome ile GraphQL Kullan\u0131m\u0131\ndate: 2023-02-20\nauthor: Ay\u015fe Demir\nexcerpt: Gridsome'un GraphQL veri katman\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ke\u015ffedin ve verilerinizi nas\u0131l sorgulayaca\u011f\u0131n\u0131z\u0131 \u00f6\u011frenin.\ncover_image: \/uploads\/ikinci-yazi-kapak.jpg\n---\n\nGridsome, Vue.js geli\u015ftiricileri i\u00e7in GraphQL ile sorunsuz bir entegrasyon sunar. Bu sayede, uygulaman\u0131z\u0131n ihtiya\u00e7 duydu\u011fu verileri kolayca \u00e7ekebilirsiniz.\n\nGraphQL Playground'u kullanarak sorgular\u0131n\u0131z\u0131 test edebilir, veri yap\u0131n\u0131z\u0131 anlayabilir ve istedi\u011finiz alanlar\u0131 se\u00e7erek yaln\u0131zca ihtiyac\u0131n\u0131z olan veriyi alabilirsiniz.\n\n\u00d6rnek GraphQL Sorgusu:<\/strong><\/code><\/pre>\n
graphql
\nquery {
\n  allBlogPost {
\n    edges {
\n      node {
\n        title
\n        date
\n        path
\n      }
\n    }
\n  }
\n}<\/p>\n
Bu sorgu, t\u00fcm blog yaz\u0131lar\u0131n\u0131n ba\u015fl\u0131klar\u0131n\u0131, tarihlerini ve yollar\u0131n\u0131 d\u00f6nd\u00fcrecektir.<\/code><\/pre>\n
Gridsome’u Markdown Kaynaklar\u0131n\u0131 Kullanmaya Ayarlama<\/h4>\n
Gridsome’un Markdown dosyalar\u0131m\u0131z\u0131 tan\u0131mas\u0131 ve GraphQL katman\u0131na eklemesi i\u00e7in gridsome.config.js<\/code> dosyas\u0131n\u0131 yap\u0131land\u0131rmam\u0131z gerekiyor. Bunun i\u00e7in gridsome-source-filesystem<\/code> ve gridsome-transformer-remark<\/code> eklentilerini kullanaca\u011f\u0131z.<\/p>\n
\u00d6ncelikle bu eklentileri kural\u0131m:<\/p>\n
npm install --save gridsome-source-filesystem gridsome-transformer-remark\n
veya<\/h2>\nyarn add gridsome-source-filesystem gridsome-transformer-remark<\/code><\/pre>\n
\u015eimdi gridsome.config.js<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n
module.exports = {\n  siteName: 'Gridsome Blog',\n  siteDescription: 'Gridsome ile olu\u015fturulmu\u015f basit bir blog.',\n  plugins: [\n    {\n      use: '@gridsome\/source-filesystem',\n      options: {\n        path: 'src\/content\/blog\/<\/em>\/*.md', \/\/ Markdown dosyalar\u0131n\u0131n yolu\n        typeName: 'BlogPost', \/\/ GraphQL'de kullan\u0131lacak tip ad\u0131\n        remark: {\n          \/\/ Remark transformer i\u00e7in ayarlar\n          \/\/ Bu k\u0131sma ek eklentiler eklenebilir (\u00f6rne\u011fin kod vurgulama)\n          plugins: [\n            \/\/ \u00d6rne\u011fin, kod vurgulama i\u00e7in prismjs eklentisi\n            \/\/ require('@gridsome\/remark-prismjs')\n          ]\n        }\n      }\n    }\n  ],\n  templates: {\n    BlogPost: '\/blog\/:slug' \/\/ Her BlogPost i\u00e7in dinamik sayfa olu\u015fturma\n  }\n}<\/code><\/pre>\n
Bu yap\u0131land\u0131rma ile:
\n*   @gridsome\/source-filesystem<\/code> eklentisi, src\/content\/blog<\/code> dizinindeki t\u00fcm .md<\/code> dosyalar\u0131n\u0131 tarayacak.
\n*   Bu Markdown dosyalar\u0131, GraphQL katman\u0131nda BlogPost<\/code> ad\u0131nda bir veri tipi olarak eri\u015filebilir olacak.
\n*   remark<\/code> \u00f6zelli\u011fi sayesinde, Markdown i\u00e7eri\u011fi HTML’e d\u00f6n\u00fc\u015ft\u00fcr\u00fclecek ve front-matter alanlar\u0131 da GraphQL’de sorgulanabilir hale gelecek.
\n*   templates<\/code> b\u00f6l\u00fcm\u00fc, her BlogPost<\/code> i\u00e7in otomatik olarak \/blog\/:slug<\/code> format\u0131nda bir sayfa olu\u015fturulaca\u011f\u0131n\u0131 belirtir. :slug<\/code> de\u011feri, Markdown dosyas\u0131n\u0131n ad\u0131ndan veya front-matter’daki slug<\/code> alan\u0131ndan t\u00fcretilir.<\/p>\n
gridsome.config.js<\/code> dosyas\u0131n\u0131 g\u00fcncelledikten sonra, geli\u015ftirme sunucusunu yeniden ba\u015flatman\u0131z gerekebilir (gridsome develop<\/code>).<\/p>\n
GraphQL ile Veri Sorgulama<\/h3>\n
Gridsome’un en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, GraphQL veri katman\u0131d\u0131r. T\u00fcm veri kaynaklar\u0131 (bu durumda Markdown dosyalar\u0131m\u0131z) tek bir GraphQL API \u00fczerinden eri\u015filebilir hale gelir.<\/p>\n
GraphQL Playground’u Kullanma<\/h4>\n
gridsome develop<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra, taray\u0131c\u0131n\u0131zda http:\/\/localhost:8080\/___explore<\/code> adresine gidin. Buras\u0131 GraphQL Playground’dur. Sol taraftaki “DOCS” sekmesini a\u00e7arak mevcut veri tiplerini ve alanlar\u0131n\u0131 g\u00f6rebilirsiniz. allBlogPost<\/code> gibi bir tipi g\u00f6rmelisiniz.<\/p>\n
\u015eimdi t\u00fcm blog yaz\u0131lar\u0131n\u0131 sorgulayal\u0131m:<\/p>\n
query {\n  allBlogPost {\n    edges {\n      node {\n        id\n        title\n        date\n        path\n        excerpt\n        author\n        content \/\/ Markdown i\u00e7eri\u011finin HTML'e d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f hali\n        cover_image\n      }\n    }\n  }\n}<\/code><\/pre>\n
Bu sorguyu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Markdown dosyalar\u0131n\u0131zdan gelen t\u00fcm verileri JSON format\u0131nda g\u00f6receksiniz. content<\/code> alan\u0131, Markdown’dan HTML’e d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f yaz\u0131n\u0131n kendisini i\u00e7erir.<\/p>\n
T\u00fcm Yaz\u0131lar\u0131 Listeleme<\/h3>\n
Art\u0131k verilerimize GraphQL \u00fczerinden eri\u015febildi\u011fimize g\u00f6re, bu yaz\u0131lar\u0131 ana sayfam\u0131zda veya bir blog listeleme sayfas\u0131nda g\u00f6sterebiliriz. src\/pages\/Index.vue<\/code> dosyas\u0131n\u0131 ana sayfa olarak kullanabiliriz.<\/p>\n