Jekyll plugin pro vytváření URL na vaši CDN

V předchozím článku jsem popisoval, jak jsem přesunul obrázky ze svého webserveru na Amazon S3 cloudové úložiště. Nyní popíšu, jak si zjednodušit život při vypisování URL oněch obrázků. Opisovat totiž vždy celou absolutní cestu, jejíž část je neměnná, je jednak nuda a druhak vám to znemožňuje jednoduše přejít se svými soubory na jiné uložiště.

Jekyll Tag plugin

Poslouží nám primitivní Jekyll tag plugin, který může vypadat například takto (gist):

module Jekyll
  class CdnUrlTag < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @path = text
    end

    def render(context)
      resolvedPath = ''
      
      # Check if @path is actually a name of a variable or just a textual path.
      if !context[@path].nil?
        resolvedPath = context[@path]
      else 
        resolvedPath = @path
      end
      
      # Strip the leading slash if there's any.
      if resolvedPath.start_with?('/')
        resolvedPath = resolvedPath[1..-1]
      end
      
      "#{context.registers[:site].config['cdnurl']}#{resolvedPath}"
    end
  end
end

Liquid::Template.register_tag('cdn_url', Jekyll::CdnUrlTag)

Těm z vás, jejichž je Ruby denním chlebem, se omlouvám, neb v Ruby programuji teprve posledních 5 minut.

Tento soubor pojmenujte například cdn_url_tag.rb a uložte ho do adresáře _plugins. Samozřejmě si změňte URL_PREFIX za vaši cestu.

V souboru _config.yml nadefinujte proměnnou cdnurl, např. takto:

#cdn
cdnurl: 'https://s3-eu-west-1.amazonaws.com/outoftime/'

Ve vaší šabloně či článku pak nový tag použijete takto:

{% cdn_url /images/some_image.jpg %}

Nebo takto v případě proměnné:

{% cdn_url site.someVariable %}

Výsledkem bude takováto URL:

https://s3-eu-west-1.amazonaws.com/outoftime/images/some_image.jpg

Paráda, ne? Odteď můžete kdykoliv přejít na libovolné jiné úložiště obrázků (klidně i lokální) pouze změnou jedné konstanty ve vašem pluginu.

Jekyll Filter plugin

Prakticky ihned po dopsání předchozí sekce mě napadl ještě druhý způsob, který je dokonce ještě trochu lepší. Jedná se o Jekyll filter plugin, který může vypadat třeba takto (gist):

module Jekyll
  module CdnUrlFilter
      
    def cdn_url(input)        
      resolvedPath = input

      # Strip the leading slash if there's any.
      if resolvedPath.start_with?('/')
        resolvedPath = resolvedPath[1..-1]
      end

      "#{@context.registers[:site].config['cdnurl']}#{resolvedPath}"
    end
  end
end

Liquid::Template.register_filter(Jekyll::CdnUrlFilter)

Tento soubor pojmenujte například cdn_url_filter.rb a uložte ho do adresáře _plugins.

V souboru _config.yml nadefinujte proměnnou cdnurl, např. takto:

#cdn
cdnurl: 'https://s3-eu-west-1.amazonaws.com/outoftime/'

Ve vaší šabloně či článku pak nový filter použijete takto (povšimněte si uvozovek):

{{ '/images/some_image.jpg' | cdn_url }}

Nebo takto v případě proměnné:

{{ site.someVariable | cdn_url }}

Produkovaná URL jsou stejná. Výhodou filteru je, že Jekyll za vás ještě před zavoláním vašeho kódu vyřeší nahrazení proměnných za jejich hodnoty. Nevýhodou je, že běžné stringy musíte psát v uvozovkách.