Astro ile Modern Blog Olusturma

Astro, icerik odakli web siteleri icin ideal bir framework. Zero JavaScript varsayilan yaklasimi ile kusursuz performans sunar.

Neden Astro?

Astro’yu diger frameworklerden ayiran ozellikler:

1. Zero JS by default: Sayfalariniz saf HTML olarak sunulur
2. Island Architecture: Sadece interaktif bolumler JS yukler
3. Content Collections: Tip-guvenli icerik yonetimi
4. Coklu framework desteigi: React, Vue, Svelte birlikte kullanilabilir

Proje Kurulumu

Yeni bir Astro projesi olusturmak cok basit:

npm create astro@latest my-blog
cd my-blog
npm install
npm run dev

Content Collections

Astro’nun en guclu ozelliklerinden biri Content Collections:

// content.config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishDate: z.coerce.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

Bu yapiyla tum icerikleriniz build-time’da validate edilir.

Cloudflare Pages ile Deploy

Astro projenizi Cloudflare Pages’e deploy etmek icin:

1. GitHub’a push edin
2. Cloudflare Dashboard’da yeni bir Pages projesi olusturun
3. Build komutunu npm run build olarak ayarlayin
4. Build cikti dizinini dist olarak belirleyin

# wrangler.toml
name = "my-blog"
pages_build_output_dir = "./dist"

SEO Optimizasyonu

Astro’da SEO icin temel adimlar:

• Meta tagleri: Her sayfada title ve description
• Open Graph: Sosyal medya paylasimlari icin
• Sitemap: @astrojs/sitemap entegrasyonu
• RSS Feed: @astrojs/rss ile otomatik
• JSON-LD: Structured data ile arama motorlarini bilgilendirin

Astro, modern web gelistirmenin en iyi uygulamalarini kolayca uygulamanizi saglar. Hizli, guvenli ve SEO-uyumlu bir blog icin mukemmel bir secimdir.