Skip to content

Instalacja Astro za pomocą automatycznego CLI

Gotów do instalacji Astro? Podążaj za tym poradnikiem korzystając z CLI create astro aby rozpocząć.

Wymagania

Dział zatytułowany Wymagania
  • Node.js - v18.14.1 lub wyższa.
  • Edytor tekstu - Polecamy VS Code z naszym Oficjalnym rozszerzeniem Astro.
  • Terminal - Dostęp do Astro uzyskuje się poprzez interfejs wiersza poleceń (CLI).

Instalacja

Dział zatytułowany Instalacja

create astro to najszybszy sposób na rozpoczęcie nowego projektu Astro od podstaw. Przeprowadzi Cię przez każdy krok tworzenia nowego projektu. Pozwala wybrać spośród kilku różnych oficjalnych szablonów startowych lub możesz użyć dowolnego istniejącego projektu na GitHubie z argumentem --template.

1. Uruchamianie kreatora konfiguracji

Dział zatytułowany 1. Uruchamianie kreatora konfiguracji

Uruchom następujące polecenie w swoim terminalu, aby uruchomić nasz kreator instalacji:

Terminal window
# utwórz nowy projekt z npm
npm create astro@latest

Możesz uruchomić create astro w dowolnym miejscu na swoim komputerze, więc nie ma potrzeby tworzenia nowego pustego katalogu dla twojego projektu przed rozpoczęciem. Jeśli nie masz jeszcze pustego katalogu dla swojego nowego projektu, kreator pomoże Ci go automatycznie utworzyć.

Jeśli wszystko pójdzie dobrze, powinieneś zobaczyć komunikat “Liftoff confirmed. Explore your project!” (“Start został potwierdzony. Zacznij odkrywać swój projekt!”), po którym następują zalecane następne kroki. Przejdź do katalogu z nowym projektem, aby rozpocząć korzystanie z Astro.

Jeśli pominąłeś krok npm install podczas kreatora CLI, upewnij się, że zainstalowałeś odpowiednie pakiety przed kontynuowaniem.

2. Uruchamianie Astro ✨

Dział zatytułowany 2. Uruchamianie Astro ✨

Astro posiada wbudowany serwer deweloperski, który ma wszystko, czego potrzebujesz do rozwoju projektu. Polecenie astro dev uruchomi lokalny serwer deweloperski, abyś mógł zobaczyć swoją nową stronę w akcji po raz pierwszy.

Każdy szablon startowy posiada wstępnie skonfigurowany skrypt, który uruchomi dla Ciebie astro dev. Użyj swojego ulubionego menedżera pakietów, aby wykonać to polecenie i uruchomić serwer deweloperski Astro.

Terminal window
npm run dev

Jeśli wszystko pójdzie dobrze, Astro powinno teraz wyświetlać twój projekt na http://localhost:4321/!

Astro będzie nasłuchiwał zmian plików w katalogu src/, więc nie będziesz musiał restartować serwera, gdy będziesz dokonywał zmian podczas tworzenia.

Jeśli nie jesteś w stanie otworzyć swojego projektu w przeglądarce, wróć do terminala, w którym uruchomiłeś komendę dev i sprawdź, czy nie wystąpił błąd, lub czy Twój projekt jest obsługiwany pod innym adresem URL niż ten, który został podany wyżej.

Szablony startowe

Dział zatytułowany Szablony startowe

Możesz również rozpocząć nowy projekt astro oparty na oficjalnym przykładzie lub gałęzi main dowolnego repozytorium GitHub, przekazując argument --template do polecenia create astro.

Terminal window
# utwórz nowy projekt z oficjalnym przykładem
npm create astro@latest -- --template <nazwa-przykładu>


# utwórz nowy projekt na podstawie głównej gałęzi repozytorium GitHub
npm create astro@latest -- --template <uzytkownik-githuba>/<repozytorium>

Domyślnie, polecenie to użyje gałęzi main repozytorium szablonowego. Aby użyć innej gałęzi, przekaż ją jako część argumentu --template: <uzytkownik-githuba>/<repozytorium>#<gałęź>. Poznaj nasz pokaz motywów i szablonów, gdzie możesz przeglądać motywy dla blogów, portfolio, dokumentacji, stron startowych i wiele więcej! Lub szukaj na GitHubie, aby znaleźć jeszcze więcej projektów startowych.

Następne kroki

Dział zatytułowany Następne kroki

Sukces! Jesteś teraz gotowy, aby rozpocząć budowanie z Astro! 🥳

Oto kilka tematów, które polecamy zgłębić w następnej kolejności. Możesz je czytać w dowolnej kolejności. Możesz nawet zostawić naszą dokumentację na jakiś czas i pobawić się w swojej nowej bazie kodowej projektu Astro, wracając tutaj za każdym razem, gdy napotkasz problemy lub będziesz mieć pytania.

📚 Dodaj framework: Dowiedz się jak rozszerzyć Astro o obsługę React, Svelte, Tailwind i innych za pomocą npx astro add w naszym Przewodniku po integracjach.

📚 Wdrożenie witryny: Dowiedz się, jak zbudować i wdrożyć projekt Astro do sieci w naszym Przewodniku wdrażania.

📚 Poznaj swój kod: Dowiedz się więcej o strukturze projektu Astro w naszym Przewodniku po strukturze projektu.