Getting Started with Astro for Beginners

🚀 Getting Started with Astro for Beginners

Astro is a cutting-edge static site generator designed to help developers create optimized, content-rich websites. Whether you’re building a personal blog, portfolio, or documentation site, Astro offers a streamlined approach to modern web development.

🛠️ Prerequisites

Before we begin, ensure you have the following installed:

Node.js: The JavaScript runtime. Download Node.js
npm: Node’s package manager (comes bundled with Node.js).
A code editor: Visual Studio Code is recommended.

📦 Setting Up Your First Astro Project

Create a New Astro Project: Open your terminal and run the following command:
```
npm create astro@latest
```
Follow the prompts to set up your project.
Navigate into Your Project Directory:
```
cd your-project-name
```
Install Dependencies:
```
npm install
```
Start the Development Server:
```
npm run dev
```
Your site will be live at http://localhost:3000.

🧑‍🍳 Understanding the Project Structure

Once your project is set up, familiarize yourself with the following key directories and files:

src/pages/: Contains your site’s pages. Each .astro file here corresponds to a route.
src/components/: Reusable UI components.
public/: Static assets like images and fonts.
astro.config.mjs: Configuration file for your Astro project.

📝 Creating Your First Page

To create a new page:

Inside the src/pages/ directory, create a new file named about.astro.

Add the following content:

---
title: "About Us"
---

<h1>{title}</h1>
<p>Welcome to our website!</p>

Visit http://localhost:3000/about to see your new page in action.

🎨 Styling Your Site

Astro supports various styling options:

Global Styles: Add a src/styles/global.css file and import it in src/pages/_layout.astro:
```
---
import '../styles/global.css';
---
```
Component-Level Styles: Use scoped styles within components:
```
<style>
  h1 {
    color: blue;
  }
</style>
```

🔧 Adding Components

Components allow you to reuse UI elements across your site. For example, to create a header component:

In src/components/Header.astro:

<header>
  <h1>My Site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Import and use it in your pages:

---
import Header from '../components/Header.astro';
---

<Header />

📄 Working with Markdown

Astro has built-in support for Markdown:

Create a new file in src/pages/blog/first-post.md.

Add content:

---
title: "My First Post"
date: "2025-09-01"
---

Welcome to my blog!

Astro will automatically render this as a page at http://localhost:3000/blog/first-post.

🚢 Deploying Your Site

Once you’re ready to deploy:

Build Your Site:
```
npm run build
```
Preview the Production Build:
```
npm run preview
```
Deploy to a Hosting Provider:

Each platform has its own deployment process, but Astro’s build output is optimized for static hosting.

Getting Started with Astro for Beginners