آشنایی با Astro: انتخاب من برای ساخت بلاگ

وصال

وصال

منتشر شده در: 22 بهمن 1403

#بلاگ نویسی#جاوااسکریپت#فرانت اند#Astro#وب استاتیک#سئو#بلاگ#دی بای دو#روزمره برنامه نویسی#island architecture#ری اکت#ویو#سالید#سوولت

تو پست قبلی گفتم که تصمیم گرفتم تجربیاتم رو به اشتراک بذارم و حالا می‌خوام از خود این بلاگ و تکنولوژی که باهاش ساخته شده براتون بگم. این بلاگ با Astro ساخته شده و امروز می‌خوام بگم چرا این انتخاب رو کردم.

Astro چیه؟

Astro یک فریمورک مدرن برای ساخت وبسایت‌های استاتیکه که در سال ۲۰۲۱ معرفی شد. برخلاف فریمورک‌های سنتی مثل Next.js یا Gatsby، Astro با یک فلسفه‌ی متفاوت طراحی شده: “کمترین JavaScript ممکن”!

چرا Astro رو انتخاب کردم؟

برای این بلاگ، چند تا اولویت مهم داشتم:

  • سرعت بالا: می‌خواستم بلاگم سریع لود بشه و تجربه خوبی به کاربر بده
  • سادگی در توسعه: نیاز داشتم که بتونم راحت پست‌های جدید اضافه کنم
  • SEO: می‌خواستم محتوام توی موتورهای جستجو خوب دیده بشه
  • انعطاف‌پذیری: دوست داشتم بتونم در آینده قابلیت‌های جدید اضافه کنم

Astro همه این نیازها رو به بهترین شکل برآورده می‌کنه.

آشنایی با Astro: انتخاب من برای ساخت بلاگ

ویژگی‌های جذاب Astro

1. Islands Architecture

یکی از جالب‌ترین ویژگی‌های Astro، معماری Islands هست. این یعنی می‌تونیم فقط بخش‌هایی از صفحه که نیاز به تعامل دارن رو با JavaScript پویا کنیم. مثلاً توی همین بلاگ، بخش ری اکشن ها با JavaScript کار می‌کنه ولی بقیه صفحه کاملاً استاتیکه.

2. پشتیبانی از Markdown

Astro پشتیبانی فوق‌العاده‌ای از Markdown داره. می‌تونید پست‌های بلاگ رو با Markdown بنویسید و از همه امکانات استاندارد مثل هدینگ‌ها، لیست‌ها، کد بلاک‌ها و غیره استفاده کنید. اما چیزی که Astro رو خاص می‌کنه اینه که:

  • می‌تونید از MDX استفاده کنید و کامپوننت‌های React رو داخل محتوای Markdown بیارید
  • می‌تونید استایل‌های دلخواه به محتوای Markdown اضافه کنید
  • پشتیبانی از Remark و Rehype plugins برای شخصی‌سازی پردازش Markdown

مثلاً من توی همین بلاگ از Markdown برای نوشتن پست‌ها و MDX برای بخش‌هایی که نیاز به تعامل دارن استفاده می‌کنم.

3. انعطاف‌پذیری در استفاده از فریمورک‌ها

یکی از ویژگی‌های منحصر به فرد Astro اینه که می‌تونید از کامپوننت‌های فریمورک‌های مختلف استفاده کنید:

  • می‌تونید از کامپوننت‌های React استفاده کنید
  • از کامپوننت‌های Vue پشتیبانی می‌کنه
  • کامپوننت‌های Svelte هم می‌تونید استفاده کنید
  • حتی می‌تونید از Solid.js هم استفاده کنید

این یعنی محدود به یک فریمورک نیستید و می‌تونید برای هر بخش از سایت، از فریمورکی که بیشتر باهاش راحتید استفاده کنید. مثلاً من برای بخش ری اکشن ها از React استفاده کردم. اما میشه از کامپوننت های بقیه فریمورک ها اهم استفاده کرد. اما پیشنهاد میکنم قفط از کامپوننت های یه فریمورک توی پروژه Astro تون استفاده کنید 😁

4. سینتکس آشنا

اگه با React کار کرده باشید، سینتکس Astro براتون خیلی آشناست. این باعث میشه منحنی یادگیریش(learning curve) خیلی ملایم باشه.

تجربه‌ی من با Astro

من که ظاهر بلاگ رو به کمک ابزار هوش مصنوعی بولت طراحی و پیاده سازی کردم، مواردی هم که ادیت کردم واقعا چالش خاصی نداشت. ایده جالبی که دارم اینه که اگر بخوام یه ابزار فرانت اندی رو معرفی کنم میتونم به یه کامپوننت یا چیزی مشابه به اون رو توی خود مطلبم پیاده سازی کنم و نمونه ش رو به نمایش بذارم!‌ در نهایت به طور کلی پیشنهاد میکنم حداقل به بار تستش کنید.

نتیجه‌گیری

Astro برای من انتخاب خیلی خوبی بود. سرعت بالا، SEO خوب و تجربه‌ی توسعه‌ی عالی‌ای که داره، دقیقاً همون چیزی بود که دنبالش بودم. امکان استفاده از Markdown و MDX برای نوشتن محتوا و انعطاف‌پذیری در استفاده از فریمورک‌های مختلف، کار رو خیلی راحت‌تر کرده. اگه شما هم می‌خواید یک بلاگ یا وبسایت استاتیک بسازید، حتماً Astro رو در نظر بگیرید.

در پست‌های بعدی، بیشتر درباره جزئیات فنی و نحوه پیاده‌سازی بخش‌های مختلف بلاگ خواهم نوشت.


نظرتون درباره Astro چیه؟ اگه تجربه‌ای در استفاده از Astro دارید، خوشحال میشم در بخش نظرات به اشتراک بذارید.