Tutorial: Building a Website with Astro Build

Tutorial: Building a Website with Astro Build

Pro Tip. Download the Astro Starter Template.
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:

Node.js and npm (Node Package Manager)
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:



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:



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:



---
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:



---
: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:



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:



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!

Blog