Próbowałem odbudować swoją ręcznie kodowaną stronę internetową za pomocą Astro - oto co zadziałało, a co nie

Odkryj, jak wykorzystać framework Astro do odświeżenia swojej strony internetowej, łącząc nowoczesne technologie z osobistymi projektami artystycznymi i interaktywnymi elementami.

Prowadzę małą stronę internetową na Neocities – Whistling Nose Games, Music, and Multimedia. W zeszłym roku, podczas przerwy, spędziłem kilka miesięcy na ponownym nauczeniu się projektowania stron, CSS, JavaScript oraz tworzeniu absurdalnych gier i muzyki. Chcę odświeżyć ten nostalgiczny projekt. Przyjaciel z imponującymi umiejętnościami projektowymi polecił mi Astro, żeby wspomóc ten redesign. Spróbowałem i poszło całkiem nieźle.

Astro jest frameworkiem webowym dla statycznych stron

Wielu rzeczy dzieje się pod maską

Astro, chwalony jako "framework dla stron opartych na treści", jest frameworkiem JavaScript. W praktyce oznacza to, że ułatwia tworzenie bogatych w treści, statycznych stron, oddzielając interaktywne komponenty od samej treści.

Transformuje wszystkie elementy Twojej strony (komponenty, szablony, pliki Markdown) na HTML i CSS po stronie serwera, unikając obciążania przeglądarki użytkownika. Obserwowanie tego procesu w czasie rzeczywistym jest fascynujące. Używa systemu routingu opartego na plikach, generując adresy URL na podstawie struktury plików, z mnóstwem pracy wykonaną w tle.

Funkcjonalności są bogate; użytkownicy są prowadzeni przez proces budowy swojej pierwszej strony. Wspiera też integracje z AI (np. Claude CLI integration, choć jeszcze nie testowałem tego w moim projekcie).

Zanim zanurzysz się w proces, skorzystaj z kursów Astro. Ja się nimi posiłkowałem przed budowaniem strony, co naprawdę mi pomogło.

Używam Astro do testowego wykonania aktualizacji strony

Test jednostronicowy może pomóc w nakreśleniu nowego kierunku strony

Aktualizacja osobistej strony umiejscowiona jest w cieniu innych zadań. Odkryłem, że licznik odwiedzin nie działa, a strona główna wydaje się zbyt skromna w stosunku do bogatej zawartości.

Dodatkowo, stworzyłem wirtualną wystawę muzealną dla żony na rocznicę i chciałem ją dodać do strony do końca miesiąca. Projekt został ukończony i dodany jako "sekretny link", ale dostrzegłem, że strona potrzebuje więcej szlifowania. Otrzymałem też sygnał od odwiedzającego o uszkodzonym kodzie.

Mam nadzieję, że Astro mi w tym pomoże.

Jednym z pomysłów na stronę był głupi listicle, który nikt na poważnie nie potraktowałby. Zakres eksperymentu z Astro obejmuje budowę tej konkretnej strony i testowanie jej przed dodaniem do Neocities.

Instalacja zachodzi wewnątrz linii poleceń

Lub możesz użyć wersji online oprogramowania

Aby zainstalować Astro na Linuksie, najpierw będziesz musiał <aZainstaluj Node.js. Użyj node -v i npm -v, by zweryfikować instalację. Jeśli brakuje, zainstalujesz to poleceniem sudo apt install npm na Linux Mint Cinnamon. Możesz też pobrać Node.js odpowiednią wersję przy pomocy curl.</a

Instalacja i dodawanie modułów do Astro odbywa się w terminalu. Po zainstalowaniu, Astro tworzy katalog projektu, gdzie możesz dodawać.

Zależności i frameworki — wszystko szczegółowo opisane na ich stronie. Użyłem npx astro add alpinjs, aby wprowadzić Alpine.js do mojego projektu. Ten framework to mój ulubiony sposób na odbudowę licznika odwiedzin.

Astro ma też wersję do użytku w przeglądarce, jeśli wolisz tę opcję.

Dokładnie zaplanowałem projekt przed ładowaniem Astro

Przygotowanie jest kluczem

Treść strony już istnieje. Teraz skupiam się na designie i funkcjonalności. Dodam interaktywny element — przycisk do obniżania oceny (bo podnoszenie oceny wydaje się mniej zabawne). Pragnę uzyskać klimat późnych lat 80-tych, z telewizyjnym szumem i delikatnie stonowanymi kolorami.

