دوره «ساخت سایت‌های محتوایی با Astro و Vue.js» به شما نشان می‌دهد چگونه یک وبسایت استاتیک را با ترکیبی از بهترین ویژگی‌های Static Site Generation و Client-Side Hydration بسازید. در طول دوره، مباحثی مانند راه‌اندازی پروژه Astro، یکپارچه‌سازی Vue.js برای کامپوننت‌های پویا، مدیریت محتوا با Markdown و حتی افزودن قابلیت‌های پیچیده‌تر مانند جستجو و فیلتراسیون آموزش داده می‌شود.

مدرس دوره با مثال‌های عملی و توضیحات گام به گام، دانشجویان را از مبانی تا پیاده‌سازی یک سایت کامل هدایت می‌کند. همچنین تمرین‌ها و پروژه‌های کوچک به شما کمک می‌کنند مفاهیم را عمقی‌تر درک کنید و بعد از پایان دوره به راحتی در پروژه‌های واقعی از آنها بهره ببرید.

• مقدمه و نصب ابزارها: معرفی Astro، Vue.js و محیط توسعه
• ساختار پروژه Astro و مفهوم Island Architecture
• ایجاد صفحات استاتیک و بخش‌های مشترک با Layoutها
• مدیریت محتوا با Markdown و ساخت Content Collections
• ادغام Vue.js برای رندر کامپوننت‌های تعاملی
• بهینه‌سازی SEO، metadata و Open Graph
• Lazy Loading تصاویر و بهبود عملکرد
• افزودن ویژگی جستجو و فیلتراسیون محتوا
• استقرار سایت روی Netlify، Vercel و GitHub Pages
• استفاده از API‌های خارجی و Fetch در Astro

• راه‌اندازی و پیکربندی پروژه Astro با Yarn یا npm
• ساخت صفحات با سیستم فایل‌بیس روتینگ (File-based Routing)
• تبدیل Markdown به کامپوننت‌های Vue و انتشار محتوا
• Principles استفاده از Partial Hydration برای کاهش حجم جاوااسکریپت
• افزایش سرعت بارگذاری با تکنیک‌های Pre-rendering و Image Optimization
• استفاده از Slotها و Scoped CSS در Vue Components
• پیاده‌سازی SEO پایه تا پیشرفته (schema.org، meta tags)
• نحوه استقرار سریع و ایمن در سرویس‌های ابری معاصر

• آشنایی پایه با HTML، CSS و مفاهیم Responsive Design
• تسلط نسبی بر JavaScript ES6 و مفاهیم ماژولار
• آشنایی اولیه با Vue.js (Components و Props)
• نصب Node.js و مدیریت بسته‌ها با npm یا Yarn
• آشنایی با خط فرمان (Terminal) و Git برای کنترل نسخه

استفاده همزمان از Astro و Vue.js به شما این امکان را می‌دهد که:

• به سرعت صفحات استاتیک بسازید و در عین حال قابلیت‌های داینامیک را حفظ کنید.
• حجم خروجی جاوااسکریپت را به حداقل برسانید و Time to Interactive را کاهش دهید.
• با بهترین عملکرد SEO و بارگذاری سریع در نتایج موتورهای جستجو ظاهر شوید.
• قابلیت نگهداری و توسعه آسان را برای تیم‌های کوچک و بزرگ فراهم کنید.

در طول دوره چند پروژه عملی خواهید داشت از جمله:

• وبلاگ شخصی: ذخیره نوشته‌ها با Markdown و تولید آرشیو پست‌ها.
• تالار گفتمان ساده: فراخوانی داده‌ها از یک API خارجی و نمایش کامنت‌ها با Vue.
• بخش عناوین داینامیک: استفاده از Astro.fetchContent() برای بارگذاری مطالب جدید بدون نیاز به بازسازی کامل.
• کامپوننت گالری تصاویر: Lazy loading و Lightbox ساده با Vue برای مشاهده تصاویر.

این پروژه‌ها به شما کمک می‌کنند تفاوت SSR، SSG و CSR را در عمل ببینید و انتخاب درست را در پروژه‌های واقعی تجربه کنید.

• Astro Islands: بارگذاری کامپوننت‌های Vue فقط در بخش‌های لازم.
• Content Collections: مدیریت خودکار فایل‌های Markdown با دسته‌بندی.
• Image Optimization: استفاده از ریسایز و Lazy Loading داخلی Astro.
• Deploy Workflow: یکپارچه‌سازی GitHub Actions با Netlify/Vercel.
• SEO Best Practices: تولید خودکار sitemap و robots.txt.