Wprowadzenie do Generatorów Stron Statycznych

Wprowadzenie do Generatorów Stron Statycznych

Obecnie w sieci możemy znaleźć bardzo wiele różnych Generatorów Stron Statycznych, bez względu na nasze preferencje co do języka programowania.

Lubisz kodować w JavaScript'cie? Najpopularniejsze są Next.js1 i Gatsby2. Może jednak wolisz Go? W takim razie Hugo3 będzie najlepszym wyborem dla Ciebie. Jeśli Twój wybór padł na Ruby, wtedy powinieneś wybrać Jekyll'a4 lub Middleman'a5. Jeśli te opcje to dla Ciebie dalej za mało, możesz sprawdzić całą listę 458 Generatorów Stron Statycznych tutaj6. Bardziej przyjazna wersja listy tutaj7.

Zdecydowanie się na jedną opcję spośród tylu dostępnych może być ciężkim orzechem do zgryzienia. W tym artykule chciałbym przybliżyć Ci cztery najpopularniejsze Generatory Stron Statycznych i pomóc wybrać Ci najbardziej odpowiadający Twoim potrzebom.


Jekyll

Jekyll został stworzony na bazie języka Ruby. Pierwsza wersja dostępna na GitHubie została udostępniona w 2009 roku, czyniąc go najstarszym GSS z całej czwórki. Jest on także silnikiem GitHub Pages co wyjaśnia dlaczego jest najpopularniejszy w tym momencie.

Popularność Jekyll'a na GitHub na przestrzeni czasu:


Największą zaletą Jekyll'a nad innymi GSS jest jego prostota. Nie trzeba wkładać wiele wysiłku by skonfigurować prostą, statyczną stronę z blogiem.


Zalety Jekyll'a 👍🏻:

👍🏻 Prostota

Jest bardzo przyjazny i szybki w konfiguracji. Błyskawicznie wdrażysz też gotową stronę na GitHub Pages.

👍🏻 Duża społeczność

Co oznacza mnóstwo materiałów do nauki, które przybliżą Ci jego obsługę. Bez wątpienia znajdziesz też pomoc członków społeczności w razie napotkanych trudności.

👍🏻 Szablony a'la 'Liquid templates'

Jeśli pracowałeś z systemem szablonów WordPressa, szablony Jekyll'a powinny wyglądać znajomo.


Wady Jekyll'a 👎🏻:

👎🏻 Środowisko Ruby

Instalacja środowiska Ruby może być nieprzyjemnym doświadczeniem, szczególnie dla użytkowników Windowsa, który nie jest oficjalnie wspierany przez Jekyll'a.

👎🏻 Czas budowania strony

Dostępność wtyczek może być zaletą jak i wadą. Jeśli użyjesz ich sporą ilość może to znacząco spowolnić proces budowania.


Hugo

Pierwsza wersja Hugo została opublikowana w drugiej połowie 2014 roku. Jest on napędzany przez język programowania Go, znany także jako GoLang8. Ogólna struktura Hugo jest zbliżona do tej oferowanej przez Jekyll. Należy wspomnieć, że Hugo nie ma sobie równych jeśli chodzi o czas budowania. Według rankingów, może on być o 63 razy szybszy niż Jekyll przy sporej ilości podstron9.

Popularność Hugo na GitHub na przestrzeni czasu:


Zalety Hugo 👍🏻:

👍🏻 Niewiarygodnie szybki

Hugo jest nie do pokonania jeśli chodzi o czas budowania stron internetowych. Osobiście nie znam szybszego GSS niż Hugo, co czyni go świetną opcją przy dużych projektach.

👍🏻 Elastyczny

Nie musisz tracić czasu na szukanie i instalacje wtyczek. W Hugo wiele rzeczy dostajesz na starcie.

👍🏻 Wielo-platformowy

Hugo jest łatwy w użyciu na wielu platformach, takich jak: Windows, Linux, FreeBSD, NetBSD, macOS, and Android for x64, i386 oraz ARM.


Wady Hugo 👎🏻:

👎🏻 GoLang

GoLang zdecydowanie nie jest najpopularniejszym językiem programowania, dlatego na początku możesz mieć trudności z przyswojeniem składni tego języka.

👎🏻 Brak wbudowanego systemu automatyzacji pracy

Hugo nie posiada wbudowanego systemu automatyzacji pracy / procesowania zasobów. Chcąc korzystać z tego typu rzeczy musimy się posiłkować zewnętrznymi narzędziami.


Next.js

Pierwsza wersja Next.js została wypuszczona 26 października 2016, co czyni go najmłodszym przedstawicielem obecnej czwórki. Mimo to jego popularność rosła zdumiewająco szybko. Next.js nie jest do końca Generatorem Stron Statycznych - jest to jedna z opcji jego wykorzystania. Więc czym dokładnie jest Next.js? W skrócie, jest to framework dla renderowanych po stronie serwera lub statycznie eksportowanych JavaScript'owych aplikacji.

Popularność Next.js na GitHub na przestrzeni czasu:


