Przegląd popularnych generatorów stron statycznych

Wszystkie generatory stron statycznych mają jedno i pozornie proste zadanie: stworzyć statyczny plik HTML i wszystkie jego zasoby.

Udostępnianie statycznego pliku HTML ma wiele oczywistych korzyści, takich jak łatwiejsze buforowanie, krótsze czasy ładowania i ogólnie bezpieczniejsze środowisko. Każdy generator stron statycznych inaczej generuje dane wyjściowe HTML.

Jednak celem tego postu nie jest zanurzenie się i omówienie zawiłości ich mechanizmu, ale porównanie zestawu funkcji, który oferuje każdy framework i podkreślenie unikalnych aspektów i funkcji każdego frameworka.

Przegląd popularnych ramek stron statycznych

W tym poście przyjrzymy się bliżej następującym statycznym frameworkom stron: Jekyll , Middleman , Hugo i Hexo . To nie są jedyne generatory, ale są to najczęściej używane generatory, wspierane przez duże społeczności i wiele przydatnych zasobów.

Przyjrzyjmy się bliżej każdemu z nich i porównajmy ich podstawowe cechy:

• Jekyll
  • napisany w Ruby,
  • obsługuje silnik szablonów Liquid po wyjęciu z pudełka;
• Pośrednik
  • napisany w Ruby,
  • obsługuje silniki szablonów ERB i Haml po wyjęciu z pudełka;
• Hugo
  • napisane w Go,
  • obsługuje silnik szablonów Go po wyjęciu z pudełka;
• Hekso
  • napisany w JavaScript,
  • obsługuje EJS i Pug po wyjęciu z pudełka.

Uwaga: Warto podkreślić, że każdy z tych generatorów stron statycznych można dostosować i rozszerzyć za pomocą wtyczek i rozszerzeń, co pozwala zaspokoić większość lub wszystkie Twoje potrzeby.

Konfigurowanie generatorów statycznych witryn

Dokumentacja dla każdego z tych frameworków jest obszerna i doskonała i możesz ją pobrać tutaj:

Dokumentacja Jekylla

Dokumentacja pośrednika

Dokumentacja Hugo

Dokumentacja Hexo

Jeśli po prostu zastosujesz się do instrukcji instalacji, środowisko programistyczne powinno być gotowe w ciągu kilku minut. Po zainstalowaniu możesz rozpocząć nowy projekt, uruchamiając polecenia z terminala.

Na przykład w ten sposób rozpoczynasz nowy projekt w różnych frameworkach:

Jekyll

jekyll new my_website

Pośrednik

middleman init my_website

Hugo

hugo new my_website

Hekso

hexo init my_website

Konfiguracja

Konfiguracja jest zwykle przechowywana w jednym pliku. Każdy statyczny generator stron internetowych ma swoją specyfikę, ale wiele ustawień jest takich samych we wszystkich czterech.

Możesz określić, gdzie są przechowywane pliki źródłowe lub gdzie wyprowadzać zbudowane źródła. Zawsze warto pominąć dane, które nie będą używane w procesie budowania, ustawiając opcję exclude lub skip_render . Możesz również użyć pliku konfiguracyjnego do przechowywania ustawień globalnych, takich jak tytuł projektu lub autor.

Migracja do generatora statycznego

Jeśli masz już gotowy projekt Wordpress, możesz go stosunkowo łatwo przenieść do generatora stron statycznych.

W przypadku Jekyll możesz podłączyć wtyczkę Jekyll Exporter. W przypadku Middleman możesz użyć narzędzia wiersza poleceń o nazwie wp2middleman. Możesz użyć Wordpress do Hugo Exporter do migracji Hugo, a dla Hexo możesz przeczytać nasz przewodnik na temat migracji z Wordpress do Hexo, który napisałem w zeszłym roku.

Zasada jest prawie identyczna i dość prosta — najpierw wyeksportuj całą zawartość do odpowiedniego formatu, a następnie umieść ją we właściwym folderze.

Zawartość

Generatory stron statycznych używają języka Markdown do głównej treści. Markdown jest potężny i można się go szybko nauczyć. Pisanie treści w Markdown jest naturalne ze względu na prostą składnię. Dokument wygląda na czysty i uporządkowany.

Artykuły należy umieścić w folderze określonym w globalnym pliku konfiguracyjnym. Nazwy artykułów powinny być zgodne z konwencją określoną przez generator.

W Jekyll powinieneś umieścić artykuł w katalogu _posts . Nazwa artykułu powinna mieć następujący format: ROK-MIESIĄC-DZIEŃ-tytuł.ZNACZNIK. Inne generatory mają podobne reguły i udostępniają polecenie tworzenia nowego artykułu.

