Jekyll Staticman Eklentisi Kurulumu

kutuphane
652 kelime
3 dakika
Seviye 13.63
Düzenle

Merhaba 😄

Blogumda daha önce Disqus yorum eklentisini kullanıyordum. Fakat uzun zamandır görmek istediğim ancak bir türlü deneme fırsatım olmayan Staticman ile tanışmış oldum. Bu yazımda, Staticman kurulumu ve kullanımı hakkında sizlere detaylı bilgi vereceğim. Kurulum süreci biraz zorlu olsa da, adım adım anlatacağım ve bu süreçten fayda sağlayacağınızı umuyorum. 😌

Staticman Nedir?

Staticman, tamamen sizin kontrolünüzde olan ve statik siteler için geliştirilmiş harika bir kütüphanedir. Yorum alanı, ziyaretçi defteri ya da iletişim formu gibi çeşitli işlevlerde kullanılabilir. 🐒 Ancak, repodaki belgeler eski sürümlere göre güncellenmediği için, o belgelere bakarak işlem yaparsanız zorluk yaşayabilirsiniz. Merak etmeyin, ben burada sizlerin duvara çarpmasını engellemek için varım! 🥰

Gerekli Malzemeler 🥗

İlk başta bize şu araçlar gerekecek:

  • Heroku Üyeliği
  • Github Uygulaması Oluşturma
  • Github Token'ları
  • İkinci Bir Github Hesabı

İlk Adım: Farklı Bir Github Hesabı Oluşturun

Yeni bir Github hesabı oluşturun. Bu hesabı, örneğin benimşekillinickim-bot gibi bir isimle oluşturabilirsiniz. Babanın Botu

Heroku Üzerinde Deploy

  1. Heroku sitesine gidip bir üyelik oluşturun.
  2. Ardından, Staticman Repo'ya gidin ve burada dev branch'ini seçin. Çünkü ana dalda bazı güncellemeler henüz merge edilmemiş durumda. Bu kısımda alt kısımda bulunan Deploy Heroku butonuna tıklayın.

heroku-kurulumu]

  1. İlgili ayarları yaparak uygulamanızı deploy edin.

heroku-kurulumu]

Şimdilik işlem bu kadar, ilerleyen adımlarda ayarları detaylıca düzenleyeceğiz.

Github Uygulamaları

  1. İlk önce Github Apps'dan bir uygulama oluşturun. Uygulama ismini, açıklamasını ve Heroku adresinizi kendinize göre düzenlemeyi unutmayın.

heroku-kurulumu] heroku-kurulumu]

Private Keys (Özel Anahtarlar)

Private keys kısmından Generate a private key butonuna tıklayın ve oluşan dosyayı kaydedin. Bu dosyadaki bilgileri Heroku ortam değişkenlerinde kullanacağız.

heroku-kurulumu]

Github Token'ları

  1. Github Tokens sayfasına giderek yeni bir token oluşturun. Token'ınıza şu yetkileri verin:

staticman-kurulumu] staticman-kurulumu]

Oluşturduktan sonra size bir kod verilecektir. Bu kodu kaydedin çünkü ilerleyen aşamalarda kullanacağız. Daha sonra oluşturduğunuz uygulamaya tıklayın ve Install App kısmından Install'a basın.

staticman-kurulumu]

Bu adımda, token'ı tüm repolarınızda mı yoksa sadece belirli bir repoda mı kullanmak istediğinizi seçebilirsiniz. Ben sadece tek bir repoda kullanmayı tercih ediyorum.

staticman-kurulumu]

Sonrasında Install butonuna tıklayın.

Github Bot

Yeni oluşturduğumuz Github hesabını, repomuza davet edeceğiz. Repomuza gidin, Settings sekmesine tıklayın. Ardından Collaborators kısmından add people diyerek oluşturduğunuz bot hesabını ekleyin. Diğer hesabınızla giriş yaparak daveti kabul edin.

staticman-kurulumu]

