Pelican ile Statik Yorum Sistemi: comment-worker Kurulumu ✨

Statik blog altyapısı kullanan geliştiriciler için dinamik yorum sistemleri her zaman bir sorun olmuştur. Bu yazıda, Pelican tabanlı bir bloga, Staticman alternatifi olarak geliştirilen comment-worker aracı ile nasıl yorum sistemi entegre edeceğinizi detaylı olarak anlatacağız. ✨

comment-worker Nedir? 🧵

comment-worker, Cloudflare Workers üzerinde çalışan, kullanıcı yorumlarını GitHub ya da GitLab gibi platformlara JSON dosyası olarak pushlayan modern bir yorum altyapısı çözümüdür. Statik sitelere dinamik içerik eklemenin güvenli ve sürdürülebilir bir yoludur.

Öne Çıkan Özellikleri

• ✨ Staticman API uyumluluğu sayesinde mevcut formlar kolayca uyarlanabilir.
• ⚡ Cloudflare Workers altyapısı ile hızlı ve global erişim.
• 📦 GitHub/GitLab entegrasyonu sayesinde yorumları versiyon kontrollü ve şeffaf bir şekilde saklama.
• 🔒 Yeni güvenlik geliştirmeleri ile güvenli veri alışverişi.
• 🧠 Modern mimarisi ile kolay konfigürasyon ve esneklik.

Neden Staticman Yerine comment-worker? 🤔

• Staticman uzun süredir güncelleme almıyor (3+ yıl).
• Heroku'nun ücretsiz planı kaldırıldığı için hosting maliyetli hale geldi.
• comment-worker, ücretsiz platformlar olan Cloudflare Worker veya Google App Script ile kolayca dağıtılabilir.
• Kod yeniden yazıldı ve staticman.yml dosyası ile uyumlu hale getirildi.

Yapılan Teknik Geliştirmeler 🛠️

• application/json ve application/x-www-form-urlencoded içerik türlerini destekleyen hem form hem API talepleri uyumlu hale getirildi.
• WebCrypto kullanılarak SHA1, SHA256, SHA384, SHA512 gibi algoritmalarla dönüşüm desteği eklendi.
• allowedOrigins, artık staticman.yml içinde değil, Worker ortam değişkeni olarak tanımlanıyor (CW_ALLOWED_ORIGINS).
• Daha sade bir endpoint yapısı: organizasyon, repo ve branch bilgisi artık URL'de yer almıyor.
• pullRequestBody, çok satırlı metinleri düzgün işler ve placeholder desteği içerir.
• Kimlikler artık cuid2 ile oluşturuluyor.
• Giriş doğrulama ve veri dönüşümleri için Zod kullanılıyor.

Kurulum Aşamaları 📆

1. Cloudflare Worker Oluşturulması

Cloudflare hesabınıza giriş yaparak yeni bir Worker oluşturun ve comment-worker kodlarını deploy edin:

👉 Cloudflare'a Hemen Deploy Et

Lokalde test etmek için:

wrangler dev

Ayrıca kendi örnek projemi de inceleyebilirsiniz: comment-worker örneği

2. GitHub Uygulaması Kurulumu

• GitHub Apps sayfasından yeni bir uygulama oluşturun
• Aşağıdaki izinleri tanımlayın:
• Contents: read & write
• Pull requests: read & write

3. Ortam Değişkenlerini Ayarlama

Cloudflare Workers Settings kısmından aşağıdaki bilgileri ekleyin:

Build ayarlarında da aynı env değişkenlerini tanımlamayı unutmayın:

Özel Anahtarı PKCS8 Formatına Çevirme 🔐

openssl pkcs8 -topk8 -inform PEM -outform PEM -nocrypt -in private-key.pem -out private-key-pkcs8.key

4. staticman.yml Dosyası Ekleme 📄

Depo kök dizinine aşağıdaki gibi bir staticman.yml dosyası ekleyin:

comments:
  allowedFields: [name, email, message]
  branch: main
  filename: "comment-:year:month:day-:slug"
  format: "yaml"
  moderation: true
  path: "data/comments/{options.slug}"

5. Pelican Temanıza Yorum Formu Ekleyin ✏️

<form
  submit="https://your-worker-subdomain.workers.dev/api/handle/form"
  method="POST"
>
  <div>
    <label for="fields[name]">Name</label>
    <input type="text" name="fields[name]" value="John Doe" required>
  </div>
  <div>
    <label for="fields[email]">Email</label>
    <input type="email" name="fields[email]" value="" required>
  </div>
  <div>
    <label for="options[url]">Website</label>
    <input type="url" name="options[url]" placeholder="https://example.com">
  <div>
    <label for="fields[message]">Message</label>
    <textarea name="fields[message]" required>Hello world!</textarea>
  </div>
  <div style="display: none">
    <label for="fields[slug]">Slug</label>
    <input type="text" name="fields[slug]" value="your/page/slug" readonly>
  </div>

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

6. API İsteklerinde İçerik Türü Belirtme

API'ye veri gönderirken dikkat etmeniz gereken bir nokta var. Sistem iki farklı format kabul ediyor:

• Form verisi formatı (application/x-www-form-urlencoded)
• HTML formlarından alışık olduğunuz format
• Veriler isim=değer&diğer=başkadeğer şeklinde gönderilir
• Örnek: kullaniciadi=ahmet&sifre=123456
• JSON formatı (application/json)
• Veri nesne olarak gönderilir
• Örnek: {"kullaniciadi": "ahmet", "sifre": "123456"}

Önemli: Hangi formatı kullanırsanız kullanın, bunu isteğinizin Content-Type başlığında belirtmeniz gerekiyor. API, veri formatını otomatik tespit etmiyor. Kullandığınız formatı açıkça belirtmek zorundasınız.

Örnek İstek

POST /api/endpoint HTTP/1.1
Content-Type: application/json

{"kullaniciadi": "ahmet", "sifre": "123456"}

Ya da diğer formatla:

POST /api/endpoint HTTP/1.1
Content-Type: application/x-www-form-urlencoded

kullaniciadi=ahmet&sifre=123456

İsteğinizi gönderirken bu kurala dikkat etmezseniz, API büyük ihtimalle hatalar verecektir.

{
  "fields": {
    "name": "John Doe",
    "email": "johndoe@example.com",
    "message": "Hello world!",
    "slug": "your/page/slug"
  },
  "options": {
    "url": "https://example.com"
  }
}

Sonuç 🌟

comment-worker ile Pelican blogunuza dinamik yorum sistemi entegre etmek artık hem kolay hem de modern bir çözüm sunuyor. Cloudflare Workers sayesinde dünya genelinde hızlı, ölçeklenebilir ve ücretsiz bir yapı elde edebilirsiniz.

Okuyucularınızdan gelen yorumlarla blogunuzu daha interaktif hale getirin ve topluluğunuzu büyütün! 🚀💬