Najprostszy sposób na stworzenie www

Jeżeli nie śledzicie internetowych nowinek technologicznych, być może nadal sądzicie, że aby postawić dostępną publicznie witrynę internetową, trzeba wynająć serwer, samodzielnie go utrzymywać, bilansować jego obciążenie, zabezpieczać przed atakami, przesyłać pliki przez klienta FTP itd.

Jednak te czasy dawno minęły, a wraz z nadejściem „bezserwerowych” pakietów startowych można zapomnieć o tych wszystkich uciążliwościach, z którymi trzeba było się borykać jeszcze kilka lat temu.

Dziś wystarczy napisać kod, śledzić go przez gita, mieć gdzieś w sieci repozytorium, a cała reszta odbywa się automatycznie. W tym artykule wyjaśnię, jak to zrobić, i powiem o kilku dodatkowych udogodnieniach  

Podstawy

HTML Aby napisać stronę internetową, trzeba znać język HTML. Nie za bardzo da się to obejść. Na szczęście ten „język” jest bardzo prosty i jeśli zna się podstawy programowania, można się go łatwo nauczyć, po prostu oglądając witrynę, która nam się podoba, i dostosowując kod wedle naszego upodobania.  

CSS Korzystając wyłącznie z HTML-a, uzyskamy witrynę o dość surowym wyglądzie. Tu pojawia się język CSS – używamy go, aby wszystko wyglądało przyjaźnie dla naszego oka i dobrze działało na ekranie. To bodaj najdynamiczniej zmieniający się obszar Internetu; obsługa opcji stylów ulega ostatnio bardzo częstym zmianom (i dobrze!). Oznacza to także, że jeśli chcecie wiedzieć na ten temat wszystko, musicie się ciągle uczyć i dużo czytać.

Jednak do postawienia podstawowej witryny internetowej nie jest to w ogóle konieczne – po opanowaniu funkcji grid i flex będziecie w stanie tworzyć łatwe do utrzymania na każdym urządzeniu układy stron, jakie tylko sobie wymarzycie (pod żadnym pozorem nie używajcie jednak funkcji „float”).  

Odmiany stylów

Największą bolączką osób pracujących w języku CSS jest to, że jest on bardzo obszerny, trudno też ponownie wykorzystać raz napisany kod. Dostępne są jednak rozmaite warianty, na przykład SCSS czy TailwindCSS. Język SCSS korzysta ze składni normalnego CSS, jednak programista ma do wyboru wiele udogodnień.

Tailwind wymaga zupełnie innego podejścia; cały obszar stylów zostaje przeniesiony do języka HTML za pośrednictwem klas. To najprostszy sposób pisania kodu i, dzięki rozbudowanym możliwościom optymalizacji, nie wiąże się on z utworzeniem olbrzymiego pliku zawierającego wszystkie style – plik zawiera jedynie te style, których użyto w projekcie, i są one automatycznie pomniejszane!  

Interaktywność

Aby stworzyć stronę interaktywną, potrzebujemy JavaScriptu. Jeżeli czujecie zew przygody, ze wszech miar warto się go nauczyć, jednak do stworzenia prostej witryny do portfolio albo dla restauracji z menu i zdjęciami wystarczą HTML i CSS. Częstą radą jest, by unikać JavaScriptu, jeżeli to tylko możliwe, i trzymać się tego, co mają do zaoferowania HTML i CSS, a – wbrew obiegowej opinii – mają do zaoferowania sporo.  

Tworzenie witryny internetowej

Od czego zacząć?

Jak już wspomniano, do postawienia ładnej witryny wystarczą HTML i CSS. Problem polega na tym, że w przypadku poważnego projektu może się to wiązać z olbrzymimi, trudnymi do utrzymania plikami i fragmentami kodu, które trudno ponownie wykorzystać. I tu na scenę wkracza platforma A.

Oferuje bardzo prostą otokę (ang. wrapper) dla kodu HTML i CSS, dając przy tym inne supermoce, takie jak możliwość korzystania z komponentów, tworzenie aplikacji i pomniejszanie ich oraz integracja z usługami wdrożeniowymi. Umożliwia on również pisanie witryny w języku Markdown, który następnie jest konwertowany do języka HTML.

