Bygger en blogg med Astro: fra null til produksjon

Jeg har bygget nettsider siden jeg var tenåring. Jeg har vært innom alt fra WordPress og Jekyll til Next.js og SvelteKit. Likevel har jeg alltid hatt en itch etter noe som føles riktig for en enkel innholdsdrevet side – uten å dra med seg hele React-universet for å vise et par blogginnlegg.

Det er der Astro kommer inn.

Hva er Astro, egentlig?

Astro er et moderne, statisk-først rammeverk der JavaScript er et valg, ikke en nødvendighet. Det er bygget rundt konseptet islands architecture: kun de komponentene som faktisk trenger interaktivitet, sender JavaScript til klienten. Resten er ren HTML og CSS.

For en blogg som denne betyr det praktisk talt null kilobyte JavaScript til leseren. Siden laster lynraskt, og Google er veldig glad for det.

Content Collections er elegant

Det jeg liker aller best med Astro 5 er Content Collections. Du definerer et schema med Zod, og Astro validerer alle Markdown-filene dine ved byggetid:

const blog = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).optional(),
  }),
});

Skriver du et innlegg med feil dato-format? Bygget feiler med en nyttig feilmelding. Det er den typen friction som faktisk hjelper deg.

Font-provideren er en liten juvél

En av de mer spennende eksperimentelle funksjonene i Astro 5.7 er den innebygde font-provideren. Med én linje i konfigfilen laster Astro ned fontene fra Google Fonts ved byggetid og serverer dem fra din egen domene:

experimental: {
  fonts: [{
    provider: fontProviders.google(),
    name: 'Syne',
    cssVariable: '--font-display',
  }]
}

Ingen Google Fonts CDN-requests. Ingen personvern-lekkasje til tredjepart. Bare rask, selvhostet skrift.

Vercel-deployment tok under fem minutter

Siden Astro bygger til statiske filer, er Vercel-integrasjonen trivielt enkel. Koble til GitHub-repoet, sett byggekommandoen til npm run build, og output-mappen til dist. Det er det. Vercel oppdager faktisk Astro automatisk.

Jeg la til en vercel.json med security headers (Content-Security-Policy, HSTS, X-Frame-Options m.fl.) for å sørge for at siden er like godt sikret som det er enkelt å deploye.

Ville jeg valgt Astro igjen?

Absolutt. For innholdsdrevne sider – blogger, portfolier, dokumentasjonssider – er Astro det klareste valget jeg har gjort på lenge. Utvikleropplevelsen er smidig, byggene er raske, og outputen er lean.

Koden for denne bloggen ligger åpent på GitHub. Ta gjerne en titt.