Jak działa blog?

Jak każda strona w sieci, reactywny.pl musi posiadać swój hosting, domenę, ewentualnie bazę danych. W przypadku tego bloga, strona korzysta z większej liczby zależności. W tym poście chciałbym przedstawić funkcjonowanie bloga od strony technologicznej i mój sposób działania w prowadzeniu serwisu. Na jakie rozwiązania postawiłem?

Na wstępie chciałbym uprzedzić, że strona nie działa na żadnego rodzaju content CMSach czy generatorach treści typu Wordpress, w którym możemy sobie wyklikać całą stronę. Żeby nie być hipokrytą w jakimś tego słowa znaczeniu, zaznaczam, że sam się posługuję CMSem do projektów. Jest to jednak tzw. headless CMS, różniący się nieco od klasycznych tego typu narzędzi jak wspomniany już przeze mnie Wordpress lub Joomla. Pojęcie to zostawiam na osobny akapit. Żeby nie było, nie mam nic ani do Wordpressa, ani do klasycznych CMS. Podobno na samym Wordpressie stoi nawet 37% sieci. Są to wspaniałe narzędzia, ułatwiające życie wielu ludziom, ale tworząc strony tylko w Wordpressie nie możemy się nazywać FrontEnd Developerem, a już tym bardziej - o zgrozo - programistą. Odpowiedniejszy tytuł dla takiej osoby to Wordpress Developer. Poza tym Wordpress ogranicza w wielu aspektach i nie daje przyjemności ani z tworzenia strony, ani z jej prowadzenia. Ja wolałem napisać wszystko od podstaw, zrobić coś z niczego - poczynając od reactowych komponentów, poprzez style, aż do całej logiki strony. Bo jeżeli czytałeś/aś mój pierwszy post, to wiesz już, że uwielbiam to robić. W czym więc napisałem bloga?

Gatsby i statyczne renderowanie

Wykorzystując opartego na Reakcie Gatsbyego, chciałem osiągnąć jak najszybsze wyniki w testach szybkości dla stron, jak najkrótsze ładowanie się strony oraz ogólny performance. Umożliwiło to statyczne generowanie strony, które jak pewnie wiecie, Gatsby oferuje. Przy buildzie pliki są serwowane jako proste pliki HTML, CSS i JS. Aplikacja renderuje się tylko raz, a nie w locie, jak w przypadku Reacta, który reprezentuje Client Side Rendering (CSR). Ale to temat na zupełnie inny wpis. Na ten moment, należy jedynie wiedzieć, że strona jest renderowana za pomocą wspaniałego Gatsbyego, któremu blog zawdzięcza taką szybkość działania. Wynik PageSpeedInsights: 

zdjęcie tematyczne

Dla komputerów, a dla telefonów wynik to 95. Dla stron wpisowych score wynosi odpowiednio około 30 i 60 - jest to spowodowane ogromną zależnością jaką są komentarze oparte na Disquisie. Disquis nie psuje na szczęście indeksowania, a najbardziej dla niego liczy się index page. A propos komentarzy.

Disquis dostawcą komentarzy

Disquis to narzędzie ułatwiające sprawę wielu webmasterom odnośnie komentarzy. Ot, wklejamy znacznik albo komponent disquisowy i czieszymy się sekcją komentarzy. Ma on jednak ogromną wadę - używanie tego narzędzia powoduje, że cały content komentarzy twojej strony jest na zewnętrznych serwerach. Oczywiście możemy je moderować jak tylko chcemy. ale w momencie hipotetycznego upadku Disquisa, tracimy swoje komentarze. Oczywiście jest to przykład zupełnie abstrakcyjny i raczej niemożliwy, ale ukazuje on jak bardzo twoje komentarze nie należą do ciebie. Poza tym, jest to bardzo obciążające narzędzie i spowalniające ładowanie strony. I jeszcze jedna wada - jest to zależność. A zależności chcemy mieć na stronie jak najmniej. Dlaczego więc zdecydowałem sie na Disquisa? Ponieważ blog to nie jest wielka wartość sceniczna i w przypadku nawet utraty komentarzy, czy zablokowania do nich dostępu, nic się nie stanie. Dodatkowo, napisanie systemu komentarzy nie jest łatwe - dzięki korzystaniu z Disquisa oszczędzam więc czas i wysiłek na napisanie własnego systemu. Łatwo go przystosować do siebie i do swoich potrzeb.

Pisanie postów w headless CMS

Na początku wspomniałem, że nie lubię Wordpressa, a sam korzystam z CMSa. To prawda. Jednak headless CMSy róznią się działaniem zgoła odmiennym. Do blogowania wykorzystuję aplikację DatoCMS. Jest to strona i aplikacja na której posty dodaję w tak prosty sposób:

zdjęcie tematyczne

