Bu site hakkında: Jamstack, Vue.js, Gridsome, GraphQL, TailwindCSS, ...

Biraz bu site hakkında konuşalım.

Birçok insan gibi ben de işini iyi yapan basit şeyleri seviyorum. Verimli, devam ettirmesi kolay, tüketmesi keyifli, üretimi hızlı, sürdürülebilirler. Ancak bazen aranan basitlik üretenin kendisinde değil üretilende olmalı. Şu anda bu yazıyı okuduğun internet sitesi de bunun bir örneği. Arkasındaki teknolojileri merak ediyorsan, okumaya devam et.

Bazılarınızın zaten bildiği gibi, Go ile yazılmış statik site oluşturucu olan Hugo'yu kullanıyordum. Çoklu dil desteği ile nerdeyse harikaydı. Ancak fazla 'statikti' ve biraz eski moda gelmeye başladı. Yeni, biraz süslü, hızlı bir şeyler istedim.

Jamstack

Bir süre önce Jamstack mimarisini benimsemiştim. İstediğim siteyi oluşturmak için Jamstack tabanlı, yeni ve daha iyi bir framework aramaya koyuldum. Bu arada, "JAM" kısmının açılımı JavaScript, API ve Markup.¹

"İstemci tarafında JavaScript, yeniden kullanılabilir API'lar ve önceden oluşturulmuş biçimlendirme üzerine kurulu modern bir web geliştirme mimarisi"

