Blog / Poradniki

Jak postawić Astro na Saplo (szybka strona z islands)

Astro generuje domyślnie w pełni statyczną stronę i pozwala dorzucić interaktywne komponenty (islands) z Reacta, Vue czy Svelte tylko tam, gdzie naprawdę są potrzebne. Na Saplo stawiasz go jednym kliknięciem z katalogu aplikacji, a wynikowy build trafia prosto pod nginx bez procesu w tle.

Grzegorz Kalmus· ·31 wyświetleń

Astro domyślnie generuje w pełni statyczną stronę - zero bajtów JavaScriptu na starcie - i pozwala wstawiać pojedyncze interaktywne komponenty (islands) z Reacta, Vue czy Svelte dokładnie tam, gdzie interakcja jest naprawdę potrzebna. Reszta strony zostaje czystym HTML-em. Efekt to strony treściowe i blogi, które ładują się błyskawicznie nawet na słabym łączu, bez kompromisu w postaci ciężkiego bundla frameworka na całą stronę. Na Saplo Astro stawiasz jak każdą inną aplikację budowaną statycznie - silnik buduje projekt i wystawia gotowy katalog dist pod nginx.

Dla kogo jest Astro na Saplo

Zanim zaczniesz instalację, sprawdź, czy to dobry wybór dla Twojego projektu:

  • blog albo strona treściowa, która ma być szybka - zero zbędnego JavaScriptu na starcie, treść ładuje się natychmiast,
  • dokumentacja produktu - content collections w Markdown i statyczny build dobrze się do tego nadają,
  • portfolio albo landing z odrobiną interakcji - formularz kontaktowy albo galeria jako pojedyncza wyspa Reacta czy Vue, bez hydratacji całej strony,
  • strona, która dziś jest na WordPressie tylko dlatego, że ktoś potrzebował edytować treść - jeśli edycja idzie przez pliki Markdown w repo, Astro daje tę samą wygodę bez silnika PHP i bazy danych w tle.

Jeśli strona ma być w pełni dynamiczna (dane inne dla każdego zapytania, logowanie użytkowników), sprawdź w katalogu aplikacji stack Node.js zamiast statycznego Astro.

Wymagania

Żeby postawić Astro na Saplo, potrzebujesz:

  • Boxa w dowolnym planie, S wystarczy do startu - wynikiem jest statyczny build bez procesu trzymanego w pamięci,
  • minimum 512 MB wolnego RAM na sam proces builda (Astro ma cięższy toolchain buildowy niż czysty Vite) oraz 3 GB miejsca na dysku,
  • domeny albo subdomeny *.saploapp.pl w cenie każdego planu,
  • repozytorium Git, jeśli chcesz automatycznych wdrożeń (opcjonalne na start, aplikację możesz też wgrać archiwum .zip przez panel).

Instalacja krok po kroku

  1. W panelu Saplo wejdź w Katalog aplikacji i wybierz Astro (kategoria "Strony").
  2. Wskaż Box oraz nazwę aplikacji - z niej powstaje domyślna subdomena <nazwa>.saploapp.pl.
  3. Wybierz wersję Node.js do builda (18, 20 albo 22, domyślnie 20) i zatwierdź instalację.
  4. Silnik scaffolduje minimalny szkielet Astro, instaluje zależności i buduje projekt, a zawartość katalogu dist trafia bezpośrednio do katalogu aplikacji, serwowanego przez nginx.
  5. Po zakończeniu instalacji domena z kroku 2 pokazuje startową stronę Astro - od tego momentu wdrażasz na nią własną treść.

Wdrożenie własnego kodu przez Git

  1. W szczegółach aplikacji znajdź sekcję Git / CI-CD i kliknij "Połącz GitHub", potwierdź instalację aplikacji "Saplo Deploy" i wskaż repozytorium z projektem Astro.
  2. W katalogu głównym repozytorium musi leżeć plik saplo.yaml.
  3. Zacommituj i wypchnij plik saplo.yaml na gałąź produkcyjną (domyślnie main).
  4. Każdy kolejny git push na tę gałąź buduje projekt i podmienia zawartość katalogu dist na Boxie, status widzisz w zakładce Deploymenty.
  5. Domyślnie Astro generuje statyk do dist/ - nginx serwuje go bezpośrednio, bez żadnego procesu w tle na serwerze.

Przykład minimalnego pliku saplo.yaml dla Astro:

name: moj-projekt
stack: astro
build:
  install: npm ci
  command: npm run build
  output: dist

Astro na Saplo kontra alternatywy

WordPress Ręcznie pisany HTML Astro na Saplo
Prędkość ładowania zależy od wtyczek, zwykle wolniej bardzo szybko, ale brak komponentów bardzo szybko + selektywne islands
Edycja treści panel admina, bez kodu ręcznie w plikach pliki .astro / .md w repo, git push
Interaktywne komponenty wtyczki pisane ręcznie od zera islands Reacta, Vue albo Svelte, hydratowane pojedynczo
Baza danych wymagana (MySQL) brak brak, treść w repozytorium

Najczęstsze pytania

Czy mogę pisać treść w Markdown? Tak, content collections w Astro trzymają treść jako pliki Markdown w repozytorium, walidowane przy buildzie.

Czy Astro potrzebuje procesu w tle? Nie w domyślnym trybie - output jest w pełni statyczny i serwowany bezpośrednio przez nginx, bez zużycia RAM po zakończeniu builda.

Kiedy wybrać SSR (adapter node) zamiast statyki? Gdy strona musi zwracać inne dane dla każdego zapytania (np. panel użytkownika) - wtedy w katalogu aplikacji wybierz stack Node.js i skonfiguruj start.command.

Czy mogę mieszać islands z różnych frameworków na jednej stronie? Tak, Astro pozwala łączyć komponenty Reacta, Vue i Svelte na tej samej stronie, każdy hydratowany niezależnie.

Czy dostanę SSL i własną domenę? Tak, certyfikat SSL jest automatyczny, a domenę albo subdomenę *.saploapp.pl masz w cenie każdego planu.

Astro na Saplo stawiasz od zera do działającej domeny w kilka minut, a treść aktualizujesz przez git push bez dotykania panelu admina ani bazy danych. Jeśli projekt urośnie do potrzeby pełnego SSR, w tym samym katalogu znajdziesz stack Node.js.

#astro #git-deploy #javascript #poradnik #static

Powiązane wpisy