Hugo

Ostatnio znalazłem chwilę, by obejrzeć niezwykle wnikliwą i dynamiczną prezentację Adama Argyle’a zatytułowaną „25 nowych i świetnych funkcji CSS”.

Już po pięciu minutach, gdy pokazał zastosowanie @view-transition { navigation: auto; } i cała publiczność zareagowała entuzjastycznie, wciągnęło mnie to na dobre i oglądałem aż do końca.

Dowiedziałem się naprawdę wiele i wdrożyłem sporo z omawianych funkcji na swoich stronach. O części z nich słyszałem wcześniej, ale nie mam zwyczaju wdrażać wszystkiego od razu. Gdy technologie są jeszcze na wczesnym etapie adopcji w przeglądarkach, wolę poczekać. Problem w tym, że później często o nich zapominam, dlatego prezentacja Adama przypomniała mi o kilku koncepcjach, które już kiedyś spotkałem.

Jedną z nich było użycie color-scheme: light dark; oraz podejście z wykorzystaniem składni light-dark() dla kolorów jasnych i ciemnych.

W 2023 roku przyjrzałem się, jak dodać odpowiednie tagi hreflang do mojej osobistej strony internetowej, które uwzględniały dodanie odniesienia do bieżącego języka, odniesienia do przetłumaczonej strony (jeśli jest dostępna), oraz jako domyślnie wskazywanie na stronę zaprojektowaną jako przełącznik językowy.

Od tamtej pory sądziłem, że to podejście jest poprawne, ale odkryłem, że to rozwiązanie na mojej stronie, gdzie nie cała zawartość jest w 100% przetłumaczona, nie jest dobre dla stron w pełni przetłumaczonych domyślnie.

Oto, czego się z tego nauczyłem i jak zoptymalizowałem hreflang i x-default na stronach zbudowanych z użyciem Hugo.

Ustawienie meta tagu hreflang na Twojej wielojęzycznej stronie powinno być tak proste jak bułka z masłem. Wystarczy umieścić odpowiedni meta tag na stronie, odnieść się do przetłumaczonej wersji i w wersji przetłumaczonej odnieść się z powrotem do oryginalnej.

Wygląda to na takie proste. Koniec historii? Nieprawda!

Niestety, 25 kwietnia 2025 roku Google ogłosiło co następuje:

Od dziś wydawcy nie mogą już dodawać publikacji do Centrum Wydawców. Wprowadzamy tę zmianę w ramach przejścia na automatycznie tworzone strony publikacji, które zostaną uruchomione później w tym roku.

Wydawcy, którzy mają ręcznie tworzone strony publikacji, nadal będą mieli dostęp do funkcji dostosowywania aż do końca tego roku, kiedy strony zostaną przełączone na automatyczne tworzenie.

Przekazuję poniższy artykuł wyłącznie do celów referencyjnych.

Czy masz stronę internetową lub blog, na którym codziennie lub od czasu do czasu publikujesz nowe rzeczy?

Czy wiesz, że możesz je opublikować w Wiadomościach Google?

Ostatnio, kiedy czytałem jeden z artykułów na 9to5mac, zauważyłem, że pod ich wpisem dostali oni fajną funkcję.

Opcję śledzenia ich witryny za pośrednictwem Wiadomości Google (Google News).

Daje im to dodatkowy sposób na pozyskanie większej liczby odwiedzających, ale także przekonuje ich do pozostania w kontakcie z ich treściami.

Moje pierwsze wrażenie było takie… Chcę to również umieścić na jednej z moich stron internetowych, więc zaczynam odkrywać, jak to zrobić. Kiedy to zrobiłem, byłem zaskoczony, jak stosunkowo łatwo było to zrobić bez dodatkowej pracy z mojej strony. Dzięki wykorzystaniu kanału RSS witryny i przejściu przez wstępną konfigurację i zatwierdzenie (co zajęło około 2-3 dni) moja pierwsza witryna była aktywna, a posty były aktualizowane po opublikowaniu.

To jest kolejny powód na to że RSS nie umarł i nadal ma sens.

Oto jak to zrobiłem i jak ty też możesz to zrobić!

Odkąd przeniosłem moją stronę na statyczny generator treści oparty na Hugo pozbyłem się szeregu usług, od których byłem zależny, a tak naprawdę nie były one potrzebne.

Na mojej stronie, za czasów WordPress korzystałem z Disqus jako systemu komentarzy. Ten też system przeniosłem do Hugo, ale po tym, jak powodował on więcej problemów, a niżeli to było warte (związanych z prędkością strony), postanowiłem to zmienić.

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.

Przeszło trzy lata (2018) temu zrobiłem stronę dla firmy AQUA TECH. Podobnie jak strona Turbo Kliniki, nie był to jakiś nadzwyczajnie duży projekt.

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.

Podczas migracji z WordPress do Hugo stanąłem przed nie lada wyzwaniem, jeżeli chodzi o galerię zdjęć.

Otóż Hugo przetwarza pliki zapisane w markdown na statyczne strony HTML. W podstawowej konfiguracji każde jedno zdjęcie wstawiane jest jako pełno-wymiarowy obraz, który następnie może być ogarnięty poprzez odpowiednie style CSS, aby wyświetlić go tak jak będziemy chcieli.

A co jeżeli chcemy wstawić zdjęcia w postaci galerii? Na przykład jedno koło drugiego lub 3 na górze 2 na dole?

Po 39 wersjach (commits) na GitHub i 30 minutach budowania strony (build) na Netlify, tak minęły dwa tygodnie, odkąd przesiadłem się z WordPress na Hugo i nie żałuje!