Speed & SEO: Building Blazing Fast Static Blogs with Astro.js
সার্চ ইঞ্জিন অপ্টিমাইজেশন (SEO) এবং ব্লগিং এর ক্ষেত্রে লোডিং স্পিড সবচেয়ে গুরুত্বপূর্ণ ফ্যাক্টর। Next.js বা সাধারণ React ফ্রেমওয়ার্ক চমৎকার হলেও সেগুলো ব্রাউজারে প্রচুর জাভাস্ক্রিপ্ট (JavaScript) ফাইল পাঠায়, যা মোবাইল ডিভাইসে সাইট স্লো করে দেয়। এই সমস্যার আধুনিক সলিউশন হলো **Astro.js**।
অ্যাস্ট্রো এর মূল দর্শন হলো **"Zero-JS by default"** এবং **"Island Architecture"**। এটি সার্ভার সাইডে সম্পূর্ণ কোডকে পিওর স্ট্যাটিক এইচটিএমএল-এ কনভার্ট করে ফেলে, ফলে ব্রাউজারে কোনো অতিরিক্ত স্ক্রিপ্ট লোড হয় না এবং গুগল লাইটহাউস স্কোরে ১০০/১০০ পারফরম্যান্স নিশ্চিত হয়।
১. নতুন কন্টেন্ট কালেকশন স্ট্রাকচার
অ্যাস্ট্রোতে টাইপ-সেফ ব্লগ পোস্ট ম্যানেজ করার জন্য টাইপস্ক্রিপ্ট স্কিমা ব্যবহার করা হয়। আপনার প্রোজেক্টের src/content/config.ts ফাইলে নিচের স্ট্রাকচারটি ডিফাইন করুন:
import { z, defineCollection } from 'astro:content';
const blogCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.date(),
author: z.string().default('Md. Abdullah (Ahyan)'),
tags: z.array(z.string())
}),
});
export const collections = {
'blog': blogCollection,
};
ধাপ ২: ডাইনামিক রাউটিং লেআউট (`[slug].astro`)
সবগুলো মার্কডাউন (.md) পোস্ট ফাইল রিড করে স্বয়ংক্রিয়ভাবে এসইও ফ্রেন্ডলি পেজ জেনারেট করার জন্য src/pages/blog/[slug].astro ফাইলে নিচের কোড স্ট্রাকচারটি প্রয়োগ করুন:
---
import { getCollection } from 'astro:content';
// প্রতিটি পোস্টের জন্য ইউনিক ইউআরএল স্ল্যাগ জেনারেট করা
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
return blogEntries.map(entry => ({
params: { slug: entry.slug }, props: { entry },
}));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{entry.data.title} | Ahyan Creations</title>
<meta name="description" content={entry.data.description} />
</head>
<body style="background: #0d1117; color: #fff;">
<article style="max-width: 800px; margin: 0 auto; padding: 2rem;">
<h1>{entry.data.title}</h1>
<p>Published on: {entry.data.pubDate.toDateString()}</p>
<hr />
<!-- কন্টেন্ট ইনজেকশন পয়েন্ট -->
<Content />
</article>
</body>
</html>
ফ্রি হোস্টিং এডভান্টেজ: তৈরি হওয়া এই স্ট্যাটিক ফাইলগুলো আপনি কোনো রানটাইম সার্ভার কস্ট ছাড়াই সরাসরি Vercel, Cloudflare Pages অথবা GitHub Pages এর ফ্রি টিয়ারে হোস্ট করে প্রতিমাসে লাখ লাখ ট্রাফিক অনায়াসে হ্যান্ডেল করতে পারবেন।