Ramki w odcieniach szarości, tło w sepii, może trochę szumu telewizyjnego — ale nie za bardzo rozpraszającego. Wyblakła zieleń dla tekstu. Nagłówki w fiolecie lub magencie, by lepiej pasowały do klimatu. Wyróżnienia w odcieniu bursztynu. Zajmę się również ciekawymi rozwiązaniami w nagłówkach.

Dzięki Astro mam moc do realizacji tego wszystkiego i jeszcze więcej.

Gdy zacząłem, budowa poszła błyskawicznie

Strona WWW w połowie czasu

Instalacja Astro skutkuje czterema folderami w katalogu src. Znajdziesz tam:

1. Assety
2. Komponenty
3. Układy
4. Strony

Folder Assety — dla obrazów i czcionek. Komponenty — dla elementów wielokrotnego użytku (przyciski, nawigacja). Układy i Strony — CSS oraz zawartość.

Pierwszy artykuł napisałem w styczniu. Przekonwertowałem go na Markdown i wprowadziłem poprawki. Plik MD zapisałem w Micro w terminalu. Astro bazuje na nazwie pliku, a nie na typie — nie trzeba zapisywać jako HTML.

Stworzyłem elementy CSS w folderze Układy oraz prosty przycisk JavaScript przekształcający szkielety ASCII z ASCII Art Archive. Przekonwertowałem też komiksowe obrazki do skali szarości, by lepiej wpasowały się w estetykę. Wrzuciłem je do folderu Strony, aby łatwiej było je testować razem z plikiem Markdown. Później przeniosę je do Assety.

Edycja jest intuicyjna. Zmiany w czasie rzeczywistym. Otworzyłem Micro w jednym oknie, w drugim monitorowałem stronę, śledząc wszystko na bieżąco. To zaoszczędziło mi sporo czasu na rozwiązywaniu problemów.

By sprawdzić kod, uruchamiasz npm run dev. Po wykonaniu, zawartość się składa. Otwierasz lokalne okno w przeglądarce i od razu widzisz, jak wygląda twoja strona. Jeśli są poprawki, wracasz do plików src, edytujesz, a potem obserwujesz odświeżanie.

Moja strona to wynik sporych wysiłków i licznych poprawek. W końcu jednak zyskałem satysfakcjonujący efekt, który trafi na stronę.

Niektóre rzeczy działają dobrze w Astro, podczas gdy inne wymagają dopracowania

Zawsze jest miejsce na polepszenie

Astro sprawdza się w integracji; każdy dokument współdziała, tworząc spójną stronę. Ale jeśli planujesz prostą witrynę z obrazkami, tekstem, CSS i odrobiną JavaScript, ręczne kodowanie może okazać się prostsze.

Astro uderza w swojego rodzaju desktopowe podejście. Na Linux Mint wszystko działało płynnie, lecz napotkałem problemy z wersją online na Androidzie. Mimo że to nie koniec świata, warto o tym pamiętać, gdybyś chciał spróbować na smartfonie.

Fajnie, że nie muszę zmagać się z kodem zawiłego dokumentu; Astro zamienia moje teksty Markdown na pełen HTML. Dzięki temu oszczędzam mnóstwo czasu w porównaniu do ręcznego kodowania. To unikalna droga do szybszego budowania stron, gdy już wiesz, o co chodzi.

Astro nie jest dla zapalonych nowicjuszy. Mam przyzwoitą wiedzę z HTML, Markdown i CSS (przyznaję, JavaScript trochę zardzewiał, ale potrafię się nim posłużyć), więc rozumiem, co dzieje się „pod maską”. Mimo to, warto przekopać się przez kilka tutoriali, w tym materiały od Astro, żeby sprawniej opanować to oprogramowanie.

Praca z Astro nad moją zaktualizowaną stroną była świetna. Choć potrzebuję jeszcze chwilę, by poczuć się pewniej, już widzę, że będę to narzędzie używać częściej.

A może to mnie zmotywuje do częstszych aktualizacji strony czy dodawania nowych podstron. Jeszcze nie zająłem się przeglądaniem odwiedzin, ale w końcu to zrobię.

Zdecydowanie miło spędziłem czas z tym narzędziem i nie mogę się doczekać, co jeszcze wyczaruję w przyszłości.

Jeśli ciekawią Cię artykuły podobne do Próbowałem odbudować swoją ręcznie kodowaną stronę internetową za pomocą Astro - oto co zadziałało, a co nie, zajrzyj do kategorii Tutoriale i odkryj jeszcze więcej interesujących treści.