Astro ile Modern Blog Oluşturma

Astro, içerik odaklı web siteleri için ideal bir framework. Zero JavaScript varsayılan yaklaşımı ile kusursuz performans sunar.

Neden Astro?

Astro’yu diğer frameworklerden ayıran özellikler:

1. Zero JS by default: Sayfalarınız saf HTML olarak sunulur
2. Island Architecture: Sadece interaktif bölümler JS yükler
3. Content Collections: Tip-güvenli içerik yönetimi
4. Çoklu framework desteği: React, Vue, Svelte birlikte kullanılabilir

Proje Kurulumu

Yeni bir Astro projesi oluşturmak çok basit:

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

Content Collections

Astro’nun en güçlü özelliklerinden 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 yapıyla tüm içerikleriniz build-time’da validate edilir.

Cloudflare Pages ile Deploy

Astro projenizi Cloudflare Pages’e deploy etmek için:

1. GitHub’a push edin
2. Cloudflare Dashboard’da yeni bir Pages projesi oluşturun
3. Build komutunu npm run build olarak ayarlayın
4. Build çıktı dizinini dist olarak belirleyin

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

SEO Optimizasyonu

Astro’da SEO için temel adımlar:

• Meta tagleri: Her sayfada title ve description
• Open Graph: Sosyal medya paylaşımları için
• Sitemap: @astrojs/sitemap entegrasyonu
• RSS Feed: @astrojs/rss ile otomatik
• JSON-LD: Structured data ile arama motorlarını bilgilendirin

Astro, modern web geliştirmenin en iyi uygulamalarını kolayca uygulamanızı sağlar. Hızlı, güvenli ve SEO-uyumlu bir blog için mükemmel bir seçimdir.