Rozwijaj i buduj

Masz już projekt Astro? To czas zacząć budować! 🚀

Edytuj swój projekt

Aby wprowadzić zmiany w swoim projekcie, otwórz folder projektu w edytorze kodu. Praca w trybie develop z uruchomionym serwerem dev pozwala widzieć aktualizacje strony podczas edycji kodu.

Możesz również dostosować swoje środowisko deweloperskie, np. skonfigurować TypeScript lub zainstalować oficjalne rozszerzenia edytora dla Astro.

Uruchom serwer dev Astro

Astro posiada wbudowany serwer deweloperski, który ma wszystko, czego potrzebujesz do pracy nad projektem. Polecenie CLI astro dev uruchamia lokalny serwer deweloperski, dzięki czemu będziesz mógł po raz pierwszy zobaczyć swoją nową stronę w akcji.

Każdy szablon startowy zawiera wstępnie skonfigurowany skrypt, który uruchomi astro dev za Ciebie. Po przejściu do katalogu projektu, użyj swojego ulubionego menedżera pakietów, aby uruchomić to polecenie i wystartować serwer deweloperski Astro.

npm

npm run dev

pnpm

pnpm run dev

yarn

yarn run dev

Jeśli wszystko przebiegło pomyślnie, Astro będzie teraz wyświetlać Twój projekt pod adresem http://localhost:4321/. Odwiedź ten link w przeglądarce i zobacz swoją nową stronę!

Pracuj w trybie deweloperskim

Astro monitoruje zmiany plików na żywo w katalogu src/ i aktualizuje podgląd strony podczas edycji kodu, więc nie musisz ponownie uruchamiać serwera. Zawsze będziesz mógł zobaczyć aktualną wersję swojej strony w przeglądarce podczas, gdy serwer dev jest uruchomiony w tle.

Podczas przeglądania strony w przeglądarce masz dostęp do paska narzędzi dev Astro, który pomaga m.in. analizować wyspy, wykrywać problemy z dostępnością oraz wspiera w innych aspektach pracy nad projektem.

Jeśli nie możesz otworzyć swojego projektu w przeglądarce po uruchomieniu serwera dev, wróć do terminala, w którym uruchomiłeś komendę dev i sprawdź wyświetloną wiadomość. Powinna cię ona poinformować o ewentualnych błędach lub alternatywnym adresie URL (innym niż http://localhost:4321/).

Zbuduj projekt i zobacz podgląd swojej strony

Aby zobaczyć, jak będzie wyglądać Twoja strona po zbudowaniu, zatrzymaj serwer dev (Ctrl + C) i uruchom odpowiednią komendę build w terminalu, zależnie od używanego menedżera pakietów.

npm

npm run build

pnpm

pnpm build

yarn

yarn run build

Astro zbuduje gotową do wdrożenia wersję Twojej strony w osobnym folderze (domyślnie dist/ ) i wyświetli postęp w terminalu. Pojawią się też ewentualne błędy kompilacji. Jeśli TypeScript jest ustawiony na strict lub strictest, skrypt build sprawdzi również poprawność typów w projekcie.

Po zakończeniu budowania uruchom komendę preview (np. npm run preview), aby lokalnie podejrzeć zbudowaną wersję strony w przeglądarce.

Pamiętaj, że to podgląd kodu w stanie, w jakim znajdował się podczas ostatniego uruchomienia komendy build. To symulacja wyglądu strony po wdrożeniu. Późniejsze zmiany w kodzie nie będą widoczne w podglądzie, dopóki ponownie nie zbudujesz projektu.

Użyj (Ctrl + C), aby zakończyć podgląd i wpisać inną komendę w terminalu, np. ponownie uruchomić serwer dev, by wrócić do trybu deweloperskiego, który aktualizuje się na żywo podczas edycji kodu.

Przeczytaj więcej o interfejsie CLI Astro (EN) i komendach terminalowych, których używasz podczas pracy z Astro.

Wskazówka

Możesz od razu wdrożyć swoją nową stronę — zanim wprowadzisz zbyt wiele zmian w kodzie. Dzięki temu opublikujesz minimalną, działającą wersję i być może zaoszczędzisz sobie dodatkowych problemów z wdrożeniem w późniejszym etapie.

Następne kroki

Gotowe! Możesz teraz zacząć tworzyć z Astro! 🥳

Oto kilka rzeczy, które warto teraz poznać. Możesz je czytać w dowolnej kolejności – albo na chwilę zostawić dokumentację i poeksperymentować w swoim projekcie. W razie pytań czy problemów zawsze możesz tu wrócić.

Skonfiguruj swoje środowisko deweloperskie

Poznaj poniższe przewodniki, aby dostosować środowisko pracy.

Konfiguracja edytora Dostosuj swój edytor kodu, by poprawić doświadczenie pracy z Astro i odblokować nowe funkcje.

Pasek narzędzi dev Poznaj przydatne funkcje paska narzędzi deweloperskich.

Konfiguracja TypeScript Skonfiguruj opcje sprawdzania typów, IntelliSense i inne funkcje.

Odkryj funkcje Astro

Zrozum swoją bazę kodu Poznaj strukturę plików Astro w przewodniku po strukturze projektu.

Twórz kolekcje treści Dodawaj treści do strony z walidacją frontmatter i automatycznym typowaniem.

Dodaj przejścia widoków Twórz płynne przejścia między stronami i animacje.

Dowiedz się o Wyspach Przeczytaj o architekturze Wysp w Astro.

Przejdź samouczek wprowadzający

Zbuduj w pełni funkcjonalny blog Astro zaczynając od pustej strony dzięki samouczkowi wprowadzającemu (EN).

To świetny sposób, aby zobaczyć, jak działa Astro — przeprowadzi Cię on przez podstawy stron, układów, komponentów, routingu, wysp i nie tylko. Zawiera też opcjonalną część przyjazną dla początkujących, która pokazuje jak zainstalować potrzebne aplikacje, założyć konto GitHub i wdrożyć stronę.