Astro is a blazing-fast static site generator that lets you create beautiful, responsive websites with ease. It's perfect for personal blogs, portfolio websites, and even small business websites.
In this blog post, we'll show you how to get started with Astro. We'll cover everything from installing Astro to creating your first website.
Installing Astro
The first step is to install Astro and get it running locally. You can do this with the following command:
npm create astro@latest
Once Astro is installed, you can start your new Astro project with the following command:
npm run dev
If all goes well, Astro should now be serving your project on http://localhost:3000!
Creating your first Astro website
Now you can start editing your site. Open src/pages/index.astro. Your index.astro file should look like this:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content="{Astro.generator}" />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
Adding pages to your website
You can add pages to your website by creating new files in the src/pages directory. For example, if you want to add an about page, you would create a file called about.astro. In about.astro, you can add any HTML, CSS, and JavaScript that you want. For example, you could add the following code to create a simple about page:
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>About Me</h1>
<p>
I am a developer who loves to build websites. I am also a big fan of
Astro, and I think it is a great tool for creating static websites.
</p>
</body>
</html>
Your about page would now be at http://localhost:3000/about
Astro uses a file-based routing system, so any files created in the src/pages folder will correspond to a page on your site. You can read the documentation on routing here
Conclusion
Astro excels at creating very fast, server-rendered websites. To learn more, head over to the official docs to see what else you can do with Astro. docs.astro.build