Github ayarlarımız burada tamamlandı! 🤯

Heroku Ayarları

Heroku paneline gidin ve oluşturduğunuz uygulamaya tıklayın. Settings kısmından Config Vars bölümüne gelin ve Reveal Config Vars'ı tıklayın.

Ortam Değişkenleri

Burada şu değişkenleri oluşturmalısınız:

  • GITHUB_APP_ID
  • GITHUB_PRIVATE_KEY
  • GITHUB_TOKEN
  • RSA_PRIVATE_KEY

Bu değerleri, daha önce oluşturduğumuz token ve private key'lerle doldurun.

RSA Key Oluşturma

Bash
ssh-keygen -m PEM -t rsa -b 4096 -C "burayabiseyyazin" -f ~/.ssh/staticman_key

Daha sonra oluşturduğunuz anahtarı görmek için:

Bash
head -2 ~/.ssh/staticman_key

Çıktı şu şekilde olmalıdır:

Bash
-----BEGIN RSA PRIVATE KEY-----
MIDIGOMEDAGLARIBLA12930219312

Alternatif olarak openssl kullanarak da RSA key oluşturabilirsiniz:

Bash
openssl genrsa -out key.pem

Eğer terminal kullanamıyorsanız, çevrimiçi RSA anahtar üreticilerini kullanabilirsiniz. Online RSA Key Generator sitesini ziyaret ederek anahtarınızı oluşturabilirsiniz.

Bilgi: Github'dan aldığımız GITHUB_PRIVATE_KEY ile RSA Key'imiz aynı olabilir. Bu yüzden RSA Key oluşturma adımını atlayabilirsiniz.

Staticman Ayarları

Staticman ayarları YAML formatında saklanır. staticman.yml dosyasının içeriği şu şekilde olmalıdır:

YAML
comments:
  allowedFields: ["isim", "eposta", "website", "mesaj", "yanit_id"]
  allowedOrigins: ["localhost", "www.yuceltoluyag.github.io"]
  branch: "master"
  commitMessage: "Comment from {fields.name} on {options.slug}"
  filename: "entry-{@timestamp}"
  format: "yaml"
  generatedFields:
    date:
      type: "date"
      options:
        format: "timestamp-seconds"
  moderation: true
  name: "Yücel Toluyağ"
  notifications:
    enabled: false
  path: "_data/comments/{options.slug}"
  requiredFields: ["isim", "eposta", "mesaj"]
  transforms:
    email: md5
  reCaptcha:
    enabled: false
    siteKey: "12321321"
    secret: "123213213213"

Staticman Form Elemanları

Form verilerinizi göndermek için value kısımlarında fields etiketini kullanabilirsiniz. Örnek bir form elemanı şu şekilde olur:

HTML
<input
  class="textfield__input"
  name="fields[isim]"
  type="text"
  id="comment-form-name"
  placeholder="Adınız"
  required
/>

Staticman Şifreleme

Statik sitelerde güvenliği sağlamak için şifreleme kullanmak oldukça önemlidir. Şifreleme için şu şekilde bir yapı kullanabilirsiniz:

HTML
https://{HEROKU_ADRESİNİZ}/v3/encrypt/şifrelenecekşey

Staticman Postman Testleri

Postman üzerinden testler yapmak için doğru ayarları yapmanız gerekecek. Form elemanları kısmındaki field ve options ayarlarını doğru şekilde yapılandırmalısınız.

staticman-kurulumu]

Canlı Test

Staticman Örnek Kodlar

Bu dosyaları inceleyin arkadaşlar, kafanızda ışıkların patlayacağından eminim 🎃

Sonuç

Artık Disqus kullanmak zorunda değilsiniz! Staticman, eksiklikleri olsa da oldukça kullanışlı ve özelleştirilebilir bir sistem. Geliştirilmesi gereken alanlar olsa da, şimdilik statik sitelerinizde yorumları rahatça yönetebilirsiniz. ✨

Kaynak Dosyalar

Site Araması