Gatsby + DatoCMS = przyszłość projektowania stron internetowych

Jak wygląda proces tworzenia strony przy wykorzystaniu GatsbyJS, DatoCMS oraz Gatsby Cloud?

23 marca 2021

DatoCMS - ogólne informacje

DatoCMS to Headless CMS całkowicie oparty na API, tzn. cała zawartość jest dostępna poprzez:

  • Content Delivery API in GraphQL - służy do pobierania treści z CMS
  • Content Management API - służy do aktualizowania, usuwania czy pobierania treści projektów

Użytkownik tego systemu nie musi się martwić o serwery, utrzymanie czy bezpieczeństwo, gdyż wszystkie te kwestie są po stronie DatoCMS. My możemy się skupić na tym co najważniejsze z punktu widzenia klienta odwiedzającego naszą stronę czyli na samej treści :)


DatoCMS ma również bardzo dobrą integrację z technologią używaną przez nas do tworzenia nowoczesnych stron - GatsbyJS. Wśród najważniejszych zalet można wymienić:

  • live-reload treści na stronie po zapisie w CMS
  • najnowocześniejsza integracja z Gatsby GraphQL API
  • zaawansowane przetwarzanie, optymalizacja i lazy loading zdjęć
  • wygodny interfejs do tworzenia struktury danych (modele, bloki)
  • możliwość organizacji pól w tzw. fieldsety, co ułatwia pracę edytorom
  • szeroki wybór typu pól (Text, Media, Date and time, SEO, Location, Color, etc.)


Poniżej znajduje się lista możliwych do wybrania pól:


Tworzenie treści w DatoCMS

Tworzenie treści w DatoCMS oparte jest o koncept modeli i bloków. Tak naprawdę funkcję jaką będzie pełnił model ustala sam edytor :). Może on być:

  • pojedynczą podstroną (strona główna, kontakt, kariera itd.)
  • szablonem dla powtarzalnych podstron (np. aktualności, produkty)
  • modułem, który będzie powielany na wielu podstronach (np. nagłówek z opisem)
  • “kanałem”, w którym możemy zdefiniować zbiór wartości spośród których chcemy wybierać wartość w różnych miejscach strony (np. marginesy - duży, średni, mały itd.)

Wewnątrz modelu, możemy zdefiniować tzw. bloki, czyli struktury, która mogą być powielane w obrębie modelu. Tego typu rozwiązanie możemy zastosować na przykład w różnego rodzaju sliderach, kafelkach itd.

Integracja z Gatsby Cloud

DatoCMS znajduje się na liście CMS’ów, dla których Gatsby Cloud wprowadził automatyczną integrację. Co to oznacza w praktyce? Oznacza to, że zintegrowanie naszego systemu z Gatsby Cloud, dzieje się właściwie bez większego udziału programisty. Cały proces zajmuje dosłownie 2 minuty i jest niebywale prosty i intuicyjny. Mając stworzoną stronę w Gatsby Cloud, wystarczy z listy dostępnych CMS’ów wybrać DatoCMS i kliknąć Connect:

Następnie trzeba autoryzować Gatsby Cloud do korzystania z naszego projektu w DatoCMS i to wszystko! Więcej informacji o Gatsby Cloud dostępne tutaj.

Przykładowy model - struktura

Przykładowy model utworzony w DatoCMS prezentuje się następująco:

Składa się on z takich elementów jak nagłówek, opis, tekst na przycisku, link wewnętrzny (inna podstrona na naszej stronie), link zewnętrzny (link do innej strony) oraz pole ‘title for datocms’, dzięki któremu możemy nadać modelowi nazwę, pod jaką dany wpis będzie przechowywany w CMS.

Ścieżka tworzenia nowego modułu

Proces tworzenia nowego modułu w projekcie składa się z kilku kroków:

  • po pierwsze tworzymy w Gatsby widok modułu (my do stylowania wykorzystujemy styled-components, ale można skorzystać też z CSS Modules czy nawet czystego CSS’a)
  • następnie tworzymy w DatoCMS model odpowiadający strukturze danych, które będziemy wyświetlać w naszym module
  • po utworzeniu modelu, w zakładce Content uzupełniamy go treścią
  • następnie pobieramy dane poprzez query w GraphQL (aby odpowiednio napisać query korzystamy ze zintegrowanego w Gatsby narzędzia - GraphiQL)
  • podpinamy pobrane dane do utworzonego wcześniej widoku
  • po podpięciu wszystkich zmian przesyłamy wszystkie zmiany na repozytorium w którym znajduje się projekt i który jest podpięty do Gatsby Cloud
  • przesłanie zmian na repozytorium na odpowiedniego brancha, powoduje automatyczne przebudowanie strony

I to wszystko - nowy moduł jest już widoczny na stronie, a wszystkie treści są pobierane z DatoCMS ! :)

Aktualizacja i dbanie o kod

Do dbania o jakość naszego kodu wykorzystujemy dwa bardzo ciekawe narzędzia:

  • Snyk - jest to narzędzie, które informuje nas o tym, że pojawiły się nowe wersje bibliotek zainstalowanych w naszym projekcie. Zazwyczaj nowsze wersje są lepiej zoptymalizowane, działają szybciej i powodują mniej nieoczekiwanych błędów, więc dzięki temu narzędziu możemy dbać o to, by nasza strona była na bieżąco aktualizowana
  • SonarCloud - jest to narzędzie, które bardziej bezpośrednio analizuje kod strony. Znajduje ono tzw. “code smells”, czyli fragmenty kodu, które mogą być napisane lepiej, czyli zazwyczaj - krócej :)

Stack technologiczny - schemat

Poniżej przedstawiony jest schemat, który prezentuje omawiane narzędzia i technologie wraz z zaznaczeniem zależności pomiędzy nimi:

Podsumowanie

Przy użyciu technologii i narzędzi omawianych w tym artykule, w ostatnim czasie stworzyliśmy stronę Apius Technologies oraz landing page Smart Security. Serdecznie zapraszamy do odwiedzenia tych stron i doświadczenia jak szybko i przyjemnie się z nich korzysta :)