Zalety Next.js 👍🏻:

👍🏻 Poczucie Single Page App

Ponieważ Next zbudowany jest w oparciu o React.js, posiada on wszystkie korzyści tej biblioteki.

👍🏻 Automatyczny code splitting

Strony nigdy nie ładują niepotrzebnego kodu.

👍🏻 Świetne materiały do nauki

Jeśli nie jesteś zaznajomiony z budową Single Page App'ek, możesz szybko zacząć dzięki świetnym materiałom do nauki10.

👍🏻 Możesz przeskoczyć na pełne PWA kiedy chcesz

Jeśli strony statyczne nie spełniają juz Twoich oczekiwań, możesz bardzo łatwo uruchomić server Node.js.


Wady Next.js 👎🏻:

👎🏻 Krzywa uczenia się

W porównaniu do czasu potrzebnego do nauki Jekylla/Hugo, Next.js jest o wiele bardziej wymagający. Jeśli nie korzystałeś wcześniej z React'a, JSX czy JavaScriptu, nauka może Ci pochłonąć dużo czasu.

👎🏻 Czas budowania

Czas budowania potrafi być zaskakująco długi, szczególnie w porównaniu do Hugo.


Gatsby

Gatsby pojawił się 6 października 2015 roku. Wokół niego zgromadziła się jedna z najbardziej aktywnych społeczności pośród wszystkich projektów open-source Generatorów Stron Statycznych - 807 kontrybutorów na chwilę pisania tego artykułu. Czym jest Gatsby w wielkim skrócie? To generator statycznych aplikacji progresywnych (PWA).

Popularność Gatsby'ego na GitHub na przestrzeni czasu:


Zalety Gatsby'ego 👍🏻:

👍🏻 GraphQL w środku

Dane bezpośrednio dostarczane do naszego komponentu - w formie jakiej chcemy. GraphQL jest obecnie popularnym tematem, więcej na jego temat możesz przeczytać tutaj.

👍🏻 Domyślne PWA

Nie musisz wkładać wiele wysiłku by zmienić strone statyczną w dostępną offline aplikację. Skonfigurujesz Gatsby service workers z wielką łatwością. Wystarczy jeden gatsby-plugin.

👍🏻 Rosnący ekosystem wtyczek

Do wyboru masz dziesiątki wtyczek, możesz z łatwością łączyć najpopularniejsze Headless CMSy, Google Analytics, optymizacje zdjęć, service workers i wiele innych!11

👍🏻 Pre-fetchowanie danych i kodu

Strona będzie sprawiała wrażenie SPA, ciągle posiadając korzyści wynikające ze statycznej strony.

👍🏻 Świetna społeczność i materiały do nauki

Jest bardzo łatwo zacząć z Gatsby z tutorialem prowadzącym krok po kroku, dostępnym tutaj12.


Wady Gatsby'ego 👎🏻:

👎🏻 Krzywa uczenia się

JavaScript, React, GraphQL. Sporo do nauki dla osób przechodzących z standardowego środowiska HTML/CSS/JS.

👎🏻 Czas budowania

Porównując do reszty wspomnianych GSS, Gatsby potrzebuje dużo czasu zanim zakończy proces budowania, po odpaleniu komendy "build".



Podsumowanie

Przedstawiłem to, czego nauczyliśmy się do tej pory, używając Generatorów Stron Statycznych w Rzuć Okiem i Bejamas. Pozwól, że podsumuję najważniejsze informacje:

Jeśli szukasz prostoty i niskiego progu wejścia - Jekyll powinien być Twoim wyborem. Jeśli chcesz stworzyć dużą stronę, często zmieniać i dodawać wiele nowych postów? Wybierz Hugo. W innych przypadkach polecam Ci Gatsby albo Next.js.

Dlaczego? Dlatego, że JavaScript aktualnie góruje w świecie web developmentu. Jeśli jesteś nowy w tym temacie i szukasz czegoś co ma sporą społeczność, jest popularne i ma dobrą wizję na przyszłość - powinieneś definitywnie wybrać jeden z dwóch ostatnich frameworków przedstawionych w tym artykule.

Tak czy inaczej, to tylko moje przemyślenia. Co Ty o tym myślisz? Znasz może jeszcze jakieś wady lub zalety, o których nie wspomniałem?



Przypisy

  1. https://nextjs.org/
  2. https://www.gatsbyjs.org/
  3. http://gohugo.io/
  4. https://jekyllrb.com/
  5. https://middlemanapp.com/
  6. https://staticsitegenerators.net/
  7. https://www.staticgen.com/
  8. https://en.wikipedia.org/wiki/Go_(programming_language)
  9. https://forestry.io/blog/hugo-vs-jekyll-benchmark/
  10. https://nextjs.org/learn/
  11. https://www.gatsbyjs.org/plugins/
  12. https://www.gatsbyjs.org/tutorial/

Dobrze zacząć od kawy.

Umów się na spotkanie lub po prostu napisz.

Napisz na:

lub zadzwoń:

coffee