Oto polecenia do tworzenia nowego artykułu w Middleman, Hugo i Hexo:

Pośrednik

middleman article my_article

Hugo

hugo new posts/my_article.md

Hekso

hexo new post my_article

W Markdown jesteś ograniczony do określonego zestawu składni. Na szczęście dla nas wszystkie generatory mogą również przetwarzać surowy HTML. Na przykład, jeśli chcesz dodać kotwicę z określoną klasą, możesz dodać ją tak, jak w zwykłym pliku HTML:

This is a text with <a class="my-class" href="#">a link</a> .

Przednia sprawa

Przednia materia to blok danych na górze pliku Markdown. Możesz ustawić zmienne niestandardowe, aby przechowywać dane potrzebne do tworzenia lepszej treści. Zamiast pisać HTML w Markdown, co może prowadzić do bałaganu i brzydkiej struktury dokumentu, możesz zdefiniować zmienną na początku.

Na przykład w ten sposób możesz dodać tagi do swojego artykułu.

 tags: - web - dev - featured

Szablony w statycznych generatorach stron

Generatory stron statycznych używają języka szablonów do przetwarzania szablonów. Aby wstawić dane do szablonu, musisz użyć tagów. Na przykład, aby wyświetlić tytuł strony w Jekyll, możesz napisać:

{{ page.title }}

Spróbujmy wyświetlić listę tagów z frontu w naszym poście w Jekyll. Musisz sprawdzić, czy zmienna jest dostępna. Następnie musisz przejść przez tagi i wyświetlić je na nieuporządkowanej liście.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

Pośrednik:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

Hugo:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

Hekso:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

Uwaga: Dobrą praktyką jest sprawdzenie, czy istnieje zmienna, aby zapobiec niepowodzeniu procesu kompilacji. Zaoszczędzi ci to godzin debugowania i testowania.

Korzystanie ze zmiennych

Generator stron statycznych udostępnia zmienne globalne do obsługi szablonów. Różne typy zmiennych zawierają różne informacje. Na przykład globalna witryna zmienna w Hexo zawiera informacje o postach, stronach, kategoriach i tagach witryny.

Znajomość dostępnych zmiennych i sposobów ich wykorzystania może ułatwić życie programistom. Hugo używa bibliotek szablonów Go do tworzenia szablonów. Praca ze zmiennymi w Hugo może stanowić problem, jeśli nie znasz kontekstu lub „kropki”, jak to nazywają.

Pośrednik nie ma zmiennych globalnych. Możesz jednak włączyć rozszerzenie middleman-blog, które umożliwiłoby dostęp do niektórych zmiennych, takich jak lista artykułów. Jeśli chcesz dodać zmienne globalne, możesz to zrobić, wyodrębniając dane do plików danych.

Pliki danych

Jeśli chcesz przechowywać dane, które nie są dostępne w plikach Markdown, powinieneś użyć plików danych. Na przykład, jeśli chcesz zapisać listę swoich linków społecznościowych, które chcesz wyświetlić w stopce swojej witryny. Wszystkie generatory stron statycznych obsługują pliki YAML i JSON. Dodatkowo Jekyll obsługuje pliki CSV, a Hugo obsługuje pliki TOML.

Przechowujmy te linki społecznościowe w naszym pliku danych. Ponieważ wszystkie generatory obsługują format YAML, zapiszmy dane w pliku social.yml:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll domyślnie przechowuje pliki danych w katalogu _data . Middleman i Hugo używają katalogu danych, a Hexo używa source/_data directory .

Aby wyprowadzić dane, możesz użyć następującego kodu:

Jekyll

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

Pośrednik

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Hugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

Hekso

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

Pomocnicy

Szablony często obsługują filtrowanie danych. Na przykład, jeśli chcesz, aby tytuł był pisany wielkimi literami, możesz to zrobić w ten sposób:

{{ page.title | upcase }}

Pośrednik ma podobną składnię:

<%= current_page.data.title.upcase %>

Hugo używa następującego polecenia:

{{ .Title | upper }}

Hexo ma inną składnię, ale wynik jest taki sam.

<%= page.title.toUpperCase() %>

Jak statyczne generatory stron obsługują zasoby

Zarządzanie zasobami jest obsługiwane inaczej w generatorach stron statycznych. Jekyll kompiluje pliki zasobów, gdziekolwiek są one umieszczone. Middleman obsługuje tylko zasoby przechowywane w folderze źródłowym. Domyślną lokalizacją zasobów w Hugo jest katalog zasobów. Hexo sugeruje umieszczenie zasobów w globalnym katalogu źródłowym.

SASS

Jekyll wspiera Sassa po wyjęciu z pudełka, ale powinieneś przestrzegać kilku zasad. Middleman również wspiera Sassa po wyjęciu z pudełka. Hugo kompiluje Sassa przez Hugo Pipes for Sass. Hexo robi to za pomocą wtyczki.

