Astro Intro & Setup

What is Astro?

Astro is a web framework that uses an "Islands Architecture". This means it renders your entire site as static HTML by default and only loads JavaScript for the specific interactive components that need it. The result is an extremely fast website with perfect Lighthouse scores right out of the box.

Creating a New Astro Project

Open your terminal and run the following command to scaffold a new Astro project:

npm create astro@latest

When the CLI wizard appears, give your project a name like "my-portfolio". Choose the "Empty" template to start from a clean slate. Select "Yes" when asked to install dependencies. Choose "Strict" for TypeScript if you are comfortable with it, or "Relaxed" otherwise.

Navigating Into the Project

Move into the newly created project directory:

cd my-portfolio

Starting the Development Server

Launch the local development server with hot-reloading enabled:

npm run dev

Open your browser and navigate to http://localhost:4321. You should see a blank or minimal starter page. Every time you save a file, the browser will automatically refresh to show the latest changes.

Exploring the Project Structure

Open the project folder in VS Code. You will see the following key directories and files:

• src/pages/ — Each file here becomes a route on your site
• src/components/ — Reusable UI components live here
• src/layouts/ — Page layout wrappers go here
• public/ — Static assets like images, fonts, and icons
• astro.config.mjs — The main Astro configuration file