W jaki sposób zbudowałem swoją stronę?

Interesuje Cię, w jaki sposób buduję swoją stronę? Poniżej możesz znaleźć wszystkie najpotrzebniejsze informacje.

Framework

W wolnym czasie dużo hobbystycznie programuję i miałem już do czynienia z różnymi technologiami. Na przykład podczas nauki Pythona budowałem strony w Django. Potem testowałem bardzo popularne frameworki JavaScriptowe, czyli Vue i React, oraz powiązane z nimi meta-frameworki (Nuxt.js i Next.js).

Zarówno Django, jak i metaframeworki JavaScriptowe to doskonałe rozwiązania do dużych aplikacji i portali internetowych. Jednak w moim wypadku to byłoby strzelanie z armaty do wróbla. Na szczęście, jakiś czas temu powstało Astro.js i jest idealne do takich projektów jak mój.

Astro.js

To idealny framework do budowania stron contentowych. Można generować strony statyczne, jak i obsługiwać zapytania serwera na backendzie. Jest o wiele prostszy niż popularne metaframeworki zbudowane w React’cie (Next.js) czy Vue (Nuxt) i można stosować w nim po prostu HTML/CSS/JS.

Jeśli masz trochę wiedzy na temat podstawowego budowania stron, to nauka Astro będzie doskonałym krokiem naprzód.

Dla mnie kluczowe w wyborze było kilka funkcji i integracji, które bardzo ułatwiają tworzenie treści i development strony.

Content Collections i MDX

Kolekcje Astro to dla mnie najważniejsza funkcja. Kocham pisać artykuły i notatki za pomocą Markdown. Według mnie to najłatwiejszy i najszybszy sposób pisania artykułów w internecie.

W konfiguracji Content Collections można zdefiniować, jakie metadane powinien mieć każdy artykuł blogowy, a Astro wtedy sprawdza, czy jakichś danych nie brakuje. Taka walidacja mi zdecydowanie wystarcza i nie potrzebuję żadnego skomplikowanego CMS-a (przynajmniej na razie).

Drugim elementem pisania artykułów w Astro jest MDX. Pozwala wplatać interaktywne komponenty bezpośrednio w tekst markdown. W ten prosty sposób można pokazywać ciekawe wykresy, formularze lub działające komponenty UI w swoich artykułach.

Tailwind CSS

Do stylowania strony używam Tailwind CSS. Ma on wielu przeciwników, którzy uważają, że powinno się stosować zwykły CSS, ale według mnie po prostu pracuje się w nim szybciej. Szczególnie, jeśli jest się jedynym programistą w projekcie ;)

Jeśli nie znasz Tailwind, to szybko wytłumaczę Ci, o co w nim chodzi.

CSS

Załóżmy, że chcemy stworzyć prostu button. W czystym CSS tworzymy klasę HTML i do niej tworzymy stylowanie w pliku .css

<button class="btn">Click Me</button>
.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover {
  background-color: darkblue;
}

Tailwind CSS

W Tailwind wystarczy nadać odpowiednie klasy do elementu HTML i nie trzeba tworzyć oddzielnego pliku .css .

<button
  class="px-4 py-2 text-base text-white bg-blue-500 border-0 rounded-md cursor-pointer hover:bg-blue-700"
>
  Click Me
</button>

Na początku może to wyglądać dziwnie, ale z czasem łatwo się do tego przyzwyczaić.

Dodatki do Tailwind

Dwoma bardzo przydatnymi rozszerzeniami do Tailwind są:

Zalet Tailwind jest o wiele, wiele więcej, ale o nich napiszę innym razem.

Sitemapa, RSS i og-canvas

Do Astro istnieje wiele integracji, które można łatwo dodać za pomocą komendy npx astro add *. Dla mnie na początku najważniejsze były:

Są też integracje do wstawiania meta-tagów SEO, ale w zupełności wystarcza mi korzystanie z domyślnych możliwości Astro.

Hostowanie strony

Powyżej opisałem proces tworzenia strony, ale drugą kwestią jest jej hostowanie. Można korzystać z platform takich jak Netlify czy Vercel, ale osobiście nie lubię się wiązać z konkretnymi firmami. Wolę korzystać z własnego serwera.

Serwer

Mam wykupiony serwer VPS z zainstalowanym Dockerem, a na nim działa CapRover. To świetne rozwiązanie, które pozwala instalować wiele aplikacji dockerowych jednym kliknięciem. Używam go do testowania różnych rozwiązań, stawiania testowych baz danych do projektów hobbystycznych oraz hostowania własnych stron i aplikacji.

Konfiguracja Astro

W Astro wystarczy dodać runtime Node.js do projektu, lekko dostosować konfigurację i dodać prosty plik .dockerfile.
Runtime Node.js pozwala obsługiwać różne zapytania “na backendzie”, co na pewno przyda mi się w przyszłości.

Deployment

CapRover oferuje wiele sposobów deploymentu aplikacji, ale na razie korzystam z najprostszego — uruchamiania deploymentu przez terminalowe narzędzie CapRovera. Wystarczy wysłać kod na GitHuba i poinformować serwer, aby zbudował nową wersję aplikacji.

Docelowo skonfiguruję automatyczny deployment przy pomocy GitHub Actions, ale na ten moment obecny sposób w zupełności mi wystarcza.

Analityka

Staram się nie wspierać dużych koncernów w śledzeniu moich czytelników, dlatego nie korzystam z Google Analytics, Facebook Pixela ani innych tego typu rozwiązań.

Oczywiście zdaję sobie sprawę, że może mi to utrudnić dotarcie do nowych osób, ale nie mam z tym problemu. Liczę, że jeśli lubisz moje materiały, to po prostu je udostępnisz ;)
To jednak nie oznacza, że całkowicie rezygnuję z analityki — korzystam z rozwiązań, które mogę uruchomić na własnym serwerze.

Wybrałem Umami Analytics. To bardzo prosta platforma, która dostarcza mi wszystkich niezbędnych informacji o wizytach. Nie gromadzę żadnych danych osobistych, nie rozpoznaję adresów IP ani użytkowników powracających, więc nie mam pojęcia, czy jesteś tu pierwszy raz, czy kolejny. Wystarczą mi ogólne statystyki.

Na przykład mogę zobaczyć, czy ktoś aktualnie czyta stronę, oraz łatwo oznaczać konkretne elementy HTML do śledzenia eventów. Tworzenie prostych “lejków” również nie stanowi problemu.
Ja zyskuję dane, Ty zachowujesz prywatność — a wielkie koncerny nie dostają Twoich informacji.

Podsumowanie

Mam nadzieję, że część z opisanych przeze mnie rzeczy była dla Ciebie nowa i przyda Ci się w Twoich projektach. Z czasem będę testował nowe rozwiązania i wybierał te, które uznam za najciekawsze i najbardziej praktyczne.

Zachęcam Cię do zapisania się do mojego newslettera — na pewno dam tam znać o jego uruchomieniu! Znajdziesz go na UXTygodnik.pl.