Astro ile Kişisel Blog Kurmak

Table of contents

Open Table of contents

• Astro Neden?
• Kurulum
• Content Collections
• MDX Desteği
• Deployment
• Sonuç

Astro Neden?

Astro’nun diğer frameworklerden farkı Islands Architecture adını verdiği yaklaşım. Sayfanızdaki her bileşen varsayılan olarak statik HTML’e derlenir. JavaScript sadece ihtiyaç duyulan interaktif bileşenler için yüklenir.

Bu da şu anlama geliyor: daha az JavaScript = daha hızlı site.

# Lighthouse Score karşılaştırması (yaklaşık)
Next.js Blog:  Performance 75-85
Astro Blog:    Performance 95-100

Kurulum

Yeni bir Astro projesi başlatmak çok basit:

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

Kurulum sihirbazı size tema seçeneği sunar. Blog için blog şablonunu seçebilirsiniz veya sıfırdan başlayabilirsiniz.

Content Collections

Astro’nun en güçlü özelliklerinden biri Content Collections. Blog yazılarınız için tip güvenliği sağlıyor:

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Artık getCollection("blog") çağırdığınızda tüm yazılarınız tam olarak tiplenmiş gelir.

MDX Desteği

MDX ile Markdown içinde React componentleri kullanabilirsiniz:

import MyChart from "@/components/MyChart";

## Veriler

İşte geçen ayki trafik verileri:

<MyChart data={[10, 20, 15, 30]} />

Görüldüğü gibi Nisan'da ciddi bir artış var.

Deployment

Vercel’e deploy etmek için vercel.json dosyası oluşturup framework’ü belirtmeniz yeterli:

{
  "framework": "astro",
  "buildCommand": "npm run build",
  "outputDirectory": "dist"
}

Sonuç

Astro, kişisel blog için ideal bir seçim. Hızlı, esnek ve geliştirmesi keyifli. TypeScript desteği, MDX entegrasyonu ve mükemmel performansıyla birkaç saatte tam işlevli bir blog kurmak mümkün.

Projenin kaynak koduna GitHub’dan ulaşabilirsiniz.