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