diff --git a/src/model/howto.ts b/src/model/howto.ts
index e956fa9..a17071a 100644
--- a/src/model/howto.ts
+++ b/src/model/howto.ts
@@ -157,7 +157,6 @@ const content = async (str: string, filters: FilterFunction[] = default_filters)
 
 const to_github = async (item: IHowto) => {
   const itemDir = item_path(item)
-  mkdir(itemDir)
 
   // Create README.md with all content
   const readmeContent = [
@@ -233,6 +232,55 @@ const to_mdx = async (item: IHowto) => {
   write(path.join(itemDir, 'index.mdx'), mdxContent)
 }
 
+const to_astro = async (item: IHowto) => {
+  const itemDir = item_path(item)
+  mkdir(itemDir)
+
+  // Create index.astro with all content
+  const astroContent = [
+    '---',
+    `import { Image } from 'astro:assets'`,
+    `import Layout from '../../layouts/Layout.astro'`,
+    '',
+    `const { frontmatter } = Astro.props`,
+    '',
+    `const title = "${item.title}"`,
+    `const description = "${item.description}"`,
+    `const tags = ${JSON.stringify(item.tags)}`,
+    `const category = "${item.category?.label || 'uncategorized'}"`,
+    `const difficulty = "${item.difficulty_level}"`,
+    `const time = "${item.time}"`,
+    `const location = "${item.user?.geo ? `${item.user.geo.city ? `${item.user.geo.city}, ` : ''}${item.user.geo.countryName || ''}` : ''}"`,
+    '---',
+    '',
+    `<Layout title={title} description={description}>`,
+    '  <article class="max-w-4xl mx-auto px-4 py-8">',
+    `    <h1 class="text-4xl font-bold mb-8">{title}</h1>`,
+    '',
+    item.cover_image ? `    <Image src={import('./${item.cover_image.name}')} alt={title} class="w-full rounded-lg shadow-lg mb-8" />` : '',
+    '',
+    `    <div class="prose prose-lg max-w-none mb-8">`,
+    `      <p>{description}</p>`,
+    item.user?.geo ? `      <p class="text-gray-600">User Location: ${item.user.geo.city ? `${item.user.geo.city}, ` : ''}${item.user.geo.countryName || ''}</p>` : '',
+    `    </div>`,
+    '',
+    '    <div class="space-y-12">',
+    ...item.steps.map((step, index) => [
+      `      <section class="step-${index + 1}">`,
+      `        <h2 class="text-2xl font-semibold mb-4">Step ${index + 1}: ${step.title}</h2>`,
+      `        <div class="prose prose-lg max-w-none mb-6">`,
+      `          <Fragment set:html={step.text} />`,
+      `        </div>`,
+      // Add step images if any using Astro's Image component
+      ...step.images.map(img => `        <Image src={import('./${img.name}')} alt="${img.name}" class="w-full rounded-lg shadow-md mb-6" />`)
+    ].join('\n')),
+    '    </div>',
+    '  </article>',
+    '</Layout>'
+  ].filter(Boolean).join('\n')
+  write(path.join(itemDir, 'index.astro'), astroContent)
+}
+
 const complete = async (item: IHowto) => {
   if (!HOWTO_ANNOTATIONS) {
     // return item
@@ -273,7 +321,8 @@ const complete = async (item: IHowto) => {
 
   await to_github(item)
   await to_mdx(item)
-
+  await to_astro(item)
+  
   return item
 }