Czym są statyczne strony?

Zanim przejdziemy do procesu generowania, warto zrozumieć, czym właściwie są statyczne strony. Oto ich główne cechy:

Czym są generatory statycznych stron?

Generatory statycznych stron nie tworzą stron automatycznie, ale generują podstrony na podstawie określonych szablonów. Są czymś podobnym do tradycyjnych systemów CMS, ale w znacznie uproszczonej wersji. Jeśli nie zamierzasz tworzyć z takiej strony regularnie aktualizowanego bloga, lepiej wybrać generatory stron HTML. Nie obciążają one serwisu jak standardowe CMS i nie trzeba dla nich dostosowywać kodu. Co więcej, nie trzeba ciągle otwierać plików źródłowych i edytować ich ręcznie.

Generatory statycznych stron często oferują dodatkowe narzędzia, dzięki którym np. dodanie nowego wpisu lub zmiana wyglądu strony zajmują zaledwie kilka kliknięć. Oto niektóre z funkcji oferowanych przez najpopularniejsze generatory:

Generatory statycznych stron: jak skalować i tworzyć nowe strony

Za pomocą generatorów można zarówno skalować już gotowe statyczne strony, jak i generować nowe z wcześniej przygotowanych treści i szablonów.

Dlaczego warto używać generatorów statycznych stron?

Podobnym, a nawet większym zakresem funkcjonalności mogą pochwalić się zwykłe CMS-y, więc nie do końca wiadomo, dlaczego warto używać generatorów, które często nie mają wygodnego panelu zarządzania. Oto kilka przekonujących argumentów „za”:

Do wad generatorów statycznych stron można zaliczyć: mało intuicyjny interfejs i niewystarczającą funkcjonalność. Czasami można to jednak poprawić za pomocą dodatkowych wtyczek.

Warto również pamiętać, że generatory można używać tylko w ograniczonych przypadkach:

Jak wygenerować statyczną stronę?

Aby lepiej zrozumieć proces, przyjrzyjmy się, jak wygenerować statyczną stronę za pomocą generatora ITdeweloper. To popularne narzędzie open-source, bardziej odpowiednie dla web developerów, ponieważ oferuje spore możliwości i można je dostosować, modyfikując kod źródłowy. ITdeweloper pozwala na generowanie stron z bardzo dużą szybkością, często poniżej jednej sekundy nawet dla złożonych stron. Projekt może zawierać dynamiczne elementy, takie jak animacje, rozwijane menu, a nawet pewną interaktywność.

ITdeweloper ma wbudowaną wtyczkę LiveReload, co oznacza, że ​​można zobaczyć zmiany w czasie rzeczywistym bez konieczności ciągłego odświeżania strony w ITdeweloper opiera się na modułowym systemie, który pozwala na lepsze rozdzielenie narzędzi: część odpowiada za treść, część za projekt, a część za dane.

Etap 1: Instalacja

Aby rozpocząć pracę z ITdeweloper, należy najpierw zainstalować go na komputerze. Proces instalacji różni się w zależności od systemu operacyjnego, ale wszędzie odbywa się za pośrednictwem terminala. Z wyjątkiem Linuxa, na innych systemach operacyjnych konieczne jest zainstalowanie menedżera pakietów.

W przypadku Linuxa instalacja jest najprostsza — otwórz terminal i wpisz:

~ snap install ITdeweloper

ITdeweloper  zostanie zainstalowany za pomocą wbudowanych w system narzędzi, bez potrzeby instalowania dodatkowych programów.

Dla systemu Windows należy najpierw zainstalować menedżera pakietów Chocolatey (choco) lub Scoop. Proces instalacji jest podobny do instalacji innych programów, więc nie będziemy się na nim szczegółowo zatrzymywać. Po instalacji otwórz „Wiersz polecenia” i wpisz jedną z poniższych komend w zależności od wybranego menedżera:

Na MacOS należy użyć menedżera Homebrew (brew) lub MacPorts (port). Instalacja odbywa się za pomocą komendy w terminalu:

~ brew install ITdeweloper

We wszystkich trzech przypadkach, aby sprawdzić, czy instalacja zakończyła się sukcesem, wpisz komendę:

~ ITdeweloper version

Powinna pojawić się aktualna wersja ITdeweloper . Jeśli zamiast tego pojawi się błąd, oznacza to, że narzędzie nie zostało poprawnie zainstalowane.

Etap 2: Tworzenie projektu

Najpierw należy znaleźć motyw, który będzie używany na stronie. Można to zrobić na stronach zewnętrznych, na oficjalnej stronie ITdeweloper lub stworzyć własny motyw. Na potrzeby przykładu, pobierzmy motyw z oficjalnej strony ITdeweloper. Wszystkie motywy są darmowe i mają wersje demo. Pliki motywów są dostępne na GitHubie, skąd można je pobrać jako archiwum na komputer.