Jest to przydatne, gdy prowadzimy bloga i po prostu nie chcemy sobie zawracać głowy pisaniem kodu HTML do naszego dokumentu – chcemy po prostu tworzyć treści, a całą nudną otoczką niech zajmie się kod.  

Pisanie pierwszego kodu

Aby zacząć korzystać z platformy Astro, wystarczy zapoznać się z krótkim s i rozpocząć nowy projekt na komputerze. Pamiętajcie, że wymaga to uprzedniej instalacji środowiska N.

Podczas konfiguracji projektu można wybrać dowolny szablon. Zaczynając od zera, warto wybrać szablon pusty, aby uniknąć zamieszania z dodatkowymi plikami. Wyświetlone zostanie też pytanie o użycie wtyczki TypeScript. Nie powinno to mieć znaczenia, chyba że przy swojej witrynie zamierzacie dłubać w JavaScripcie; wówczas będziecie musieli sobie z tym poradzić sami – powodzenia!

Jeżeli zamierzacie dołączyć Tailwind do swojego projektu, możecie skorzystać z samouczka d.

Więcej o korzystaniu ze środowiska Astro można się dowiedzieć z dokumentacji, z którą zdecydowanie warto się zapoznać. W skrócie każdy plik .astro w katalogu stron będzie stroną witryny, a łącze do niego jest takie, jak jego lokalizacja w folderze. Każdy plik .astro w katalogu komponentów będzie dostępny z możliwością jego zaimportowania do tych stron i użycia dowolną liczbę razy.

Jest wiele innych katalogów pełniących odrębne funkcje, jak na przykład katalogi układów strony lub folderów statycznych; więcej informacji można znaleźć w dokumentacji. W plikach .astro można pisać kod w starym, dobrym HTML-u z użyciem CSS. Oznacza to, że nic, co dotyczy waszej witryny, nie wymaga dotykania JS, dzięki czemu możecie się skupić na meritum.  

Git

Kolejnym krokiem, istotnym także ze względu na dobrą praktykę, jest śledzenie kodu w systemie Git. Platforma Astro sama utworzy repozytorium, jednak konieczne będzie samodzielne przesyłanie kodu do serwisu, np. Github albo Gitlab.

Stworzono na ten temat mnóstwo samouczków, ale nie chodzi tu o żadne fajerwerki – potrzebna jest możliwość wypychania (ang. push) kodu do folderu „Main” i nic więcej; nie musicie używać gałęzi (ang. branch) – podstawowe gitowe polecenia zdecydowanie wystarczą.

Po utworzeniu strony, wypełnieniu jej kodem, zatwierdzeniu (ang. commit) i wypchnięciu do githuba, możemy zacząć pokazywać wszystkim nasze dzieło i rozpocząć wdrożenie.  

Wdrożenie

Wdrożenie zwykle wiązało się z uruchomieniem jakiegoś komputera pracującego non-stop, zarządzaniem nim, ręcznym przesłaniem na niego plików itp. Szczerze mówiąc, nic się nie zmieniło – po prostu teraz są serwisy, które robią to za nas! Wybór jest ogromny, ale ja najczęściej korzystam z N. Korzystanie z tego serwisu wymaga rejestracji. Zalecam zarejestrowanie się przez usługę Git, z której już korzystacie – w moim przypadku jest to Github – pozwoli to na podłączenie serwisu do naszych repozytoriów.

Po zalogowaniu i upoważnieniu Netlify do odczytu naszych repozytoriów na Githubie wystarczy kliknąć przycisk „Add new website” (Dodaj nową witrynę), wybrać opcję „Import an existing project” (Importuj istniejący projekt), aby wyświetlić listę wszystkich repozytoriów. Po wybraniu przesłanego właśnie repozytorium Netlify powinno wykryć całą resztę automatycznie. Wówczas nie pozostaje nam już nic innego, jak tylko kliknąć przycisk wdrożenia.

Netlify prześle naszą witrynę na swoje serwery, nada losowy adres URL (który możemy zmienić, jeżeli mamy własną domenę) i włączy usługę nasłuchującą zmian w repozytorium, dzięki czemu każda aktualizacja witryny będzie automatycznie widoczna.