THIS IS THE MAIN FILE FOR THE FOLDER - IT’S THE INDEX.MD

9-10 Klasse index.md

Astro is a modern static site generator that allows you to build fast websites with your favorite JavaScript frameworks. In this post, we’ll explore the basics of getting started with Astro.

Link zu INTERNAL FILE

An Internal Link to Kongruenzsätze

Why Choose Astro?

Astro provides several key benefits:

• Zero JavaScript by default: Only ship JavaScript when you need it
• Component Islands: Use any UI framework (React, Vue, Svelte, etc.)
• Built-in performance: Automatic optimization and lazy loading
• Developer experience: TypeScript support, hot reload, and more

This will guide you through the setup process and create a new project with the latest Astro features.

Next Steps

Once you have your project set up, you can:

1. Add pages in the src/pages/ directory
2. Create components in src/components/
3. Style your site with CSS or your preferred styling solution
4. Deploy to platforms like Netlify, Vercel, or GitHub Pages

Stay tuned for more Astro tutorials!

How to Fix This?

Option 1: Use Public Directory for Hero Images

• Place hero images in public/images/blog/
• Reference them in frontmatter as /images/blog/image-1.webp
• Use a regular <img src={post.data.heroImage} /> (not optimized, but works for dynamic content)

Option 2: Use Astro Image for Static Pages Only

• If you want optimization, you must statically import the image in each page/component.
• This is not possible for dynamic [post].astro routes unless you predefine all possible imports (which is not scalable).

Option 3: Use Markdown for Inline Images

• For images inside markdown, just use the markdown syntax:
  ![Alt text](./image-1.webp)
  This works, but is not optimized.

---

What Should You Do?

If you want dynamic hero images for each post and are using content collections:

• Use the public directory for hero images and reference them with an absolute path in frontmatter.
• Use a regular <img src={post.data.heroImage} alt={post.data.title} /> in your layout or [post].astro.

If you want full optimization with Astro Image:

• You must statically import the image, which only works for static pages, not dynamic [post].astro routes.