WordPress i Gatsby – Case study Headless WordPress

WordPress i Gatsby – Case study Headless WordPress

10 min. czytania

JavaScript to technologia, która w ostatnim czasie rozwija się niezwykle szybko. Mój pierwszy pracodawca często powtarzał „I tak wszyscy skończymy w JavaScript”. Wydawało mi się wtedy jednak, że to nie dla mnie. Na ostatnim WordCampie w Łodzi spotkałem Sebastiana Kurzynowskiego, który opowiadał o połączeniu WordPress i Gatsby. Argumenty miał mocne. Namówił mnie i… spróbowałem. Wybór padł na projekt strony internetowej dla mojej narzeczonej – czteryokrazenia.pl.

W tym wpisie znajdziesz:

Moje wątpliwości dotyczące Gatsby

Rozdzielenie części wizualnej od WordPressa wzbudzało we mnie duże wątpliwości. Na moich stronach internetowych ilość wtyczek ograniczam zazwyczaj do minimum dopasowując określone funkcjonalności do potrzeb klienta. Rozumiem jednak klientów, którzy wolą załatwić niektóre funkcjonalności wtyczką (ze względu na przykład na ograniczony budżet). W przypadku użycia Gatsby w wielu przypadkach zabieram możliwość samodzielnego dodania na przykład formularza do zapisu do newslettera czy wdrożenia formularza kontaktowego.

Biłem się również z myślami – Do jakiego typu stron internetowych Gatsby nadaje się najlepiej? Przy większych stronach czas budowania aplikacji byłby moim zdaniem zbyt długi. Natomiast w przypadku małych stron – czy to nie byłoby jak wyciąganie bazooki do ustrzelenia muchy?

Zastanawiałem się ponadto jak wygląda połączenie Gatsby z Yoast SEO, czy Advanced Custom Fields PRO. Zależało mi na wykorzystaniu obu wtyczek w tym projekcie. Nie wyobrażałem sobie strony internetowej bez wsparcia SEO, bądź dodatkowych bloków do Gutenberga. Jak się później okazało, moje wątpliwości były przesadzone.

Dlaczego wybrałem Gatsby dla czteryokrazenia.pl?

Najważniejsze założenia projektu

Na sam początek przedstawiłem Ewelinie i Mateuszowi główne założenia projektu. Nie mieli oni wygórowanych wymagań. Zależało im głównie na uporządkowaniu wszystkich treści z projektu. Wspólnie zadecydowaliśmy o tym, że najważniejszymi rzeczami są:

Prostota w edycji

W każdym projekcie najbardziej istotną kwestią jest dla mnie to, żeby mój klient nie miał problemów z obsługą strony internetowej. Chciałem umożliwić Ewelinie i Mateuszowi edycję witryny z poziomu Edytora Gutenberga. To dla nich tworzyłem stronę, a nie dla siebie. Ważne było dla mnie, by wykorzystać pełen potencjał Edytora Gutenberg i funkcjonalności dodatkowych bloków za pomocą Advanced Custom Fields PRO. Ewelina trochę obawiała się, że eksperyment z nowymi technologiami zabierze jej możliwość edycji kosztem wydajności. Udało się jednak bez problemu spełnić jej potrzeby i wykorzystaliśmy pełen potencjał bloków Gutenberga.

Ikona warning
 Uwaga

Mimo wszystko, do utworzenia dodatkowych bloków do Gutenberga musiałem utworzyć dodatkowy motyw do WordPressa zawierający minimum funkcjonalności.

Do motywu dzięki Advanced Custom Fields PRO utworzyłem bloki, których potrzebowałem. Dołączyłem ponadto funkcjonalności, które udoskonaliły edytor Gutenberga w panelu administracyjnym.

Optymalizacja SEO poprzez Yoast SEO

