Github Pages Hexo ile PWA ve Daha Fazlası

Daha önce Github Pages üzerine Hexo kurulumundan bahsetmiştik. Şimdi siteye PWA, Push notification, AMP ve TeX render gibi özellikler ekleyeceğiz.

0. Hexo Sürümü Kontrolü

Olabilecek uyumsuzlukları ve sorunları engellemek için hexo sürümünün 4.1.1 sürümünden yüksek olmaması önerilir. Bu yüzden Hexo sürümü daha yeniyse kaldırılıp 4.1.1 versiyonunun yüklenmesi gerekir.

npm uninstall hexo
npm install hexo@4.1.1

1. TeX Render Etkinleştirme

Matematiksel ifadeleri yazmanın en kolay yolu TeX syntax kullanmaktır. Ama bunu render yapmadıktan sonra pek bir anlam ifade etmiyor. Bunun için Hexo Plugins bölümünde bir eklenti mevcut: hexo-math
Eklentiyi yüklemek için sitenin olduğu klasörde terminal penceresi açıp

npm install hexo-math --save

komutunu yazarak hexo-math eklentisinin indirilip yüklenmesini sağlayın. Daha sonra _config.yml dosyasına şu satırları ekleyin:

math:
  engine: 'mathjax' # or 'katex'

Bu aşamadan sonra hexo-math kurulumu tamamlandı. Şimdi yazmaya başlayabiliriz.
Satır içi matematiksel ifade yazmak için ifadeyi dolar işaretlerinin arasına yazın:

$\Delta=b^2-4ac$

Böyle görünecek: $\Delta=b^2-4ac$.

Ayrı satırda yazmak için ise yeni satırda ikişer dolar işaretleri arasında yazın:

$$x_1,x_2=\frac{-b\pm\sqrt{\Delta}}{2a}$$

Böyle görünecektir:
$$x_1,x_2=\frac{-b\pm\sqrt{\Delta}}{2a}$$

2. PWA Etkinleştirme

Siteyi ana ekrana uygulama kısayolu gibi ekleme ve önbellek üzerinde offline görüntülemek için en etkin yol PWA yapmaktır. Bunun için Hexo Plugins kısmında eklenti mevcut. Eklentiyi yüklemek için sitenin olduğu klasörde terminal penceresi açıp

npm install --save hexo-pwa

komutunu yazarak hexo-pwa eklentisinin indirilip yüklenmesini sağlayın. Daha sonra _config.yml dosyasına şu satırları ekleyin:

pwa:
  manifest:
    path: /manifest.json
    body:
      name: your-app-name
      short_name: your-app-name
      theme_color: white
      background_color: white
      display: standalone
      orientation: portrait
      scope: /
      start_url: /
      icons:
        - src: /images/applogo.png
          sizes: 192x192
          type: image/png
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 20
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /www.google-analytics.com/
        strategy: networkOnly
      - pattern: !!js/regexp /pagead2.googlesyndication.com/
        strategy: networkOnly
      - pattern: !!js/regexp /cdn.jsdelivr.net/
        strategy: cacheFirst
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

Yukarıdaki kod parçasında your-app-name kısmını uygulama listesinde görünmesini istediğiniz ad olarak değiştirebilirsiniz ve icons: src: /images/applogo.png kısmını da kullandığınız tema klasöründeki logoya göre ayarlayabilirsiniz. Bu aşamadan sonra hexo-pwa kurulumu tamamlanmış ve siteye girdiğinizde ana ekrana ekleme bildirimi çıkacaktır.

3. AMP Etkinleştirme

AMP (Accelerated Mobile Pages) ile mobilde sayfalar daha minimal ve hızlı yüklenir. Bunun için Hexo Plugins kısmında eklenti mevcut. Eklentiyi yüklemek için sitenin olduğu klasörde terminal penceresi açıp

npm install hexo-generator-amp --save

komutunu yazarak hexo-amp eklentisinin indirilip yüklenmesini sağlayın. Daha sonra _config.yml dosyasına şu satırları ekleyin:

  # hexo-generator-amp
# The following settings is the quick start options.

generator_amp:
  templateDir: amp-template
  assetDistDir: amp-dist
  logo:
    path: sample/sample-logo.png
    width: 600
    height: 60
  substituteTitleImage:
    path: sample/sample-substituteTitleImage.png
    width: 1024
    height: 800
  warningLog: false # To display warning, please set true.

Ardından kullandığınız temanın içerisindeki head.ejs (Örnek dosya yolu: themes/(your-theme)/layout/_partial/head.ejs) içerisine

<% if (is_post() && config.generator_amp){ %>
  <link rel="amphtml" href="<%= config.url %><%= config.root %><%= page.path %>/amp/index.html">
<% } %>

satırlarını ekleyip kaydedin. Artık AMP kurulumunu tamamlandı ve hexo generate esnasında AMP sayfaları da oluşturacak.

4. Push Notifications Etkinleştirme

Sitede yeni yazı yayınlandığında kullanıcılara Push Notification gönderebiliriz. Bunun için hexo-web-push-notification eklentisi mevcuttur. Eklentiyi yüklemek için sitenin olduğu klasörde terminal penceresi açıp

npm i hexo-web-push-notification --save

komutunu yazarak hexo-web-push-notification eklentisinin indirilip yüklenmesini sağlayın. Ardından _config.yml dosyasına alttaki satırları ekleyerek gerekli düzenlemeleri yapın:

webPushNotification:
  webpushrKey: "your-rest-api-key"
  webpushrAuthToken: "your-auth-token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

Öncelikli olarak push bildirim gönderebilmek için webpushr adlı servise kaydolup siteyi ekliyoruz. Ardından buradan rest-api key ve auth token edinip yukarıdaki ilgili alanlara ekliyoruz ve buradaki kod bloğunda yukarıdaki gibi dizilmiş uzun karakter serisini kopyalayıp yukarıdaki kod parçasında trackingCode alanına yapıştırıyoruz. Artık siteye girildiğinde bildirim gönderimi soracak ve izin verildiğinde yeni yazılarda bildirim gönderecek.