Generator stron statycznych – co to jest?
Na początek wyjaśnienie, czym jest generator stron statycznych. Jest to narzędzie, które generuje w pełni statyczny HTML wraz z towarzyszącymi mu skryptami JS i stylami CSS. Generator stron statycznych (SSG – static site generator) ułatwia i automatyzuje przygotowanie poszczególnych podstron strony internetowej. Przykładowo, gdy mamy stronę internetową zawierającą dziesiątki, czy nawet setki podstron, i dodajemy kolejną podstronę, nie musimy na każdej jednej podstronie modyfikować menu. Generator automatycznie doda kolejną pozycję w menu i wygeneruje na nowo wszystkie niezbędne podstrony.
Generatory stron statycznych a WordPress
Po co używać generatora SSG, kiedy mamy do dyspozycji strony budowane dynamicznie i pełną gamę systemów zarządzania treścią (CMS) z WordPressem na czele?
Programowanie strony opartej na SSG
Zbudowanie strony internetowej w generatorze stron statycznych wygląda inaczej, a więc na pewno jest trudniejsze dla początkujących. Jednakże jest dość prosty w nauce, a zarządzanie treściami może być bardzo proste.
Zarządzanie treściami w generatorze stron statycznych
Treści przygotowywane są w osobnych plikach (np. w Hugo i Jekyll są to pliki .md – markdown), a generator stron statycznych umieszcza te treści w szablonach/layoutach i generuje w ten sposób cały zasób plików HTML. Takie zarządzanie treściami wydaje się trudne i uciążliwe, jednakże funkcjonuje szereg chmurowych systemów zarządzania treściami, pod które możemy podłączyć stronę. Wówczas, podobnie jak w systemach CMS, wypełniamy treściami pola WYSIWYG, w których możemy formatować nasze treści.
Bezpieczeństwo strony statycznej generowanej w SSG
Dobrze wiemy, jak ważkie jest bezpieczeństwo stron internetowych, a także jak bardzo jest ono problematyczne w przypadku stron generowanych dynamicznie, gdzie na serwerze, nim w przeglądarce pokaże się nam strona, wykonywane są liczne skrypty i zapytania do bazy danych. Najbardziej nagłaśniany jest oczywiście problem bezpieczeństwa w WordPress, ale inne systemy również się z tym borykają. Należy więc zabezpieczać się codziennymi kopiami bezpieczeństwa (w przypadku sklepów wskazane jest nawet kilka w ciągu doby) oraz aktualizowanie CMS wraz ze wszystkimi wtyczkami/modułami.
W przypadku strony generowanej statycznie bezpieczeństwo jest niemal stuprocentowe (bulletproof). Kod nie jest wykonywany na serwerze i nie ma pośrednictwa baz danych. Lukę stanowią jedynie nasze dane dostępowe, np. do chmurowego systemu zarządzania treściami lub czasami FTP. Ale w tym wypadku mamy wsparcie w postaci pełnej historii zmian na stronie, ponieważ zazwyczaj strony internetowe generowane w SSG publikowane są automatycznie z pośrednictwem zdalnego repozytorium GIT, gdzie zapisywana jest pełna aktualna zawartość strony, wraz z jej pełną historią.
Prędkość strony statycznej
Ta kwestia jest bezdyskusyjna. Jak wyżej wspomniałem, nie ma tutaj kodu/skryptu wykonywanego po stronie serwera, ani zapytań do baz danych. Brak jest jakichkolwiek wąskich gardeł. Strona internetowa jest natychmiast serwowana w postaci HTML/JS/CSS.
Co to jest hugo?
Hugo jest generatorem stron statycznych napisanym w GO (otwarty język programowania wspierany przez Google). Wielkim atutem generatora stron statycznych Hugo jest prędkość z jaką budowana jest strona. Hugo jest jednym z najszybszych, o ile nie najszybszym generatorem stron statycznych. Nie pozostaje to bez znaczenia, jeżeli strona internetowa zawiera setki podstron.
Kolejne atuty Hugo to:
- duża elastyczność,
- dostępność dobrze przygotowanych szablonów zarówno płatnych jak i darmowych,
- możliwość generowania również formatów JSON czy AMP,
- możliwość automatycznego generowania zwymiarowanych zdjęć (srcset),
- nieograniczone typy treści (w WP jest to custom post type),
- dowolne taksonomie (kategorie, tagi, itp.),
- możliwość wykorzystania API.
Hugo można go zainstalować na: Windows, macOS, Linux, Open BSD i FreeBSD. W internecie można znaleźć liczne informacje, jak ten proces przeprowadzić.
Struktura Hugo
Projekt przygotowany w Hugo składa się z następujących folderów:
- Archetypes – zawiera szablony treści. Możemy tutaj zdefiniować domyślne treści (content) dla poszczególnych typów treści (posts, pages, custom posts..),
- Assets – tutaj należy umieścić zasoby, które wymagają przeprocesowania przez Hugo. Mogą to być przykładowo pliki SASS, które powinny zostać skonwertowane do CSS,
- Config – tutaj oczywiście znajduje się konfiguracja projektu, ale najcześciej możemy to zastąpić pojedynczym plikiem config.toml/yaml, który wówczas znajduje się w głównym katalogu projektu,
- Content – folder zawierający wszystkie pliki i foldery z treściami na stronę internetową,
- Data – zawiera pliki JSON,YAML i TOML, w których możemy zawrzeć dodatkową konfigurację naszej strony, oraz treści powtarzalne, czyli np. treść stopki, czy jakiejkolwiek sekcji, która występuje na różnych podstronach,
- Layouts – znajdziemy tutaj szablony w tym wypadku pliki HTML, które będą decydowały o tym jak renderowane będą statyczne pliki HTML oraz gdzie będą znajdowały się poszczególne treści,
- Static – tutaj możemy umieścić wszelkie pliki, które nie wymagają procesowania przez hugo i będą prezentowane na stronie, w takim stanie jak są obecnie, np. ikonki, zdjęcia nie wymagające wymiarowania dla srcset, pliki JS.
Ograniczenia i możliwości Hugo
Taksonomia w Hugo – kategorie i tagi
Hugo podobnie jak WordPress obsługuje kategorie, tagi oraz umożliwia tworzenie własnej taksonomii. Jednakże poważny mankament stanowi, to że jak na razie Hugo ma wbudowaną jedynie obsługę taksonomii w modelu płaskim, czyli nie możemy tworzyć podkategorii. Ale, czy nie wspomniałem, że Hugo jest bardzo elastyczne? Przy odrobinie kreatywności i pomocy folderu “data” istnieje możliwość stworzenia hierarchicznej taksonomii. Przykładowo w pliku typu JSON można stworzyć drzewo kategorii, a następnie w szablonie przygotować wyświetlanie tego drzewa oraz artykułów, czy produktów do nich przypisanych.
Czy sortowanie i filtrowanie artykułów i produktów jest możliwe w Hugo?
Z pozoru wydaje się, że sortowanie i filtrowanie będzie możliwe tylko w wypadku stron, gdzie treści serwowane są z bazy danych. Wówczas, gdy użytkownik chce filtrować lub sortować oglądane przez siebie treści, proces ten odbywa się po stronie serwera. Skrypt na serwerze kieruje zapytanie do bazy danych, a proces ten odbywa się na poziomie bazy danych. Tak przygotowane dane serwer zwraca użytkownikowi.
W Hugo nie mamy bazy danych, choć jest to również osiągalne, jeżeli będziemy się łączyć z serwerem bazy danych poprzez API. Nie musimy jednak uciekać się do takich rozwiązań, gdy zależy nam na prędkości działania strony. Z pomocą przychodzi nam znowu elastyczność Hugo, który na podstawie zawartości folderu “content” może generować nie tylko pliki HTML, ale również JSON. Posiłkując się wykonywanymi przez przeglądarkę skryptami JS oraz treściami wygenerowanymi do pliku JSON można sortować, filtrować, a nawet przeszukiwać treści i serwować użytkownikowi wyniki.
Jakie strony internetowe można przygotować w Hugo?
Prawie każdą stronę internetową można zbudować w Hugo. Ogranicza nas jedynie wyobraźnia. Jeżeli do pracy zaprzęgniemy dostępne rozwiązania chmurowe oraz ich API, możemy w Hugo zbudować nawet sklep internetowy. Taka architektura strony nosi nazwę JAMSTACK. Treści związane z produktami obsługujemy wówczas przy pomocy plików JSON, koszyk i jego obsługę przy pomocy skryptów JS, a same płatności i zbieranie zamówień możemy podłączyć poprzez API z jednym z dostępnych rozwiązań chmurowych (np. Stripe czy Snipcart).
