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

Minęło kilka lat, odkąd stworzyłem nowy wygląd strony dla znajomych zajmujących się turbosprężarkami.

Wówczas wybrałem Wordpress.

Nie był to nie wiadomo to jak duży projekt. Na stronie, oprócz informacji biznesowych nie dzieje się za dużo. Wordpress był dla niej aż nadto.

Więcej czasu zajmowało utrzymanie strony przy życiu poprzez ciągłe aktualizacje Wordpress’a czy też zmiany, powodujące problemy z motywem strony itp. Nie mówiąc o tym, że codziennie ktoś próbował się na nią włamać.

W ramach mojej dalszej nauki tworzenia stron opartych o Hugo (na mojej nie mam na razie co robić) postanowiłem odciążyć serwer, na którym leży ta (i inna) strona i przerobić ja na statyczną stronę.

Chwilkę mi to zajęło, nie powiem że nie. Natrafiłem na kilka problemów natury technicznej (HTML oraz CSS), ale w końcu wszystko ogarniałem. Sporo się przy tym nauczyłem.

Skupiłem się przede wszystkim na prędkości, implementacji WebP oraz lepszym wyglądzie na urządzeniach mobilnych. W tym celu wprowadziłem nowe menu pełnoekranowe.

Pojedynczy przycisk akcji zmieniłem na dwa, podczas gdy jeden służy bezpośredniemu kontaktowi, drugi prowadzi do strony kontaktowej.

Zdjęcia i galerie na stronie stały się nie lada wyzwaniem.

Dodatkowo założyłem sobie, że nie będę już wykorzystywał elementu float podczas tworzenia stron, chyba że będzie to naprawdę konieczne. I tak float zastąpiłem przez display: flex (flexbox). Zmotywował mnie do tego jeden post w internecie, który pokazał mi, jak efektywny potrafi być Flexbox. Dodatkowo pomocny okazał się A Complete Guide to Flexbox.

Wraz z implementacją WebP zobaczyłem, jakie ograniczenia istnieją, jeżeli chodzi o zdjęcie ładowane w tle (background-image) przez CSS. Na szczęście moduł modernizr (tylko z WebP) bez zaśmiecania strony pozwolił na uporanie się i z tym problemem. Tutaj okazał się pomocny artykuł: Using WebP Images.

Oczywiście, całość jest serwowana z Netlify z pominięciem Cloudflare.

Jak przyjdzie na to czas, pomyśle nad dodaniem Netlify CMS, aby można było wprowadzać zmiany przez osoby, które niekoniecznie muszą się znać na Hugo.

Pożyjemy, zobaczymy.

Efekt strony Turbo Kliniki opartej na Hugo można podziwiać pod adresem: www.turboklinika.com.pl

Komentarze
Kategorie