— Mathias Biilmann (Netlify'da CEO & Kurucu ortak).

Bazı iyi çözümler keşfettim. Merak ediyorsanız aşağıdalar.

• Gatsby (React)
• Vuepress (Vue)
• Gridsome (Vue)
• Next.js (React)
• Nuxt (Vue)
• ve birkaç tane daha..

Tüm bu statik site oluşturucular işlerinde harikalar. Ancak yeni şeyler denemeyi seviyorum. Çoğunu denedim ve denediklerimle basit bir blog sitesi tasarlayıp sonuca baktım. Çok benzerler. Ancak Gridsome'ı diğerlerine nazaran daha fazla sevdim. Vue ile yazılmış Gatsby gibi bir şey.

Gridsome

Gridsome; GraphQL, Vue.js, PRPL deseni, akıllı bağlantı ön yüklemesi, progresif resimler gibi çeşitli teknolojiler kullanan bir statik site oluşturucu. Temelde önceden işlenmiş HTML ile SEO dostu Vue.js SPA uygulaması oluşturmayı hedefliyor. PWA olmaya hazır bir sonuç üretiyor.

Intersection Observer API

Gridsome varsayılan olarak hızlı olduğunu söylüyor. Bu da ben dahil birçoğu için önemli. Intersection Observer API² denen bir teknolojiyi kullanan Gridsome, bununla ekranda görünen elementleri gözlemliyor. Örneğin bu gönderiye bak. Yazıdaki resimler yalnızca ekranında görünür olduklarında yüklenecekler. Bu da işleri hızlandırıyor. Yalnızca göreceğin içeriği yükleyecek şekilde geldiğinden, ilk sayfa yüklenişi ışık hızında olabiliyor.

Bununla alakalı başka bir mevzu daha var, direkt teknik isimleriyle ele alayım; pre-fetching ve pre-loading³. Gridsome yüklenen sayfada dahili linkleri fark ediyor veya ekranda göründüğünde bunu anlıyor ve arkaplanda hemen bu içerikleri yüklüyor veya tarayıcıya bu içeriklere yakın gelecekte ihtiyacın olacağını söylüyor. Bu bağlantıya tıklamaya karar verdiğinde işlerin daha kolay ilerlediğini fark edeceksin çünkü bağlantı içeriği zaten bilgisayarında yüklenmiş şekilde bekliyor olacak.

GraphQL

Gridsome, geliştirme safhasında GraphQL veri katmanını kullanıyor. Projede kullanacağın tüm veri bu katmanda geçici olarak barınıyor, tıpkı yerel bir veritabanı gibi. GraphQL veri katmanı ile veri kaynağın arasında gerçek zamanlı bir bağlantı bulunmuyor. Buradaki veri de daha sonra statik içeriğe dönüştürülüyor.

Gridsome ayrıca GraphQL explorer isminde bir araca sahip. Bununla GraphQL'i keşfedebiliyor, sorgularını geliştirme aşamasında test edebiliyorsun.

Vue tabanlı SPA

SPA = Single Page Application = Tek Sayfa Uygulama. gridsome build komutu ile bir liste dolusu SEO dostu HTML dosyan olacak. Bu dosyalar her yerde barındırılabilir (host etmek). Bu Github veya GitLab'in sunduğu Pages servisi olabilir. Herhangi bir CDN dahi olabilir.

Bu HTML dosyalar hızlı yüklenmek için optimize edilmiş olacaklar. index.html dosyası yüklendikten sonra, Vue.js bu HTML dosyasını alıp bir SPA'e dönüştürecek.

Veri kaynakları

Headless CMS, Wordpress, Drupal, API'lar, veri tabanları, YAML veya CSV veya JSON dosyaları, Markdown dosyaları, git tabanlı CMS'ler ve benzerlerini veri kaynağın olarak kullanabiliyorsun. Sana kalmış. Gridsome verilerin kaynağını önemsemiyor. Verilerini alıyor ve istediğin türde çıktı olarak sana veriyor, hepsi bu. Örneğin benim sitem Markdown dosyalarını birincil veri kaynağı olarak kullanıyor. Component tabanlı sayfaları da kullanıyorum. Onlar daha çok listeleme sayfalarım için. Bu listeleme sayfaları GraphQL katmanından veri çağırarak çalışıyor.

TailwindCSS

Bu teknolojilere yakışan tek CSS çatısı TailwindCSS olurdu. Ben de onu kullandım.

GitLab CI/CD

Bu site için kullandığım .gitlab-ci.yml dosyası aşağıda:

image: node:15.12

pages:
  cache:
    paths:
      - node_modules/
  variables:
    PATH_PREFIX: '/ozel/yol/'
  script:
    - echo "CW_USER=elmsec" >> .env.production
    - npm install
    - npm run build
    # Opsiyonel: dosyaları gzipler, böylece GitLab sıkıştırılmış halini sunabilir
    - gzip -k -6 $(find public -type f)
  artifacts:
    paths:
      - public
  only:
    - master

Yaptığım özelleştirmeler

Gridsome iyi, hoş. Ancak iş birden fazla türde kaynaktan beslenen çok dilli bir site yaratmaya gelince Hugo kadar iyi değil. Bu yüzden yazılımın çekirdeğinde bazı değişiklikler yapmam gerekti. Gridsome'ın sayfaları oluşturmasının kontrolünü ele aldım ve ihtiyaçlarıma göre düzenledim. Daha sonra gridsome-i18n-plugin isimli eklentiyi ihtiyaçlarıma göre değiştirdim.

Bu i18n eklentisi her sayfan için ayarladığın her dil adına bir adres oluşturuyor. Mesela /merhaba-dunya/ diye bir yazın varsa her dil için /<dil>/merhaba-dunya/ diye adresler oluşturacak. Bir dilde yazdığın yazı için her dilde adres oluşturması kötü. Sonuçta o dilde yazılmadılar ama o dildeki kullanıcılara görünecekler. Tam bir tasarım hatası. Tabii component tabanlı sayfalarda böyle bir sorun yok çünkü çeviri fonksiyonlarını kullanarak etkin olan dile göre içerik gösterebilirsin. Ancak Markdown dosyalarında böyle bir şansın yok.

Amacım bir gönderiyi aynı adresle, sadece başına çevrildiği dilin adını alarak sunmaktı. Adreslerin benzersiz olması gerektiğinden, bu imkansızdı. Ben de i18n eklentisini düzenledim ve kendi başına adres oluşturmasını yalnızca seçtiğim veri kaynakları için devre dışı bıraktım. gridsome.server.js dosyasında sayfaları oluşturacak fonksiyonları kendim yazdım. Diğer tüm sayfalar bu eklenti tarafından oluşturuluyor. Kısacası bu yaklaşım bir şeyi mümkün kıldı. Acaba neyi? Sağ üstteki bayrak ikonuna tıkla ve gör.