Rozwijaj i buduj
Masz już projekt Astro? To czas zacząć budować! 🚀
Edytuj swój projekt
Dział zatytułowany „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
Dział zatytułowany „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 run dev
pnpm run dev
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
Dział zatytułowany „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
Dział zatytułowany „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 run build
pnpm build
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.
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
Dział zatytułowany „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
Dział zatytułowany „Skonfiguruj swoje środowisko deweloperskie”Poznaj poniższe przewodniki, aby dostosować środowisko pracy.
Odkryj funkcje Astro
Dział zatytułowany „Odkryj funkcje Astro”Przejdź samouczek wprowadzający
Dział zatytułowany „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ę.
Learn