Przejdź do głównej zawartości

Ręczna instalacja Astro

Ten przewodnik przeprowadzi Cię przez kroki niezbędne do ręcznej instalacji i konfiguracji nowego projektu Astro.

Wymagania

Dział zatytułowany Wymagania
  • Node.js - v18.17.1 lub v20.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 Instalacja

Jeś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 katalog

Utwórz pusty katalog o nazwie swojego projektu, a następnie do niego przejdź.

Okno terminala
mkdir my-astro-project
cd my-astro-project

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ć.

Okno terminala
npm init --yes

2. Zainstaluj Astro

Dział zatytułowany 2. Zainstaluj Astro

W pierwszej kolejności, zainstaluj zależności Astro wewnątrz swojego projektu.

Okno terminala
npm install astro

Następnie, zastąp placeholder wewnątrz sekcji “scripts” w swoim package.json następującym kodem:

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },

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:

src/pages/index.astro
---
// Witamy w Astro! Wszystko pomiędzy potrójnymi pauzami to "frontmatter" twojego komponentu.
// Jego zawartość nigdy nie dostanie się do przeglądarki.
console.log('To wykona się w terminalu, nie w przeglądarce!')
---
<!-- Poniżej znajduje się twój "szablon komponentu". Jest to po prostu HTML, ale z
     odrobiną magii, która pomoże Ci zbudować wspaniałe szablony. -->
<html>
  <body>
    <h1>Witaj, świecie!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

4. Utwórz swój pierwszy statyczny zasób

Dział zatytułowany 4. Utwórz swój pierwszy statyczny zasób

Najpewniej 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:

public/robots.txt
# Przykład: Zezwól wszystkim botom na skanowanie i indeksowanie Twojej witryny.
# Pełna składnia: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

5. Utwórz astro.config.mjs

Dział zatytułowany 5. Utwórz astro.config.mjs

Astro 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:

astro.config.mjs
import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({});

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.

Zajrzyj do dokumentacji konfiguracji API aby uzyskać więcej informacji.

6. Dodaj wsparcie dla TypeScript

Dział zatytułowany 6. Dodaj wsparcie dla TypeScript

TypeScript 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):

tsconfig.json
{
  "extends": "astro/tsconfigs/base"
}

Na koniec należy stworzyć plik src/env.d.ts, aby TypeScript wiedział o typach środowiskowych dostępnych w projekcie Astro:

src/env.d.ts
/// <reference types="astro/client" />
Przeczytaj przewodnik po konfiguracji TypeScript aby uzyskać więcej informacji.

7. Następne kroki

Dział zatytułowany 7. Następne kroki

Jeś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.