Zależało mi na wykorzystaniu Yoast SEO, bo jest ona stosunkowo prosta w obsłudze z poziomu panelu edycji. Właściciele strony korzystali z tej wtyczki już wcześniej, więc obsługa nie jest dla nich żadnym problemem. W skonfigurowaniu Yoast SEO z Gatsby bardzo pomogło rozszerzenie WPGraphQL. Pozwoliło ono pobrać wszystkie pola (tytuł, opis, obrazek wyróżniający dla Facebook’a czy Twittera). Istotne było dla mnie to, by strona w Gatsby miała takie same funkcjonalności jak motyw budowany od podstaw.

Yoast SEO Optymalizacja

Dostosowanie witryny do wymogów Google Lighthouse oraz PWA

Moim celem było to, by osiągnąć jak najlepsze wyniki w testach Google Lighthouse i GTMetrix. Oczywiście nie za wszelką cenę. Nie chciałem odmawiać sobie wdrożenia kodu dla Google Analytics, bądź Facebook Piksela. Ponadto o ile było to możliwe chciałem zadbać o to by w zakładce Accessibility, Best Practices oraz SEO uzyskać maksimum. Istotne było dla mnie również to, by strona była zgodna z wymogami Progressive Web App – czyli, żeby była możliwość obsługi strony internetowej tak jak z normalnej aplikacji w telefonie. Mimo faktu, że strona jest mała to wynik z fajerwerkami w teście Google Lighthouse miło mnie zaskoczył! 😉

Gatsby optymalizacja PWA i SEO
gtmetrix

Możliwość uruchomienia Gatsby na swoim hostingu

Tak jak wcześniej wspomniałem zależało mi na tym, by znaleźć hosting, który umożliwiłby obsługę Gatsby. Wybór padł na hosting od MyDevil.net, który oferuje pełne wsparcie dla Node.js.

Chciałem sprawdzić rozwiązanie, które pozwoliłoby moim klientom czuć się niezależnymi ode mnie. Wybór padł na hosting od MyDevil.net, który oferuje pełne wsparcie dla Node.js. Uruchomienie samej aplikacji na hostingu MyDevil.net nie było problemem. Początkowo należało dostosować wymagania aplikacji do właściwości serwera.

Aktualizacja danych z WordPressa w Gatsbym

Zależało mi jednak na tym, by aktualizacja danych z WordPressa odbywała się automatycznie. Nie chciałem po każdym dodanym wpisie logować się do konsoli i uruchamiać polecenia budowania stron statycznych. Rozpocząłem jednak od małych rzeczy. Spróbowałem automatycznego odświeżania treści co pół godziny. Na sam początek było to wystarczające. Wiedziałem jednak, że to rozwiązanie jest w porządku ale tylko na krótką metę. Poprawienie pilnej literówki i oczekiwanie na odświeżenie treści mogło okazać się niezwykle irytujące. Po długim czasie spędzonym z supportem MyDevil.net udało się osiągnąć cel. W tym miejscu bardzo chciałbym podziękować za udzielenie potrzebnego wsparcia.

W trakcie pisania wpisu otrzymałem wiele wskazówek. Między innymi o tym, że w przypadku połączenia WordPress i Gatsby warto spróbować wykorzystać do tego GitLaba. W jednym z najbliższych projektów planuję go wykorzystać. Z pewnością o aktualizacji poinformuję w tym miejscu.

Zalety i wady tworzenia strony na WordPressie za pomocą Gatsby

Zalety budowania stron w oparciu o Gatsby i WordPress:

Wady korzystania z rozwiązania opartego na Gatsby i WordPress:

Przy jakich stronach internetowych Gatsby sprawdzi się najlepiej?

Moim zdaniem Gatsby sprawdzi się najlepiej w poniższych sytuacjach:

Podsumowanie

Podsumowując. Pierwszą budowę strony internetowej w oparciu o Gatsby będę z pewnością miło wspominać. Pomimo tego, że napotkałem wiele przeciwności jestem szczęśliwy że wszystko udało się dociągnąć tak jak sobie wyobrażałem. W przypadku strony czteryokrazenia.pl wybór Gatsby był idealnym rozwiązaniem zarówno dla mnie jak i dla moich klientów. Wilk syty i owca cała.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *