Kolejna strona oparta na Hugo (www.paraplan.com.pl)

Od kiedy to pamiętam, było to około 2008 roku jak nie wcześniej, zacząłem swoją współpracę z firmą PARALAN z Koszalina zajmującą się profesjonalnie świadczeniem usług lotów balonem na ogrzane powietrze.

Na początku strona była tworzona w HTML’u i edytowana w notatniku. Wraz z rozwojem firmy oraz rozrostem informacji zawartych na stronie przeszliśmy na najlepsze w tym czasie rozwiązanie, jakim był WordPress.

Strona działała na WordPress przez kilka dobrych lat do czasu, gdy rozrosła się do wielkości 15 GB i zasoby serwera współdzielonego zaczęły sprawiać problemy. Dodatkowo więcej czasu spędzaliśmy na monitorowaniu prawidłowości działania witryny a niżeli na dodawaniu nowych treści.

Na początku 2021 roku stanęliśmy przed koniecznością podjęcia decyzji, w którym kierunku będziemy zmierzać z naszą stroną. Do wyboru była kolejna inwestycja przejścia na dedykowany serwer, która kosztowałaby nie mało, lub też poszukanie innego rozwiązania.

Przeniesienie takiej strony nie jest łatwe. Sam dziennik lotów balonem, galeria i multimedia zawierała w sumie przeszło 400 wpisów a każdy z nich tonę zdjęć i filmików. Wszystko to trzeba byłoby przenieść i ostatecznie posprawdzać i po poprawiać.

ps. Filmiki już serwowaliśmy z naszego kanału na YouTube.

Im dłużej działaliśmy na WordPress, tym ciężej było to zrobić. Jednocześnie, im dłużej używaliśmy WordPress, tym bardziej nasza strona stawała się powolna i kosztowała coraz to więcej. Trzeba było działać i to natychmiast.

Kolejny raz wybrałem Hugo jako podstawę na “nową” odsłonę strony internetowej.

Po skutecznym przeniesieniu mojej własnej strony, następnie strony www.turboklinika.com.pl, www.aqua-tech.net.pl oraz www.andrewsfasteners.uk rozpocząłem przymiarki do niniejszej strony.

Niniejsze przymiarki trwały około 3 miesięcy (z doskoku).

Zacząłem oczywiście od motywu strony, który został nieco uproszczony i odświeżony, po czym zacząłem myśleć jak przenieść te prawie 15 GB zdjęć, aby móc wykorzystać do tego GitHub oraz serwować stronę z Netlify.

Problemem było to, że repozytorium GitHub nie może przekraczać 1 GB. Nie byłoby szans na osiągnięcie zamierzonego celu bez kombinowania.

Wstępnie myślałem o podzieleniu strony na kilka repozytoriów na GitHub. Dyskutując tego typu rozwiązanie na forum Hugo zrozumiałem, jak tego dokonać.

Hugo oferuje opcję modułów. Gdy podzielimy naszą stronę (foldery) na osobne repozytoria, podczas budowania strony skrypt Hugo złączyłby je razem w jedną dużą stronę.

Wszystko w teorii byłoby idealnym rozwiązaniem jednakże pozostało jedno ale.

Netlify, usługodawca, którego używać będę do serwowania strony, w darmowym rozwiązaniu nie ogranicza tego typu rozwiazania, ale też, zgodnie z regulaminem, zaznacz, że może to ulec zmianie.

W momencie, gdy spędziłbym sporo czasu na przygotowanie tak dużej strony, nie chciałbym być rozczarowany, gdy przy pierwszym serwowaniu strony z Netlify otrzymał bym “przyjazny” email stwierdzający, że darmowe rozwiązanie nie jest dla mnie i powinienem znaleźć miejsce na stronę gdzie indziej.

I znowu musiałem pomyśleć, czy oby to rozwiązanie jest jedyne, które mogę użyć.

A gdyby tak wrzucić zdjęcia, które zajmują tak naprawdę najwięcej miejsca, na inną stronę, z której byłyby one serwowane na stronie opartej o Hugo.

Dzięki temu strona zajmowałaby kilkaset mega, a gigabajty danych serwowane byłyby z innego miejsca.

Zacząłem myśleć.

W międzyczasie, wykorzystując sprawdzone rozwiązanie od KevQ przeniosłem dane z Wordpress do Markdown i zacząłem ich przeglądanie oraz korektę.

Podczas gdy wszystkie strony, oprócz dziennika lotów, galerii i multimediów, zostały przejrzane, stanąłem jeszcze raz przed pytaniem, co zrobić ze zdjęciami.

W pierwszej kolejności zacząłem od usunięcia wszystkich śmieci, które Wordpress generuje.

Jedno zdjęcia zawierało co najmniej 5 wersji w różnych rozmiarach, nie mówiąc już o dodatkowych pięciu, jeżeli używałeś również WebP.

I tak z 14.64 GB udało mi się zejść do nieco poniżej 7 GB!

Nadal za dużo na 1 GB repozytorium na GitHub, jednakże postęp.

W międzyczasie natrafiłem na stronę, na której przeczytałem jak wstawić zdjęcia przechowywane w albumie w Zdjęciach Google bezpośrednio na stronę internetową.

Rozwiązanie to mogłoby być idealne.

Zdjęcia Google (Google Photo) pozwala na zamieszczenie 15 GB danych za darmo. Co więcej, przy włączonym oszczędzaniu miejsca, nasze zdjęcia są dodatkowo “optymalizowane”, przez co zajmują mniej.

Domyślnie wszystkie zdjęcia na stronie przepuszczam przez Optimizilla a kompresja po stronie Google działa bardzo podobnie (nieco gorzej o jakieś 5% wielkości pliku).

A więc rozpocząłem wrzucanie zdjęć z lotów do Google Photo, segregowanie ich w stosowne albumy, udostępnianie, aby były dostępne publicznie. Następnie, z wykorzystaniem strony publicalbum.org rozpocząłem generowanie kodu, który mogłem wstawić w odpowiedni wpis (plik Markdown) aby wyświetlić je w postaci “galerii”.

Proces ten był bardzo czasochłonny.

Z ręką na sercu mogę powiedzieć, że zajęło mi to przeszło 3 tygodnie kilkugodzinnych prac dziennie.

Porucz wgrywania zdjęć do Google oraz generowaniu kodu musiałem przejrzeć wpisy pod kątem prawidłowych odnośników, tytułów, tagów, treści oraz obrazka wyróżniającego, który później wykorzystany będzie do prezentowania ładnej galerii miniaturek na stronie.

Na żadną inną stronę nie poświęciłem tak dużo czasu, jak z tą.

Dało mi to dużo do myślenia i obiecałem sobie, że nigdy więcej nie postawię żadnej strony opartej o WordPress, gdyż wyciągnięcie jej z powrotem kosztuje więcej (czasu), niż zrobienie jej od początku z wykorzystaniem lepszego rozwiązania.

Strona paraplanu jest tak naprawdę ostatnią stroną, którą nadal zarządzam, a która bazowała na zainstalowanym WordPress na serwerze.

Pomagam z doskoku jeszcze przy innej stronie (antybariera.pl), która pracuje na WordPress, jednakże jest ona oferowana przez WordPress.com, a nie WordPress.org, przez co nie marnuje czasu na monitorowanie serwera.

Możesz pomyśleć, że przecież WordPress nie jest taki zły. Jednakże, jeżeli popatrzysz pod kątem treści, to z wykorzystaniem plików markdown masz pełną kontrolę gdziekolwiek chcesz.

Oczywiście, jest tutaj pewnego rodzaju kompromis, gdyż nie ma możliwości zarządzania strony przez przeglądarkę internetową, ale od czego są rozwiązania takie jak Netlify CMS.

Netlify CMS jest czymś, co będę z czasem próbował wprowadzić na tą, jak i inne strony, które stworzyłem z wykorzystaniem Hugo.

Oprócz tego, że pozbyłem się WordPress, nie muszę również płacić za serwer (chociażby do czasu aż strona się rozrośnie), zyskałem w oczach Google przyspieszając całą stronę internetową przywracając ją ponownie na zieloną kreskę w Core web vitals.

Krótkie porównanie WordPress vs Hugo dla strony www.paraplan.com.pl po zakończonej migracji.