Giriş
Yıllar boyunca, bir web sitesini elle kodlamak, geliştiricilerin her bir HTML, CSS ve JavaScript satırı üzerinde tam kontrol sahibi olmak istediklerinde altın standarttı. Bu yöntem, eşsiz bir esneklik ve kod tabanına dair derin bir anlayış sunuyordu. Ancak web siteleri büyüdükçe – daha fazla sayfa, daha fazla içerik, daha fazla karmaşıklık – bu elle kodlama yaklaşımı bir bakım kabusuna dönüşebilir. Kendinizi gezinme çubuklarını kopyalayıp yapıştırırken, düzinelerce dosyada altbilgileri güncellerken ve varlıkları performans için manuel olarak optimize ederken bulursunuz.
How-To Geek makalesinin yazarı da tam olarak bu durumdaydı. En son 2018 civarında yeniden tasarlanan web siteleri, altı veya yedi kitabı desteklemekten çok daha fazlasını destekleyecek şekilde büyümüştü. Manuel yamalama ve eklemeler sürdürülemez hale gelmişti. Çözüm? Tüm siteyi, hız, basitlik ve daha iyi bir geliştirici deneyimi vaat eden modern bir statik site oluşturucu olan Astro ile yeniden inşa etmek.
Bu yazıda, bu geçiş yolculuğunu parçalara ayıracağız, arkasındaki teknik kararları keşfedecek ve aynı ilkeleri kendi projelerinize nasıl uygulayabileceğinizi göstereceğiz. İster kişisel bir blog, ister bir portföy veya bir dokümantasyon sitesi yönetiyor olun, buradaki dersler doğrudan uygulanabilir.
Enter Astro: The Static Site Generator That Respects Your Code
Astro is a relatively new static site generator that has quickly gained popularity among frontend developers. Its core philosophy is simple: ship zero JavaScript by default, and only load client-side scripts when absolutely necessary. This approach leads to incredibly fast page loads and a smaller carbon footprint.
But what makes Astro particularly appealing for rebuilding a hand-coded website is its component-based architecture. You can create reusable components for headers, footers, cards, and layouts, then compose them into pages. This eliminates the repetitive boilerplate that plagues hand-coded sites.
The Migration Process: Step by Step
Let's walk through the actual steps the author took to rebuild their site with Astro. We'll focus on the technical decisions and code examples that made the transition successful.
Step 1: Setting Up the Astro Project
First, you need to initialize a new Astro project. The official CLI makes this straightforward:
npm create astro@latest my-new-site
During setup, you'll be prompted to choose a template. For a content-heavy site, the "Blog" template is a great starting point. It includes Markdown support, RSS feed generation, and a basic layout.
Once the project is created, you can start customizing the structure. The key folders are:
src/pages/, Each file here becomes a route.src/layouts/, Reusable layout components.src/components/, Smaller UI components.public/, Static assets like images and fonts.
Step 2: Extracting the Layout
In a hand-coded site, every page likely contains the same <header>, <nav>, and <footer> markup. With Astro, you create a single layout component that wraps your page content.
---
// src/layouts/BaseLayout.astro
export interface Props {
title: string;
description?: string;
}
const { title, description } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
{description && <meta name="description" content={description} />}
<link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<slot /> <!-- Page content goes here -->
</main>
<footer>
<p>© 2025 My Site</p>
</footer>
</body>
</html>
Now every page can use this layout with just a few lines:
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="About Me" description="Learn more about the author.">
<h1>About Me</h1>
<p>I'm a frontend developer who loves Astro.</p>
</BaseLayout>
This single change eliminates hundreds of lines of duplicated HTML across the site.
Step 4: Reusable Components for UI Elements
Beyond layouts, Astro components let you encapsulate any UI pattern. For example, a book card component that displays a cover image, title, and description can be reused across multiple pages.
---
// src/components/BookCard.astro
export interface Props {
title: string;
cover: string;
description: string;
url: string;
}
const { title, cover, description, url } = Astro.props;
---
<article class="book-card">
<img src={cover} alt={title} loading="lazy" />
<h3>{title}</h3>
<p>{description}</p>
<a href={url}>Learn More</a>
</article>
<style>
.book-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1rem;
max-width: 300px;
}
.book-card img {
width: 100%;
height: auto;
border-radius: 4px;
}
</style>
Now you can use this component anywhere:
<BookCard
title="Astro for Beginners"
cover="/images/astro-book.jpg"
description="A comprehensive guide to building fast websites with Astro."
url="/books/astro-for-beginners"
/>
This component-based approach not only saves time but also ensures visual consistency across the site.
Performance Gains: What the Numbers Say
One of the most compelling reasons to migrate to Astro is performance. By shipping zero JavaScript by default, Astro pages load incredibly fast. Let's look at some typical improvements.
SEO and Accessibility Improvements
Rebuilding with Astro also opens the door to better SEO and accessibility practices. Here are some specific improvements you can implement.
Semantic HTML and Structured Data
Astro encourages writing semantic HTML because you're composing components rather than copying and pasting. You can easily add structured data (JSON-LD) to your pages for better search engine understanding.
---
// src/components/SEO.astro
const { title, description, url, image } = Astro.props;
---
"@context": "https://schema.org",
"@type": "WebPage",
"name": title,
"description": description,
"url": url,
"image": image,
})} />
Then include this component in your layout:
<SEO title={title} description={description} url={Astro.url} image="/og-image.jpg" />
Automatic Sitemap Generation
Astro has an official sitemap integration that generates a sitemap.xml file at build time. This is crucial for SEO because it helps search engines discover all your pages.
npm install @astrojs/sitemap
Then add it to your astro.config.mjs:
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com',
integrations: [sitemap()],
});
That's it. Every page in your src/pages/ directory will be included in the sitemap automatically.
Geliştirici Deneyimi: Neden Astro Kazanır?
Performansın ötesinde, Astro ile çalışmanın geliştirici deneyimi geçiş yapmak için önemli bir nedendir. İşte How-To Geek yazarının muhtemelen takdir ettiği bazı yönler.
Sıcak Modül Değiştirme (HMR)
Yerel olarak geliştirme yaparken, Astro'nun geliştirme sunucusu anında geri bildirim sağlar. Bir bileşeni değiştirin, tarayıcı sayfayı tamamen yeniden yüklemeden güncellenir. Bu, her düzenlemeden sonra tarayıcıyı manuel olarak yenilemeye kıyasla büyük bir üretkenlik artışıdır.
Entegrasyon Ekosistemi
Astro, popüler araçlar için büyüyen bir entegrasyon ekosistemine sahiptir:
- Tailwind CSS: Yardımcı program odaklı stillendirme için.
- React, Vue, Svelte: Astro içinde favori çerçeve bileşenlerinizi kullanın.
- MDX: React bileşenlerini doğrudan Markdown içine gömün.
- Görsel optimizasyonu: Otomatik yeniden boyutlandırma ve biçim dönüştürme.
- RSS beslemesi: İçerik koleksiyonlarınızdan RSS beslemeleri oluşturun.
Bu, tek bir çerçeveye kilitlenmediğiniz anlamına gelir. Her iş için en iyi aracı kullanabilirsiniz.
TypeScript Desteği
Astro, birinci sınıf TypeScript desteğine sahiptir. Bileşenleriniz için prop arayüzleri tanımlayabilirsiniz, bu da hataları çalışma zamanı yerine derleme zamanında yakalar.
---
interface Props {
title: string;
date: Date;
excerpt: string;
tags: string[];
}
const { title, date, excerpt, tags } = Astro.props;
---
<article>
<h2>{title}</h2>
<time datetime={date.toISOString()}>{date.toLocaleDateString()}</time>
<p>{excerpt}</p>
<ul>
{tags.map(tag => <li>{tag}</li>)}
</ul>
</article>
Bu, tür hatalarını erken yakalar ve kodunuzu daha sürdürülebilir kılar.
Yaygın Tuzaklar ve Bunlardan Nasıl Kaçınılır
Elle kodlanmış bir siteden Astro'ya geçiş genellikle sorunsuzdur, ancak dikkat edilmesi gereken birkaç yaygın tuzak vardır.
1. Bileşen Ağacını Aşırı Mühendislik
Tek bir paragraf için bile her şey için bir bileşen oluşturmak caziptir. Ancak bu gereksiz karmaşıklığa yol açabilir. En tekrarlanan öğelerle (düzen, gezinme, kartlar) başlayın ve yalnızca bir desenin üç veya daha fazla kez tekrarlandığını gördüğünüzde bileşenler oluşturun.
2. Derleme Sürecini Görmezden Gelmek
Astro statik bir site oluşturur, ancak yine de derleme sürecini yapılandırmanız gerekir. astro.config.mjs dosyanızın site haritası için doğru site URL'sini içerdiğinden ve görsel optimizasyon ayarlarınızın ihtiyaçlarınızla eşleştiğinden emin olun.
3. Yapılandırılmış Veriler için İçerik Koleksiyonlarını Kullanmamak
Bir öğe listeniz (kitaplar, blog yazıları, portföy parçaları) varsa, İçerik Koleksiyonları'nı kullanın. Tür güvenliği, otomatik sayfalama ve kolay filtreleme sağlarlar. Öğeleri bir bileşende manuel olarak listelemek geriye doğru bir adımdır.
4. 404 Sayfalarını Unutmak
Elle kodlanmış sitelerde genellikle özel bir 404 sayfası bulunur. Astro'da, 404.astro dizininde bir src/pages/ dosyası oluşturursunuz. Var olmayan herhangi bir rota için otomatik olarak sunulur.
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Page Not Found">
<h1>404</h1>
<p>Sorry, the page you're looking for doesn't exist.</p>
<a href="/">Go back home</a>
</BaseLayout>
Gerçek Dünya Sonuçları: Yazar Ne Başardı?
How-To Geek makalesi, geçiş sürecine samimi bir bakış sunuyor. Yazar sadece siteyi yeniden inşa etmekle kalmadı, aynı zamanda içerik yapısını iyileştirdi, yeni özellikler ekledi ve performans için optimize etti.
Sonuç: Astro, Elle Kodlanmış Siteniz İçin Uygun mu?
Birkaç sayfanın ötesine geçmiş elle kodlanmış bir web sitesi yönetiyorsanız, Astro'ya geçiş yapmak muhtemelen akıllıca bir harekettir. Faydaları açıktır:
- Daha hızlı geliştirme: Yeniden kullanılabilir bileşenler ve Markdown içeriği tekrarlanan işleri azaltır.
- Daha iyi performans: Varsayılan olarak sıfır JavaScript, ışık hızında sayfalar sağlar.
- İyileştirilmiş SEO: Otomatik site haritaları, yapılandırılmış veriler ve optimize edilmiş görseller arama sıralamalarını yükseltir.
- Daha kolay bakım: Bir bileşeni bir kez güncelleyin, her yerde değişsin.
Geçiş sürecinin kendisi basittir. Yeni bir Astro projesi kurarak başlayın, düzeninizi bir bileşene çıkarın, ardından sayfalarınızı Markdown veya Astro dosyalarına dönüştürün. Yapılandırılmış veriler için İçerik Koleksiyonları'nı kullanın ve görseller, SEO ve daha fazlası için entegrasyon ekosisteminden yararlanın.
Astro sadece bir araç değil, bir felsefedir. Elle kodlanmış sitelerin işçiliğine saygı duyarken, modern web geliştirmenin gerektirdiği otomasyonu ve ölçeklenebilirliği sağlar. Kopyala-yapıştır döngüsünü geride bırakmaya hazırsanız, Astro'yu deneyin.
