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 i powiązane z nimi meta-frameworki (Nuxt.js i Next.js).

Zarówno Diango, 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 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 od internetu.

W konfiguracji Content Collections można zdefiniować, jakie metadane powinien mieć każdy artykuł blogowy i Astro podczas wtedy sprawdza, czy jakiś danych nie brakuje. Taka walidacja mi zdecydowanie wystarcza i nie potrzebuję mieć żadnego skomplikowanego CMSa (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 już napisze kiedy indziej.

Sitemapa, RSS i og-canvas

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

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

Hostowanie strony

Powyżej masz krótki opis na temat samego tworzenia strony, ale drugą kwestią jest hostowanie tej strony. Można korzystać z platform takich, jak Netlify albo Vercel, ale osobiście nie lubię się wiązać z konkretnym firmami. Wolę korzystać z własnego serwera.

Serwer

Mam wykupiony serwer VPS z zainstalowanym Dockerem, a na Dockerze mam postawionego Caprover’a. To świetne rozwiązanie, które pozwala instalować wiele aplikacji dockerowych za pomocą 1-kliknięcia. Korzystam sobie z niego do testowania różnych rozwiązań i stawiania testowych baz danych do hobbystycznych projektów. Jest też bardzo wygodne do hostowania własnych stron i aplikacji.

Konfiguracja Astro

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

Deployment

Caprover ma wiele możliwości deploymentu appek, ja na razie korzystam z najprostszego, czyli z odpalania dpeloymentu za pomocą narzędzia terminalowego Caprover. Wystarczy wysłać kod na Github i dać znać serwerowi, żeby zbudował nową wersję aplikacji.

Oczywiście docelowe skonfiguruję automatyczny deployment aplikacji przy pomocy Github Actions, ale na razie ten najprostszy sposób mi w zupełności wystarcza.

Analityka

Staram się zbytnio nie pomagać wielkim koncernom w śledzeniu moich czytelników, więc nie decyduję się na używanie Google Analytics, Facebook Pixela i innych tego typu dziwnych rozwiązań.

Wiadomo, że z czasem mogę na tym źle wyjść, bo będzie mi trudniej dotrzeć do nowych osób, ale nie mam z tym problemu. Liczę, że jeśli lubisz moje materiały to udostępnisz je dalej ;) To wszystko nie oznacza jednak, że w ogóle nie stosuję analityki. Są różne świetne rozwiązania, które pozwalają włączyć taką usługę na własnym serwerze.

Ja korzystam z Umami Analytics. To super prosta platforma, ale dająca mi wszystkie potrzebne informacje o wizytach. Nie jestem w stanie rozpoznać konkretnych numerów IP i “powracających użytkowników”, więc nie mam pojęcia, czy jesteś nowym użytkownikiem platformy, czy trafiasz tu po raz kolejny. Wystarczą mi inne statystyki.

Na przykład widzę bez problemu czy ktoś obecnie czyta stronę. Mogę też bardzo łatwo oznaczać konkretne elementy HTML do śledzenia eventów. Tworzenie “lejków” też nie jest zbytnim problemem. Ja zyskuję dane, a Ty zyskujesz prywatność i duże koncerny nie dostają Twoich danych.

Podsumowanie

Mam nadzieję, że część z opisanych przeze mnie rzeczy jest dla Ciebie nowa i przyda Ci się w Twoich projektach. Na pewno w raz z rozwojem strony będę testował nowe rozwiązania i wybierał te najciekawsze i najbardziej przydatne.

Lada dzień uruchomię na tej stronie Dev Loga, w którym będę opisywał moje przygody z programowaniem. Chcę jednak, że był on trochę z boku i nie “zaśmiecał” głownego bloga, który ma być głównie o User Experience. Polecam Ci zapisanie się do mojego newslettera, gdzie na pewno dam znać o jego uruchomieniu! Znajdziesz go na UXTygodnik.pl.