Skip to content

Ręczna instalacja Astro

Ten przewodnik przeprowadzi Cię przez kroki niezbędne do ręcznej instalacji i konfiguracji nowego projektu Astro, jeśli wolisz nie używać automatycznego narzędzia CLI.

Wolisz szybszy sposób na rozpoczęcie pracy?

Dział zatytułowany Wolisz szybszy sposób na rozpoczęcie pracy?
Spróbuj skorzystać z kreatora astro CLI →

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

Jeśli nie chcesz używać naszego automatycznego narzędzia create astro CLI, 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 przejdź do niego.

Terminal window
mkdir my-astro-project
cd my-astro-project

Kiedy już znajdziesz się w nowym katalogu, utwórz plik projektu package.json. W ten sposób będziesz zarządzał dependencjami projektu, w tym Astro. Jeśli nie jesteś zaznajomiony z tym formatem pliku, uruchom następujące polecenie, aby go utworzyć.

Terminal window
npm init --yes

2. Zainstaluj Astro

Dział zatytułowany 2. Zainstaluj Astro

Najpierw zainstaluj dependencje projektu Astro wewnątrz swojego projektu.

Terminal window
npm install astro

Następnie zastąp placeholder wewnątrz “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ć 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 pod adresem src/pages/index.astro. To będzie twoja pierwsza strona Astro w projekcie.

Na potrzeby tego przewodnika, skopiuj i wklej następujący fragment kodu (włączając --- kreski) do nowego pliku:

src/pages/index.astro
---
// Witamy w Astro! Wszystko pomiędzy tymi potrójnymi kreskami to "frontmatter" twojego komponentu.
// Jego zawartość nigdy nie zostanie wykonana w przeglądarce.
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

Należy również utworzyć katalog public/ do przechowywania statycznych zasobów. Astro zawsze będzie dołączać te zasoby do końcowej kompilacji, więc możesz bezpiecznie odwoływać się do nich z wnętrza swoich szablonów komponentów.

W edytorze tekstu utwórz nowy plik w swoim katalogu pod adresem 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ę.

Dla tego 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 jest konfigurowane za pomocą pliku astro.config.mjs. Ten plik jest opcjonalny, jeśli nie potrzebujesz konfigurować Astro, ale być może chcesz 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 załączyć komponenty frameworków UI takich jak React, Svelte, itp. lub użyć innych narzędzi takich jak Tailwind czy Partytown w swoim projekcie, to 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, aby narzędzia takie jak Astro i VS Code wiedziały jak interpretować Twój projekt. Niektóre funkcje (jak importowanie paczek za pomocą 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ć src/env.d.ts, aby TypeScript wiedział o typach środowiska 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 wykonałeś powyższe kroki, Twój katalog projektu powinien teraz wyglądać tak:

  • Foldernode_modules/
    • …
  • Folderpublic/
    • robots.txt
  • Foldersrc/
    • Folderpages/
      • index.astro
    • env.d.ts
  • astro.config.mjs
  • package-lock.json or yarn.lock, pnpm-lock.yaml, etc.
  • package.json
  • tsconfig.json

Gratulacje, jesteś teraz gotowy do korzystania z Astro!

Jeśli podążałeś za tym przewodnikiem, możesz przejść bezpośrednio do Krok 2: Uruchom Astro, aby kontynuować i dowiedzieć się jak uruchomić Astro po raz pierwszy.