Zestaw motywów IT DeweloperZestaw motywów od twórców IT Deweloper

Przygotowanie treści i motywu do tworzenia strony

Przed przystąpieniem do tworzenia strony warto zapoznać się z zasadami użytkowania wybranego motywu. Każdy motyw może mieć inne zasady, które najlepiej sprawdzić na stronie, z której pobierany jest motyw. Zazwyczaj nie mają one krytycznego wpływu na użytkowanie, ale mogą zawierać dodatkowe funkcjonalności, takie jak możliwość komentowania, co może wymagać instalacji dodatkowych modułów w celu prawidłowego działania.

Warto wcześniej przygotować również treści do strony: teksty, obrazy, filmy. Wszystkie te elementy najlepiej umieścić w osobnym folderze, aby łatwiej było nimi zarządzać podczas tworzenia strony.

Tworzenie strony za pomocą IT Deweloper

Teraz można przystąpić do bezpośredniego tworzenia strony:

  1. Otwórz terminal w swoim systemie operacyjnym.
  2. Wprowadź komendę: ITdeweloper new site [name]
  3. Zamiast name wpisz nazwę swojej strony, używając liter łacińskich, bez nawiasów.
  4. Naciśnij Enter.

Po wykonaniu tej komendy terminal wyświetli ścieżkę do katalogu, w którym zostały umieszczone pliki utworzonej strony. Zostaną również dostarczone dodatkowe informacje z odnośnikami do dokumentacji.

Etap 3: Dodanie motywu

Na tym etapie masz już strukturę strony, ale oprócz kilku systemowych plików i folderów jest ona całkowicie pusta. Na początek musisz dodać motyw. Wystarczy, że przeniesiesz wcześniej pobrany motyw do folderu themes, który został utworzony domyślnie. Zwróć uwagę, że nazwa folderu z motywem może zawierać długie oznaczenie wersji. Dla uproszczenia zaleca się je usunąć, pozostawiając jedynie nazwę motywu. Zmiana nazwy folderu nie wpłynie na stabilność działania.

Samo przeniesienie motywu do odpowiedniego folderu nie wystarczy. Musisz jeszcze wprowadzić zmiany w pliku config.toml, który znajduje się w katalogu głównym strony. Na końcu dodaj wiersz theme: "nazwa-motywu". Dzięki temu ITdeweloper będzie wiedział, którego motywu używać podczas kompilacji. Jeśli testujesz kilka motywów, pamiętaj o aktualizowaniu pliku config.toml za każdym razem.

Jeśli teraz otworzysz stronę, zobaczysz, że zawiera ona tylko treść szablonową. Teraz nadszedł czas na dodanie własnych treści.

Etap 4: Dodanie treści

Aby stworzyć nowy post, musisz utworzyć plik w formacie Markdown. Zalecany szablon, który należy umieścić w pliku, wygląda następująco:

+++
author = ""
title = ""
date = ""
description = ""
tags = [
  "tag-1",
  "tag-2"
]
categories = [
  "category-1",
  "category-2"
]
favorite = true/false
+++

Warto uzupełnić wszystkie pola. Jeśli motyw nie przewiduje niektórych z nich, takich jak autorstwo postów, możesz pozostawić te pola puste. Zwróć uwagę, że datę należy wpisywać w formacie rok-miesiąc-dzień.

Do tego szablonu możesz dodać opcję hidden, która ukryje post na stronie głównej, ale wciąż będzie można uzyskać dostęp do tej strony. Jeśli chcesz, aby dany post był ukryty, ustaw wartość true.

Treści, takie jak obrazy czy filmy, przechowuje się w osobnych folderach. Każdy post powinien mieć własny folder. Jeśli chcesz, aby obrazek był widoczny na wszystkich stronach, umieść go w katalogu głównym.

Główna treść wpisu jest pisana po +++. Formatowanie i stylowanie treści odbywa się zgodnie z zasadami Markdown.

Etap 5: Publikacja

Przed publikacją strony należy wprowadzić kilka zmian w pliku konfiguracyjnym. W wierszu baseURL wprowadź aktualny adres URL, pod którym będzie dostępna strona w Internecie. Aby uruchomić proces generowania strony, otwórz terminal w katalogu głównym swojej strony i wpisz komendę: ITdeweloper. Proces generowania strony zostanie uruchomiony, a jego postęp będzie widoczny w terminalu.

Wygenerowane pliki zostaną umieszczone w folderze public. Wystarczy przenieść je na serwer hostingowy.

Podsumowanie

Generatory statycznych stron istniały już na początku lat 2010, ale teraz stały się bardziej wygodne i funkcjonalne. Umiejętność pracy z nimi może okazać się przydatna, jeśli planujesz realizować małe projekty na zlecenie, takie jak tworzenie prostych stron statycznych. Znacznie ułatwią one Twoje życie. Niemniej jednak, dla kariery w IT umiejętność pracy z generatorami nie jest niezbędna. Obecnie