Jekyll - Tworzenie stron internetowych

Jekyll jest technologią wspomagającą tworzenie statycznych stron internetowych. Pozwala zbudować kompletną witrynę na podstawie wielu małych plików zawierających wpisy, pliki multimedialne oraz definicję samego szablonu graficznego. Tutaj właśnie widzimy jedne z największych zalet tego systemu. Nasza witryna nie ma żadnej bazy danych. Nie wymaga aktualizacji. Nie musimy w ogóle martwić się o jej bezpieczeństwo. Ze względu na jej statyczny charakter, nic nie może się z nią złego stać (oczywiście jeśli wykluczymy nie autoryzowany dostęp do serwera). W prezencie otrzymujemy coś jeszcze. Niesamowitą wydajność. Pliki statyczne serwowane przeglądarkom są znacznie szybciej, aniżeli te uprzednio każdorazowo generowane.

Treści na witrynę w obrębie Jekyll-a mogą być tworzone w ramach wielu wspieranych formatów. W zależności od potrzeb mogą być do pliki Markdown bądź HTML. Postawienie pliku na pierwszym miejscu pozwala uporządkować projekt. Jeśli korzystamy z repozytorium typu Git, zyskujemy dostęp do wszystkich iteracji pisanych przez nas dokumentów. Jekyll pozwala również na tworzenie złożonych szablonów. Nasze dokumenty mogą dziedziczyć z przygotowanych uprzednio plików. Jeśli natomiast zależy nam na bardziej złożonej funkcjonalności, zawsze możemy skorzystać z setek darmowych wtyczek, bądź zbudować własną z wykorzystaniem języka Ruby.

Czy Jekyll jest dobry dla każdej strony?

Oczywiście, że nie! Bazowanie na plikach ma również swoją cenę. Osoba, która aktualizowała by taką witrynę, musiała by posiadać odpowiednią wiedzę techniczną na temat wybranego formatu wpisów. Kluczowa była by tutaj znajomość składki Markdown (lub jej wariacji np. kramdown), czy też czystego HTML-a, który miejscami może okazać się potrzebny. Ważna była by świadomość na temat, struktury folderów projektu. Dochodzi do tego kwestia publikowania przygotowanych treści / aktualizacji strony. Proces nie zawsze może być w pełni zautomatyzowany, a jeśli taki w ogóle miałby być musiało by to być poprzedzone świadomymi decyzjami oraz pracą twórcy szablonu / witryny. Z czego to wynika przekonasz się za chwilkę.

Istotne są również zadania, które stawiamy przed stroną. Jeśli ta ma bazować na często aktualizowanych treściach, przez wiele osób, tudzież ma mieć charakter mocno społecznościowy, być może Jekyll nie jest najrozsądniejszym wyborem. Możesz zapytać: “być może? - przecież na stronie statycznej się nic nie zmienia”. I tutaj chciałbym Cię wyprowadzić z błędu. Mimo iż strona sama w sobie może być w 100% statyczna, w trakcie realizacji określonych operacji może dane pobierać z zewnętrznych usług za pomocą skryptów JavaScript. Dla przykładu na tej zasadzie mogą być pobierane oraz wysyłane nowe komentarze.

Od czego zacząć?

Oczywiście od samego pobrania narzędzia. W tym celu przyda Ci się określony Gem dla języka Ruby. Chodzi oczywiście o “skarb” zatytułowany jako “jekyll”. Jeśli nie masz w systemie zainstalowanego wsparcia dla wymaganego języka programowania musisz go zapewnić. Nie będę opisywał jak to wygląda na różnych systemach operacyjnych. Na moim Linuksie wystarcza:

apt-get install -yq ruby ruby-dev

gem install jekyll bundler
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

To wszystko. Szablon dla Twojej nowej witryny jest gotowy! Natomiast stronę możesz odwiedzić pod adresem: http://localhost:4000.