Gatsby za pomocą języka zapytań GraphQL łączy się z API DatoCMS i za każdym razem podczas buildu i deployowania zaciąga dane z kwerendy, w której otrzymuje wszystkie poprzednie i nowy wpis/wpisy. Następnie Gatsby sprawdza ile takich obiektów otrzyma i na tej podstawie generuje statyczną stronę HTML z odpowiednim linkiem, danymi posta, SEO itd. dla każdego posta. Oczywiście wszystko te dane trzeba odpowiednio obrobić i dlatego jest to wyświetlane w taki sposób jak teraz - na przykład dane z tego akapitu zostały tak właśnie zaciągnięte i wyrenderowane jako ostylowany DOM na odpowiednim miejscu. Zadanie to należy do programisty. W aplikacji tej można dodawać na przykład modular content - to znaczy wybierać sobie potrzebne do napisania posta rzeczy, takie jak akapit, nagłówek lub zdjęcie, a nawet kod. Ale przed tym należy do odpowiednio skonfigurować a w Gastbym, jak już wspomniałem, obrobić. Przykładowy skrypt reactowy:

//przykład kodu na stronie reactywny.pl
import React from 'react';
import Privacy from './Privacy';
import StyledPrivacyWrapper from './PrivacyWrapper.styled';

const PrivacyWrapper = () => {
  return (
    <div style={{ width: '100%', backgroundColor: '#F1EAEA' }}>
      <StyledPrivacyWrapper>
        <Privacy />
      </StyledPrivacyWrapper>
    </div>
  );
};

export default PrivacyWrapper;

Język i kolorowanie składni mogę dobierać wpisaniem nazwy języka w jedną komórkę, np. Python:

num1 = 15
num2 = 12
  
# Adding two nos
sum = num1 + num2 
  
# printing values
print("Sum of {0} and {1} is {2}" .format(num1, num2, sum)) 

Dodałem także wrapper do poleceń w CLI, np.:

npx create-react-app reactywny.pl

Sam widzisz jak takie rozwiązanie jest wspaniałe. Wygodne i nowatorskie. Jak już dodam nowy post w DatoCMS, wystarczy, że kliknę w serwisie hostingowym nowy deploy, który na nowo wyrenderuje całą stronę. A co do deployu.

Netlify hostingiem strony

Czy komuś muszę przedstawiać tak wspaniały serwis hostingowy jakim jest Netlify? Nowatorskie rozwiązania hostingowe oraz ultra łatwy i intuicyjny interfejs sprawia, że na ten moment jest to dla mnie hosting nr 1. Poza tym korzystam z niego w pełni za darmo. Może się to zmienić z biegiem czasu, wraz z zyskiwaniem popularności tego bloga. Netlify posiada całkiem wysokie limity, jak dla darmowych klientów. Proces serwowania bloga w świat wygląda tak, że podpiąłem repozytorium z githuba do Netlify i Netlify, w momencie kiedy wykryje zmiany w repo na masterze, sam wykonuje komendę build u siebie w plikach i przekazuje odpowiedni folder ze zbudowanymi już statycznymi plikami, które wyrenderował Gatsby. Zaciąganie z githuba sprawdza się jednak tylko, kiedy chcę wprowadzić zmianę na stronie. A co w wypadku kiedy dodaję nowego posta? Wtedy jednym kliknięciem, w ustawieniach hostingu klikam 'Redeploy`, czekam chwilę i strona z nową zawartością zaktualizowana. Czy to nie wspaniałe?

Dzięki Netlify korzystam także z formularza kontaktowego na stronie, który fetchuje dane z formularza przesyła je jako submission. Daną wiadomość możemy zintegrować ze Slackiem, wysłać powiadomienie mailem, czy też zintegrować z osobną aplikacją i przesłać postem. Nazywa się to Netlify Forms i polecam sprawdzić temat.

Pozostałe zależności

Na blogu wykorzystuję również takie narzędzia jak: Mailchimp do mailingu (newsletter), Namecheap do hostingu mailowego i poczty, a domenę trzymam na naszym polskim home. W dodatku, dzięki przydatnym pluginom w Gatsbym (a tych jest naprawdę sporo) w momencie budowania aplikacji, wszystkie sprawy SEO są załatwiane automatycznie i bez jakiegokolwiek wkładu własnego. Wszystkie meta tagi i open graphy są dodawane do każdego nowego wpisu, co mam nadzieję, w przyszłości zaowocuje dobrym indeksowaniem strony i jej blogpostów. Ponadto tworzy się zaktualizowany kanał RSS oraz sitemapa.

Zależności jest więc sporo, ale i tak myślę że są to lepsze rozwiązania niż klasyczny CMS, w którym instalujemy masę wtyczek na start i nie mamy swobody ich szczegółowej konfiguracji. A w Gatsbym? W Gatsbym jest wszystko piękne i możemy dostosować wszystko do własnych potrzeb. Nie ogranicza nas również w żaden sposób wartstwa wizualna ani logiczna. Nie ogranicza nas baza danych ani backend. Oczywiście, jeśli tylko chcemy, możemy dodać backend do naszej statycznej aplikacji. Istotną różnicą dla tych aplikacji do aplikacji reactowych, jest to, że w statycznym folderze produkcyjnym, takim jak Gatsby wszystkie pliki musimy mieć fizycznie stworzone i umieszczone na hostingu. Ale o tym kiedy indziej. W przyszłości nie zamierzam spoczywać na laurach i wciąz będę rozwijać bloga - nie tylko dodając nowe posty, ale wprowadzając nowe funkcjonalności.

© Damian Kalka 2021
Wszelkie prawa zastrzeżone