Varför konvertera ASTRO till HTML?
Astro är ett byggverktyg, inte en runtime, så hela dess uppgift är att kompilera .astro-komponenter till förrenderad HTML för snabba, ramverksfria sidor. Användare vill ha de råa .html-filerna för att distribuera till statiska webbhotell, arkivera en sida eller lägga in koden i ett annat system.
Hur man konverterar ASTRO till HTML
Astro CLI build FREE
Kör npm run build i ditt projekt (vilket anropar astro build). Astro skriver statiska .html-filer plus hashade CSS/JS till katalogen dist/ som standard.
astro build med anpassad outDir OPEN-SOURCE
Ställ in outDir i astro.config.mjs eller kör astro build --outDir ./out för att placera genererad .html i en valfri mapp.
Om dessa format
En .astro-fil är en komponentmall för webbramverket Astro. Den innehåller HTML-liknande markup plus en valfri skriptsektion i JavaScript eller TypeScript, och Astro kompilerar den till…
Öppna detaljer för .ASTRO →En HTML-fil är en webbsida - vanlig text med märkspråkstaggar som en webbläsare omvandlar till den formaterade sida du ser. För att visa den, dubbelklicka så öppnas den i din webbläsare…
Öppna detaljer för .HTML →Kvalitet & vad man bör tänka på
- Resultatet är det renderade slutresultatet, inte din källkod -
.astrofrontmatter, komponenter och importer kompileras bort till platt kod. - Sidor som använder server-side rendering (
output: 'server') eller dynamiska rutter kommer inte att förrenderas till statisk.htmlutan en statisk adapter ellergetStaticPaths. - HTML refererar till externa hashade CSS- och JS-filer i
dist/; en enskild sparad sida kan sluta fungera utseendemässigt om du inte behåller dessa resurser.
Vanliga frågor
Var lägger Astro HTML-filerna?
dist/ som standard, där varje rutt får en egen index.html (till exempel about/index.html).Kan jag få en enda fristående HTML-fil?
Fungerar interaktiva komponenter fortfarande i HTML-koden?
client:*-direktiv; annars får du statisk kod utan beteende på klientsidan.Vilket kommando bygger webbplatsen?
npm run build, som kör astro build under huven.