Musisz wiedzieć, że komenda jekyll przyjmuje wiele interesujących pod komend, które zapewne będą dla Ciebie istotne w przyszłości. Na początek kluczowe będą build (jekyll build), który na podstawie plików w katalogu generuje nową stronę oraz serve (jekyll serve), która uruchamia serwer http zapewniającą dostęp do witryny. Te komendy mogą przyjmować natomiast różne parametry. Przykładowo serve bez dodatkowych parametrów będzie miał domyślnie włączoną automatyczne przebudowywanie witryny po znalezieniu zmian. Co to dla Ciebie oznacza? Edytujesz za pomocą swojego ulubionego notatnika pliki składające się na stronę, a w przeglądarce natychmiast widzisz efekt wprowadzonych zmian. Nie musisz nawet wracać do konsoli.

Tutaj ważna uwaga: Jekyll jest prostym w użyciu oraz rozbudowie systemem. Nie sposób jednak opisać jego wszystkich funkcjonalności, w obrębie kilku wpisów na blog-u a na pewno nie pojedynczej notatki. Zanim zrobisz swoją pierwszą witrynę z wykorzystaniem Jekyll-a na pewno jest zalecane abyś przeczytał(a) dokumentację projektu.

Układ projektu oraz aktualizacja domyślnej strony

Układ folderów oraz plików zależy w dużym stopniu od Ciebie. Przykładowo może wyglądać następująco:

.
├── _config.yml
├── _drafts
|   ├── moj-wpis-ktory-powstaje.md
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   └── 2016-10-06-moj-pierwszy-wpis.md
├── _site
└── index.html

Co tutaj znajdziemy?

• _config.yml - plik w notacji YAML zawierający konfigurację projektu. Tutaj między innymi możesz zmienić adres swojej docelowej witryny, wskazać zależności, czy też może nawet zdefiniować jakieś stałe, które będą wykorzystywane w szablonie.
• _drafts - katalog, w którym możesz zamieszczać wpisy (szkice), które nie będą publikowane.
• _includes - znajdziesz tutaj małe pliki reprezentujące określone fragmenty szablonu.
• _layouts - w tym miejscu przechowywane są szablony. Takie szablony mogą być kolejno dziedziczone przez pliki HTML. Otóż Jekyll do renderowania szablonów używa biblioteki Liquid, dzięki czemu możesz je programować! Używać różnych pętli, zmiennych, filtrów. Jeśli nie miałeś do czynienia uprzednio z tą składnią zalecam rzucić okiem na kilka przykładów. To na początek wystarczy.
• _posts - jeśli zamierzasz prowadzić blog-a, bądź dział z aktualnościami, w tym miejscu dodajesz swoje wpisy. Zwróć uwagę na nazwę plików w obrębie tego katalogu. Data na początku w zadanym formacie jest obligatoryjna.
• _site - w obrębie tego katalogu jest generowana domyślnie strona. Na docelowym serwerze HTTP możesz zamieścić wyłącznie zawartość tego folderu.
• index.html - jeśli ten plik zawiera w sobie nagłówek YAML, zostanie przetworzony przez Jekyll-a, z wykorzystaniem systemu szablonów Liquid. W konsekwencji strona powitalna może być ubrana w szablon zdefiniowany w obrębie _layouts, oraz może zawierać inne zaprogramowane przez nas w jego obrębie treści. Jekyll przetwarza pliki w różnych formatach, między innymi: .markdown, .md, .textile oraz oczywiście .html.

Być może zainteresował Cię prefiks przy niektórych nazwach folderów “_”. Jego użycie daje znać Jekyllowi by ten nie był kopiowany do katalogu z wygenerowaną stroną (_site). Jak się być może teraz domyśliłeś wszystkie nie ignorowane pliki są kopiowane właśnie do docelowego katalogu. Niektóre uprzednio są przetwarzane (przykładowo powyżej opisany index.html), inne natomiast są wklejane w takiej samej postaci (mogą być to Twoje obrazki, pliki css i inne).

