Build your first Astro Blog: A Step-by-Step Tutorial

Build your first Astro Blog: A Step-by-Step Tutorial

Astro is a modern web framework for building fast, content-driven websites. In my experience, it strikes a great balance between power and simplicity. This tutorial, based on the excellent official Astro documentation, will walk you through creating your first blog.

1. Setting Up Your Environment

First things first, you need to get your development environment ready. You’ll need Node.js (version 18.14.1 or higher).

You can create a new Astro project with the following command in your terminal:

# create a new project with npm
npm create astro@latest

This command will kick off a setup wizard to help you configure your new project.

2. Creating Your First Pages

Astro uses a file-based routing system. Any .astro, .md, or .mdx file in the src/pages/ directory becomes a page on your site.

Create an about.astro file in src/pages/ to see this in action:

---

---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>About Me</title>
	</head>
	<body>
		<h1>About Me</h1>
	</body>
</html>

Now, when you run the dev server (npm run dev) and navigate to /about, you’ll see your new page.

3. Building with Components

Components are the building blocks of any Astro site. They are reusable units of HTML, CSS, and JavaScript.

Create a Header.astro component in a new src/components/ directory:

---

---

<header>
	<h2>My Astro Blog</h2>
</header>

You can then import and use this component in any of your pages:

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

<html>
	<body>
		<Header />
		<h1>Welcome to my blog!</h1>
	</body>
</html>

4. Creating Blog Posts

Blog posts are typically written in Markdown. Astro has built-in support for Markdown and MDX. Create a new directory src/pages/posts/ and add a file like post-1.md:

---
layout: '../../layouts/BlogPost.astro'
title: 'My First Blog Post'
pubDate: 2025-09-27
description: 'This is the first post on my new Astro blog.'
author: 'Astro Learner'
---

Welcome to my blog! This is my first post.

Notice the layout frontmatter property. This points to a layout component that defines the structure for your blog posts.

5. Deploying Your Site

Once you’re ready to share your blog with the world, you can build it for production:

npm run build

This will create a dist/ directory with the optimized, static files for your site. You can deploy this folder to any static hosting provider like Netlify, Vercel, or GitHub Pages.

This is just a quick overview, but it covers the core concepts of building with Astro. I find the developer experience to be incredibly smooth, and the performance of the final sites is outstanding.

Source: This tutorial is a summary of the official Astro Blog Tutorial.

#Tutorial #Web Development

Related Posts