Dlaczego konwertować ASTRO na HTML?
Astro to narzędzie do budowania, a nie środowisko uruchomieniowe, więc jego zadaniem jest kompilacja komponentów .astro do wstępnie wyrenderowanego HTML w celu uzyskania szybkich stron wolnych od frameworków. Użytkownicy potrzebują surowych plików .html, aby wdrożyć je na statycznych hostach, zarchiwizować stronę lub umieścić znacznik w innym systemie.
Jak przekonwertować ASTRO na HTML
Astro CLI build FREE
W swoim projekcie uruchom npm run build (co wywołuje astro build). Astro domyślnie zapisuje statyczne pliki .html oraz zahaszowane pliki CSS/JS w katalogu dist/.
astro build z niestandardowym outDir OPEN-SOURCE
Ustaw outDir w astro.config.mjs lub uruchom astro build --outDir ./out, aby umieścić wygenerowane pliki .html w wybranym folderze.
O tych formatach
Plik .astro to szablon komponentu dla frameworka webowego Astro. Zawiera on znacznik w stylu HTML oraz opcjonalną sekcję skryptu JavaScript lub TypeScript, a Astro kompiluje go do czystego…
Otwórz szczegóły .ASTRO →
.HTML
HyperText Markup Language Web Page
Plik HTML to strona internetowa - zwykły tekst ze znacznikami, które przeglądarka zamienia w sformatowaną stronę, którą widzisz. Aby go wyświetlić, kliknij dwukrotnie, a otworzy się w…
Otwórz szczegóły .HTML →Jakość i na co uważać
- Dane wyjściowe to wyrenderowany wynik, a nie kod źródłowy - frontmatter
.astro, komponenty i importy są kompilowane do płaskiego znacznika. - Strony korzystające z renderowania po stronie serwera (
output: 'server') lub dynamicznych ścieżek nie zostaną wstępnie wyrenderowane do statycznego.htmlbez adaptera statycznego lubgetStaticPaths. - HTML odwołuje się do zewnętrznych zahaszowanych plików CSS i JS w
dist/; pojedyncza zapisana strona może mieć uszkodzone style, chyba że zachowasz te zasoby.
Najczęściej zadawane pytania
Gdzie Astro umieszcza pliki HTML?
dist/, gdzie każda ścieżka jest własnym plikiem index.html (na przykład about/index.html).Czy mogę uzyskać jeden samowystarczalny plik HTML?
Czy interaktywne komponenty nadal działają w HTML?
client:*; w przeciwnym razie otrzymasz statyczny znacznik bez zachowań po stronie klienta.Która komenda buduje stronę?
npm run build, która pod spodem uruchamia astro build.