Liquid

Tworząc stronę internetową z wykorzystaniem Jekyll-a masz do swojej dyspozycji system szablonów Liquid. Dzięki niemu swoim dokumentom możesz nadać (na etapie przetwarzania) dynamiczny charakter. Liquid zapewnia Ci dostęp do zmiennych Jekyll-a. Możesz tym sposobem pobrać listę wszystkich wpisów na stronie, ich tytuły, treści. Oczywiście uzyskujesz dostęp do znacznie większej ilości informacji. Niektóre mogą pochodzić z pliku konfiguracyjnego, jeszcze inne z przygotowanych przez Ciebie plików. Tym sposobem możesz zbudować swoją prostą “bazę danych” opartą tylko i wyłącznie na plikach.

Przykładowo gdybyś chciał wyświetlić w obrębie pliku index.html listę wpisów z blog-a, mógłbyś skorzystać z następującego kodu:

<ul class="post-list">
    {% for post in site.posts %}
        <li>
            <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</span>

            <h2>
                <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title | escape }}</a>
            </h2>
        </li>
    {% endfor %}
</ul>

Jeśli sprawdzisz zawartość pliku index.html w obrębie katalogu docelowego _site, zauważysz że ten ma już treść składającą się z czystego html-a gotowego do wyświetlenia przez przeglądarki internetowe.

Wtyczki

Kiedy to wdrożymy się w pracę z Jekyll-em, może przyjść chwila, w której zdamy sobie sprawę że jego standardowe możliwości nam nie wystarczają. Na szczęście twórcy pomyśleli o systemie wtyczek. Dzięki nim możemy rozbudować możliwości samego generatora (zmusić go do tworzenia specyficznych plików oraz katalogów), czy też rozbudować samą składnie Liquid-a. Nic nie stoi na przeszkodzie abyś w trakcie zaprogramował własne filtry oraz tagi dla systemu szablonów. Osobiście proponuję zapoznać się na początek z dwoma popularnymi wtyczkami:

• jekyll-sitemap - pozwala generować mapę strony w postaci pliku xml;
• jekyll-feed - odpowiada za tworzenie kanału z aktualnościami w formacie Atom.

Darmowy hosting

Jekyll jest bardzo popularnym narzędziem. W rezultacie GitHub zapewnia darmowy hosting oraz integrację dla witryn powstałych z jego wykorzystaniem. To rozwiązanie sprawdza się fantastycznie dla wszystkich podstron różnych projektów, ale i nie tylko! Nic nie stoi na przeszkodzie, aby w obrębie GitHub-a dystrybuować stronę swojej firmy. Jest jeden haczyk. Jeśli chcesz aby to GitHub automatycznie budował stronę (edytujesz bezpośrednio źródła, nawet bezpośrednio z poziomu usługi), musisz korzystać ze standardowych wtyczek. Jeśli te nie spełniają Twoich oczekiwań zawsze pozostaje zbudowanie projektu na swoim komputerze oraz wysłanie do określonego repozytorium wyłącznie zawartości katalogu _site.

Konkurencja?

Oczywiście Jekyll nie jest jedynym generatorem statycznych stron internetowych. Na przełomie ostatnich lat powstało kilka takich rozwiązań. Między innymi:

• Middleman;
• Hugo;
• Hexo;
• Pelican;
• Metalsmith;
• Octopress.

Każda technologia ma swoje wady i zalety. Jedne mają bardziej rozbudowaną funkcjnalność (Middleman). Inne natomiast zostały zaprojektowane pod kątem maksymalnej wydajności (Hugo, napisany w języku Go, który nie wspiera wtyczek) kosztem funkcjonalności. Osobiście swoje projekty tego typu będę budował w oparciu o Jekyll-a. Jest to sprawdzone rozwiązanie, z dużą społecznością i wsparciem wielu firm.