Tutorial: Building a Website with Astro Build
Tags: astro, templates, webdev, tutorial
Published: 2024-01-31 10:18:32

**Tutorial: Building a Website with Astro Build**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e3ke4qn66ypfco66wur.png)

Pro Tip. Download the [Astro Starter Template](https://astrolize.fabform.io/).
Jumpstart your next Astro project. You can use it and still follow along in this tutorial

In this tutorial, we will walk through the process of creating a static website using Astro, a modern static site generator. By the end of this tutorial, you will have a fully functional static website ready for deployment.

### Prerequisites
Before we begin, ensure you have the following installed:

1. Node.js and npm (Node Package Manager)
2. Basic knowledge of HTML, CSS, and JavaScript

### Step 1: Installing Astro
First, let's install Astro globally using npm. Open your terminal or command prompt and run the following command:

```bash
npm install -g astro
```

This command installs Astro globally on your system, allowing you to use it from anywhere in your terminal.

### Step 2: Creating a New Astro Project
Now that Astro is installed, let's create a new Astro project. Navigate to the directory where you want to create your project and run the following command:

```bash
astro create my-astro-website
```

Replace `my-astro-website` with the name you want to give your project directory. This command will set up a new Astro project with the default configuration and structure.

### Step 3: Exploring the Project Structure
Navigate into your project directory (`cd my-astro-website`) and take a look at the project structure. You'll see several files and folders, including:

- `src/`: This directory contains your website's source code.
- `src/pages/`: This directory contains your website's pages. Each `.astro` file in this directory represents a page on your website.
- `src/layouts/`: This directory contains layout files used to define the overall structure of your website.
- `src/components/`: This directory contains reusable components used throughout your website.
- `astro.config.mjs`: This file contains the configuration for your Astro project.

### Step 4: Creating Pages
Let's create some pages for our website. Inside the `src/pages/` directory, create a new file named `index.astro` and add the following content:

```html
---
title: Home
---

<astro-doc>
  <h1>Welcome to My Astro Website</h1>
  <p>This is the homepage of my Astro website.</p>
</astro-doc>
```

This code defines the content for our homepage using Markdown syntax.

### Step 5: Creating Layouts
Next, let's create a layout for our website. Inside the `src/layouts/` directory, create a new file named `default.astro` and add the following content:

```html
---
:astro-layout: default
---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{props.title} - My Astro Website</title>
</head>
<body>
  <header>
    <h1>My Astro Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
    </nav>
  </header>
  <main>{children}</main>
  <footer>
    <p>&copy; 2024 My Astro Website</p>
  </footer>
</body>
</html>
```

This code defines the default layout for our website, including a header, navigation menu, main content area, and footer.

### Step 6: Building and Previewing Your Website
Now that we have created our pages and layouts, let's build and preview our website. In your terminal, run the following command:

```bash
astro dev
```

This command starts a local development server, allowing you to preview your website at `http://localhost:3000` by default. Open your web browser and navigate to this URL to see your website in action.

### Step 7: Building for Production
Once you are satisfied with your website, it's time to build it for production. In your terminal, run the following command:

```bash
astro build
```

This command generates optimized static files for your website in the `dist/` directory.

### Step 8: Deploying Your Website
Finally, deploy your website to a hosting provider of your choice. You can use services like Vercel, Netlify, or GitHub Pages for easy deployment of static websites.

Congratulations! You have successfully built and deployed a static website using Astro Build. Feel free to further customize your website by adding more pages, styling, and functionality as needed.

### Conclusion
In this tutorial, we covered the basics of creating a static website with Astro Build. We learned how to create pages, layouts, build for production, and deploy our website to a hosting provider. With Astro, you can create fast, modern, and dynamic static websites with ease. Happy coding!