Create a static generated blog with astro

First init a new project with astro.

mkdir astro-blog
cd astro-blog
npm init astro
Need to install the following packages:
Ok to proceed? (y) y
# Choose the "Generic" template

Add the following file to the project:


export async function createCollection() {
const posts = Astro.fetchContent('./posts/*.md')
.sort((a, b) => a.title.localeCompare(b.title));
return {
route: '/posts',
props: () => {
return { posts };

## const {posts} = Astro.props;

<html lang="en">
    { => {
      return <a url={post.url}>${post.title}</a>;

Create a new file src/layouts/posts.astro with the following content:

const { content } = Astro.props;

<html lang="en">
    <article class="prose">
      <slot />

Create a new file src/pages/posts/ with the following content:

title: Hello World
layout: ../../layouts/post.astro

# Hello World

This is an example blog post

Now run the project and you should see a list of blog posts at http://localhost:3000/posts

npm run start
# open manually http://localhost:3000/posts