Setup & Project Structure

In simple words, Astro is:

• A static site generator (SSG) by default. This means it builds plain HTML files ahead of time.
• Able to do SSR (Server-Side Rendering) too, if you turn that setting on. SSR means the page is built fresh on the server every time someone visits it.
• Framework-agnostic. This means you can still use React, Vue, or Svelte inside Astro if you want to, but you don’t have to.

Quick Comparison

Framework	Sends JS by default	Builds HTML first	SEO friendliness
React	Yes	No	Medium
Next.js	Yes	Partly	Good
Astro	No	Yes	Excellent

A Simple Way to Picture It

Content -> Astro -> HTML -> Browser
                 ↓
           Optional JS Islands

In plain words: your content goes into Astro, Astro turns it into plain HTML, and that HTML is sent to the browser. If a part of the page needs to be interactive, only that small part gets a bit of JavaScript - this small interactive part is called an “island,” and we’ll cover it later.

Installing and Creating a Project

Create the Project

npm create astro@latest

While setting up, you’ll be asked a few questions. Here’s what to choose if you’re just starting out:

• TypeScript: Yes
• Strict: Yes
• Tailwind: Optional (your choice)
• SSR: No (you can turn this on later, once you actually need it)

Folder Structure

Once the project is created, you’ll see a structure like this:

src/
 ├─ pages/
 ├─ components/
 ├─ layouts/
 ├─ content/
 ├─ styles/
public/
astro.config.mjs

Here’s what each folder is roughly for:

• pages/ - every file here automatically becomes a page on your website
• components/ - small, reusable pieces of UI, like buttons, cards, or navbars
• layouts/ - the outer “shell” or “frame” that wraps around your pages (like a common header/footer)
• content/ - this is where your Markdown content (like blog posts) lives
• styles/ - your CSS files
• public/ - files that should be available as-is, like images or fonts
• astro.config.mjs - the main configuration file for your whole project

Using Constants

It’s a good habit to keep things like your site name and URL in one central place, instead of typing them again and again across your project.

// src/config/site.ts
export const SITE = {
    name: "Kumar Sahil",
    url: "https://example.com",
};

You can then bring this into any file where you need it:

import { SITE } from "../config/site";

The astro.config.mjs File

This file controls important project-wide settings, such as:

• What kind of build output you want (static HTML, or server-rendered)
• Which integrations (extra features/plugins) are turned on
• Whether you’re using SSR or SSG (the default)

export default defineConfig({
    site: "https://example.com",
    integrations: [],
});

1. Set the site value to your actual website URL. This helps Astro generate correct links, sitemaps, and SEO tags.
2. Add any integrations (plugins) you need inside the integrations array, such as Tailwind, React, or an adapter for deployment.
3. Decide on output mode (static or server). We’ll cover this in detail in the SSR section later.