Building your first website with Astro can be an exciting and rewarding experience. Astro is a modern static site builder that allows you to create fast, optimized websites using your favorite frameworks and tools. This guide provides practical steps to help you set up your first Astro project from scratch.

Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript
  • Node.js installed on your computer (version 14 or higher)
  • A code editor such as Visual Studio Code
  • Internet connection for downloading dependencies

Step 1: Install Node.js and Initialize Your Project

First, ensure Node.js is installed on your system. You can download it from the official website. Once installed, open your terminal or command prompt and create a new directory for your project:

mkdir my-astro-site

Navigate into your project directory:

cd my-astro-site

Initialize a new Astro project with:

npm init astro@latest

Follow the prompts to select your project options. Once completed, install dependencies:

npm install

Step 2: Explore Your Project Structure

Your project will contain several folders and files. Key components include:

  • src/pages: Your website pages
  • src/components: Reusable components
  • astro.config.mjs: Configuration file
  • package.json: Dependencies and scripts

Step 3: Create Your First Page

Navigate to the src/pages directory. Create a new file named index.astro. Add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Astro Website</title>
  </head>
  <body>
    <h1>Welcome to My First Astro Site!</h1>
    <p>This is a simple static website built with Astro.</p>
  </body>
</html>

Step 4: Run Your Development Server

Start the local development server with:

npm run dev

Open your browser and go to http://localhost:3000. You should see your website displaying the welcome message.

Step 5: Customize Your Website

Enhance your site by adding more pages, components, and styles. For example, create a new page called about.astro in the src/pages folder:

<!-- src/pages/about.astro -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
  </head>
  <body>
    <h1>About Our Website</h1>
    <p>This page provides information about our project.</p>
    <a href="/">Go back home</a>
  </body>
</html>

Step 6: Build and Deploy

When you're ready to publish your website, build the static files with:

npm run build

This creates a dist folder containing optimized static files. You can deploy these files to any static hosting provider like Netlify, Vercel, or GitHub Pages.

Conclusion

Creating your first website with Astro is straightforward and flexible. By following these steps, you can build a fast, modern static website tailored to your needs. Experiment with components, styles, and integrations to expand your project further.