Learn ASTRO with Real Code Examples

`npm create astro@latest`

Choose template: blog, docs, minimal, etc.

Start dev server with `npm run dev`

Configure integrations (React/Vue/Svelte)

Deploy to platforms like Vercel, Netlify, Cloudflare

Install Node.js

Create Astro project

Choose framework integrations

Configure MDX if needed

Set up adapter for SSR

astro.config.mjs - main config

tsconfig.json - TypeScript support

package.json - scripts/dependencies

tailwind.config.js - if using Tailwind

mdx.config.js - if using MDX

`npm create astro` - new project

`npm run dev` - start dev server

`npm run build` - build site

`npm run preview` - preview build

`npx astro add` - add integrations

Community i18n integrations

Static i18n via routing

MDX localization

SSR-powered locale switching

URL-based language segmentation

Semantic HTML-first approach

Low JS = fewer accessibility pitfalls

Astro components encourage ARIA-friendly patterns

Supports framework-level accessibility

Optimized static sites improve navigation

Tailwind CSS

CSS Modules

Sass

Vanilla CSS

Framework-specific styling inside islands

Local state inside islands

React/Vue/Svelte state libraries

Signals (Solid/Preact) for islands

No global state needed for static content

Store JS only inside interactive components

Astro `fetch()` in server context

Content collections for structured data

Markdown & MDX data ingestion

API endpoints with Astro server functions

External CMS integrations (Sanity, Contentful, etc.)