Ręczna instalacja Astro
Ten przewodnik przeprowadzi Cię przez kroki niezbędne do ręcznej instalacji i konfiguracji nowego projektu Astro.
Zamiast tego, skorzystaj z kreatora CLI create astro
.
Wymagania
Dział zatytułowany Wymagania- Node.js -
v18.17.1
lubv20.3.0
lub nowsza. (v19
nie jest obsługiwana.) - Edytor tekstu - Zalecamy VS Code z naszym Oficjalnym rozszerzeniem Astro.
- Terminal - Dostęp do Astro uzyskuje się poprzez interfejs wiersza poleceń (CLI).
Instalacja
Dział zatytułowany InstalacjaJeśli nie chcesz używać naszego automatycznego narzędzia CLI create astro
, możesz skonfigurować swój projekt samodzielnie, postępując zgodnie z poniższym przewodnikiem.
1. Stwórz swój katalog
Dział zatytułowany 1. Stwórz swój katalogUtwórz pusty katalog o nazwie swojego projektu, a następnie do niego przejdź.
Kiedy już znajdziesz się w nowym katalogu, utwórz plik projektu package.json
. Za jego pomocą będziesz zarządzać zależnościami projektu, w tym Astro. Jeśli format tego pliku nie jest Ci znany, uruchom następujące polecenie aby go utworzyć.
2. Zainstaluj Astro
Dział zatytułowany 2. Zainstaluj AstroW pierwszej kolejności, zainstaluj zależności Astro wewnątrz swojego projektu.
Astro musi być zainstalowane lokalnie, nie globalnie. Upewnij się, że nie uruchamiasz npm install -g astro
pnpm add -g astro
bądź yarn add global astro
.
Następnie, zastąp placeholder wewnątrz sekcji “scripts” w swoim package.json
następującym kodem:
Tych skryptów użyjesz w dalszej części przewodnika, aby uruchomić Astro i wykonać jego różne polecenia.
3. Stwórz swoją pierwszą stronę
Dział zatytułowany 3. Stwórz swoją pierwszą stronęW edytorze tekstu, utwórz nowy plik w swoim katalogu ze ścieżką src/pages/index.astro
. To będzie twoja pierwsza strona Astro w tym projekcie.
Na potrzeby tego przewodnika, skopiuj i wklej następujący fragment kodu (wlącznie z pauzami ---
) do nowego pliku:
4. Utwórz swój pierwszy statyczny zasób
Dział zatytułowany 4. Utwórz swój pierwszy statyczny zasóbNajpewniej chcesz również utworzyć katalog public/
do przechowywania statycznych zasobów. Astro będzie zawsze dołączać te zasoby do finalnej wersji strony, więc możesz bezpiecznie odwoływać się do nich wewnątrz szablonów komponentów.
W edytorze tekstu utwórz nowy plik w swoim katalogu: public/robots.txt
. robots.txt
jest prostym plikiem z którego korzysta większość stron aby powiedzieć botom wyszukiwarek, takim jak Google, jak mają traktować Twoją stronę.
Na potrzeby przewodnika, skopiuj i wklej następujący fragment kodu do swojego nowego pliku:
5. Utwórz astro.config.mjs
Dział zatytułowany 5. Utwórz astro.config.mjsAstro można konfigurować za pomocą pliku astro.config.mjs
. Ten plik jest opcjonalny jeśli nie potrzebujesz konfigurować Astro, ale możesz chcieć go teraz stworzyć.
Utwórz astro.config.mjs
w głównym katalogu swojego projektu i skopiuj do niego poniższy kod:
Jeśli chcesz dodać komponenty frameworków UI takich jak React, Svelte, itp. lub użyć innych narzędzi takich jak Tailwind czy Partytown w swoim projekcie, to właśnie tutaj ręcznie zaimportujesz i skonfigurujesz integracje.
6. Dodaj wsparcie dla TypeScript
Dział zatytułowany 6. Dodaj wsparcie dla TypeScriptTypeScript jest konfigurowany za pomocą pliku tsconfig.json
. Nawet jeśli nie piszesz kodu TypeScript, plik ten jest ważny dla narzędzi takie jak Astro i VS Code aby wiedziały jak interpretować Twój projekt. Niektóre funkcje (jak importowanie paczek npm) nie są w pełni obsługiwane w edytorze bez pliku tsconfig.json
.
Jeśli zamierzasz pisać kod TypeScript, zalecane jest użycie szablonu Astro strict
lub strictest
. Możesz zobaczyć i porównać trzy konfiguracje szablonów na stronie astro/tsconfigs/.
Utwórz tsconfig.json
w głównym katalogu swojego projektu i skopiuj do niego poniższy kod. (Możesz użyć base
, strict
lub strictest
dla swojego szablonu TypeScript):
Na koniec należy stworzyć plik src/env.d.ts
, aby TypeScript wiedział o typach środowiskowych dostępnych w projekcie Astro:
7. Następne kroki
Dział zatytułowany 7. Następne krokiJeśli wykonano wszystkie powyższe kroki, katalog Twojego projektu powinien teraz wyglądać tak:
Foldernode_modules/
- …
Folderpublic/
- robots.txt
Foldersrc/
Folderpages/
- index.astro
- env.d.ts
- astro.config.mjs
- package-lock.json lub
yarn.lock
,pnpm-lock.yaml
, itp. - package.json
- tsconfig.json
Gratulacje, jesteś teraz gotów do korzystania z Astro!
Jeśli w pełni zastosowano się do tego przewodnika, można przejść bezpośrednio do Kroku 2: Uruchom Astro aby kontynuować i dowiedzieć się jak uruchomić Astro po raz pierwszy.
Learn