ES6

Jeśli chcesz korzystać z nowoczesnych funkcji JavaScript w es6, powinieneś zainstalować wtyczkę. Może istnieć więcej niż jedna wersja podobnej wtyczki, więc możesz chcieć sprawdzić kod lub zobaczyć otwarte problemy lub najnowsze zatwierdzenie, aby znaleźć najlepszą.

Zdjęcia

Optymalizacja obrazu również nie jest domyślnie obsługiwana. Podobnie jak wtyczki es6, istnieje więcej niż jedna wtyczka do optymalizacji obrazów. Odrób pracę domową i spróbuj znaleźć najlepszą wtyczkę do pracy. Alternatywnie możesz użyć rozwiązania innej firmy. Na moim blogu opartym na Hexo korzystam z darmowego planu Cloudinary. Opracowałem tag cloudinary i dostarczam responsywne i zoptymalizowane obrazy poprzez transformacje Cloudinary.

Wtyczki, rozszerzenia

Generatory stron statycznych mają potężne biblioteki, które pozwalają dostosować witrynę. Każda wtyczka służy do innego celu. Możesz znaleźć szeroką gamę wtyczek, od LiveReload dla lepszego środowiska programistycznego po generowanie mapy witryny lub kanału RSS.

Możesz napisać nową wtyczkę lub rozszerzenie. Zanim to zrobisz, sprawdź, czy istnieje podobna wtyczka. Zobacz listę wtyczek Jekyll, rozszerzenia Middleman i wtyczki Hexo. Hugo nie ma wtyczek ani rozszerzeń. Obsługuje jednak niestandardowe skróty.

Skróty w przecenach

Skróty to fragmenty kodu, które można umieścić w dokumentach Markdown. Te fragmenty kodu generują kod HTML. Hugo i Hexo obsługują skróty. Są wbudowane skróty, takie jak rysunek w Hugo:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Skrótowy kod Hexo youtube:

{% youtube video_id %}

Jeśli nie możesz znaleźć odpowiedniego shortcode, możesz utworzyć nowy. Na przykład Hexo nie obsługuje osadzania CanIUse i opracowałem nowy tag, który obsługuje osadzanie CanIUse. Nie zapomnij opublikować wtyczki na npm lub oficjalnej stronie generatora. Społeczność będzie Ci wdzięczna, jeśli to zrobisz.

CMS

Generatory stron statycznych mogą być obciążeniem dla osoby nietechnicznej. Nauka korzystania z poleceń lub Markdown nie jest czymś łatwym dla każdego. W takim przypadku użytkownik mógłby skorzystać z systemu zarządzania treścią dla witryn JAMstack. Na tej liście możesz znaleźć system, który najlepiej odpowiada Twoim potrzebom. Wiedz, że konfiguracja CMS zajmuje trochę czasu, ale w dłuższej perspektywie Ty i inni użytkownicy moglibyście skorzystać na wydajniejszym publikowaniu treści.

Bonus: szablony JAMstack

Jeśli nie chcesz spędzać zbyt dużo czasu na konfigurowaniu swojego projektu, możesz skorzystać z szablonów JAMstack. Niektóre z tych szablonów są już wstępnie skonfigurowane z CMS, co może zaoszczędzić dużo czasu.

Możesz również wiele się nauczyć, przeglądając kod. Spróbuj zainstalować szablon, porównaj go z innymi i wybierz najlepszy dla siebie.

Zawijanie

Generatory stron statycznych to szybki i niezawodny sposób na zbudowanie strony internetowej. W dzisiejszych czasach możesz nawet tworzyć nietrywialne i wysoce spersonalizowane strony internetowe za pomocą generatora.

Na przykład Smashing Magazine przeniósł się do JAMstack w zeszłym roku i udało im się znacznie przyspieszyć swoją witrynę. Istnieją inne udane przykłady statycznych witryn internetowych i wszystkie mają tę samą zasadę — tworzenie statycznych zasobów i dostarczanie ich za pośrednictwem sieci dostarczania treści w celu szybszego ładowania i lepszej obsługi użytkownika.

Możesz zrobić o wiele więcej ze swoją statyczną stroną internetową: od używania Wordpress REST API jako backendu do używania funkcji Lambda. Istnieją doskonałe rozwiązania nawet dla prostych stron internetowych, takich jak korzystanie z HTTPS po wyjęciu z pudełka lub obsługa przesyłania formularzy.

Mam nadzieję, że ten przegląd statycznych frameworków stron pomógł Ci wykorzystać ich potencjał i rozważyć użycie ich następnym razem, gdy pomyślisz o nowym projekcie.