Jeg prøvde å bygge opp nettstedet mitt, som jeg har kodet for hånd, med Astro - her er hva som fungerte og hva som ikke gjorde

Lær hvordan jeg brukte Astro til å oppdatere nettstedet mitt med unike design og funksjonalitet. Utforsk prosessen fra installasjon til ferdigstilling av prosjektet.

Jeg driver en tulleside på Neocities: Whistling Nose Games, Music, and Multimedia. Fjoråret ga meg tid til å lære webdesign, CSS og JavaScript, og å lage merkelige spill og musikk. Stemningen er nostalgisk, og nå skal jeg gi den et nytt utseende. En venn med fremragende designferdigheter anbefalte Astro for redesignen. Jeg testet det og fikk til en del kreative løsninger.

Astro er et rammeverk for statiske nettsteder

Det er mye som skjer under huen

Som et "rammeverk for innholdsdrevne nettsteder," Astro er et JavaScript-rammeverk som hjelper deg med å bygge statiske nettsider ved å skille interaktive komponenter fra selve innholdet.

Alt du lager – komponenter, oppsett, og Markdown-filer – blir kompilert til HTML og CSS på serveren, ikke i nettleseren. Å se dette i sanntid er imponerende. Det benytter et filbasert rutingssystem for å generere URL-er fra filstrukturen din, og gjør mye av arbeidet i bakgrunnen.

Funksjonaliteten er omfattende, og veileder deg gjennom prosessen av å lage ditt første nettsted. Det finnes også muligheter for AI-integrasjoner (en Claude CLI-integrasjon høres lovende ut), men jeg har ikke utforsket dette for prosjektet mitt.

Start med et av Astros kurs. Jeg gikk gjennom dem før jeg begynte på min egen side, og det var uvurderlig.

Bruk av Astro: En testbygging for nettsideoppgradering

En enkel test gir retning

Oppdateringen av en personlig nettside kan ofte bli nedprioritert. Jeg merket at besøksstatistikken min var ute av drift, og forsiden min føltes for enkel mot den varierte innholdet den linket til.

Astro skal (forhåpentligvis) fikse dette.

Jeg planlegger å lage en ironisk listeartikkel, så formålet med denne Astro-testen er å bygge den siden og teste den før jeg legger den ut på Neocities.

Installasjon i kommandolinjen

Eller den nettbaserte versjonen av programvaren

For å installere Astro på Linux, må du Først installere Node.js. Bruk node -v og npm -v for å sjekke om de er installert. Har du ikke dem, installer med sudo apt install npm på Linux Mint Cinnamon. Last ned riktig versjon av Node.js via curl.

Installering og tillegg av moduler til Astro foregår i terminalen. Når installationen er fullført, oppretter Astro en prosjektkatalog som du kan legge til i.

Du kan legge til avhengigheter og rammeverk som ønsket (les mer om dette på deres nettsted). Jeg bruker npx astro add alpinjs for å legge til Alpine.js i prosjektet mitt. Jeg liker rammeverket godt, og det blir selve grunnlaget for besøkstelleren på siden min.

Astro har også en nettleserversjon, hvis det frister.

Designplanlegging før installasjon

Forberedelse er nøkkelen

Innholdet er klart, så jeg fokuserer på design og funksjonalitet. Jeg vil ha et interaktivt element, en nedstemningsknapp (oppstemningsknapp er ikke aktuelt—det er mer moro slik). Estetisk inntar jeg en sen-80-talls, TV-statiske, umettet stil.

Dempede grå kanter, mild sepia-bakgrunn, muligens et TV-statiske overlay (men ikke for distraherende), og en bleket grønn for teksten. Overskriftene blir lilla eller magenta for å passe til temaet. Fet skrift i amber. Noen interessante grep med overskriftene skal også implementeres.

Med Astro kan jeg realisere alt dette og mer.

Byggingen gikk raskt

En hel webside på halvparten av tiden

Når Astro installeres, oppretter den fire mapper i en src-katalog:

1. Eiendeler
2. Komponenter
3. Oppsett
4. Sider

I Eiendeler lagres bilder og skrifttyper. Komponenter rommer gjenbrukbare elementer (knapper, navigasjon, osv). Oppsett og Sider inneholder henholdsvis CSS og websinnhold.

Jeg skrev den opprinnelige listen i januar, konverterte den til Markdown, og lagret som en MD-fil med Micro i terminalen. Astro leser filnavnet, så HTML-format er ikke nødvendig.

Deretter bygde jeg CSS-elementsamlingen og lagret den i Oppsett. Den enkle JavaScript-knappen ble til et ASCII-skjelett fra ASCII Art Archive. Jeg konverterte noen tegneseriebilder til gråskala for å passe estetisk, og plasserte dem i Sider for å forenkle testen med Markdown-filen. Senere flytter jeg dem til Eiendeler.

Redigeringen er intuitiv. Endringer vises umiddelbart. Jeg åpnet Micro i ett vindu, med nettsiden åpen i et annet, slik at jeg kunne følge endringene. Tidsbesparende i søket etter feil.

Sjekk koden med npm run dev. Derfra settes innholdet sammen, og localhost åpnes i nettleseren. Se hvordan siden ser ut og oppdag eventuelle problemer momentant. Justeringer? Gå tilbake til src-filene, rediger i Micro, og nettleseren oppdateres automatisk.

Når det kom til min side, tok det litt tid å...

Det krevde tid, innsats og finjustering, men resultatet er noe jeg faktisk er stolt over. Det vil sannsynligvis finne veien til siden min.

Noen ting fungerer bra i Astro, mens andre trenger litt polering

Plass til forbedring

Astros styrke ligger i integrasjonen av dokumentene, som sammen skaper en helhetlig nettside. Men hvis du bare lager en enkel side med bilder, tekst, CSS og litt JavaScript, er manuelle koding fortsatt et alternativ.

Astro er tydelig tilpasset en desktop-tilnærming. Jeg fikk tjenesten til å fungere på Linux Mint, men opplevde problemer med den nettbaserte versjonen på Android. Verdt å merke seg dersom du planlegger å bruke det på mobil.

Det er befriende å slippe å forholde seg til en lang kode og la Astro konvertere markdown til fullt funksjonelt HTML. Siden jeg foretrekker å skrive i Markdown, sparte jeg mye tid sammenlignet med manuell HTML-koding. Det er en effektiv metode for å lage nettsteder – når du først forstår prosessen.

Astro er ikke for nybegynnere. Med solid erfaring innen HTML, Markdown og CSS (min JavaScript er rusten, men tilstrekkelig), forsto jeg hva som skjulte seg bak kulissene. Anbefalt: sjekk tutorials, inkludert Astros egne, og bli kjent med verktøyet.

Jeg koste meg med å bruke Astro til oppdateringen av siden min. Det vil ta tid å bli skikkelig komfortabel, men jeg ser for meg å bruke det oftere fremover.

Kanskje dette vil motivere meg til å friske opp nettsiden eller legge til flere sider. Jeg har ennå ikke fått tid til å oppdatere besøksseksjonen, men det vil komme.

Sammenfattende, jeg har hatt en god opplevelse, og jeg ser frem til hva annet jeg kan skape med Astro fremover.

Hvis du vil lese flere artikler som Jeg prøvde å bygge opp nettstedet mitt, som jeg har kodet for hånd, med Astro - her er hva som fungerte og hva som ikke gjorde, kan du besøke kategorien Opplæringen.