شروع کار با آسترو (Astro): راهنمای جامع راه‌اندازی، گیت‌هاب و دپلوی (بخش اول)

اگر تا به حال با فریم‌ورک‌های سنگین فرانت‌اند کار کرده باشید یا به دنبال راهی سریع‌تر، تمیزتر و کم‌حجم‌تر برای توسعه وب‌سایت‌ها و وبلاگ‌ها هستید، آسترو (Astro) دقیقاً همان چیزی است که به آن نیاز دارید. آسترو یک فریم‌ورک مدرن برای ساخت وب‌سایت‌های محتوا-محور است که با فلسفه «صفر کیلوبایت جاوااسکریپت اضافی» طراحی شده است.

در این مقاله، قصد داریم قدم‌به‌قدم از صفر شروع کنیم: محیط توسعه را آماده کنیم، اولین پروژه آسترو را روی سیستم خود بالا بیاوریم، آن را به گیت‌هاب متصل کنیم و در نهایت روی بستر ابری Netlify دپلوی (منتشر) نماییم.

مقدمه: پیش‌نیازهای شروع کار با آسترو

پیش از آنکه دستورات ترمینال را اجرا کنید، مطمئن شوید ابزارهای زیر روی سیستم شما نصب هستند:

Node.js: نسخه 18.14.1 یا بالاتر (پیشنهاد می‌شود همیشه از نسخه LTS استفاده کنید).
یک ویرایشگر کد مناسب: مثل VS Code که ابزار اصلی توسعه‌دهندگان وب است.
حساب کاربری گیت‌هاب (GitHub) و آشنایی نسبی با دستورات گیت.
حساب کاربری Netlify (رایگان) برای انتشار سریع سایت.

گام اول: ساخت اولین پروژه آسترو

ترمینال (یا کامند پرامپت) خود را باز کرده و دستور زیر را اجرا کنید تا ویزارد ساخت پروژه آسترو اجرا شود:

npm create astro@latest

پس از اجرای این دستور، ویزارد نصب سوالاتی از شما می‌پرسد:

مسیر پروژه: پوشه‌ای که می‌خواهید پروژه در آن ساخته شود را مشخص کنید (مثلاً my-astro-blog).
نوع قالب (Template): برای شروع یادگیری، گزینه Include a sample blog یا قالب مینیمال را انتخاب کنید تا ساختار استاندارد یک وبلاگ آماده را در اختیار داشته باشید.
نصب وابستگی‌ها (Dependencies): گزینه yes را بزنید تا پکیج‌ها نصب شوند.
مقداردهی اولیه Git: گزینه yes را انتخاب کنید تا گیت روی پروژه فعال شود.

پس از پایان نصب، با دستورات زیر وارد پوشه پروژه شده و سرور توسعه محلی (Development Server) را روشن کنید:

cd my-astro-blog
npm run dev

حالا آدرس http://localhost:4321 را در مرورگر خود باز کنید. تبریک می‌گوییم! شما اولین سایت آسترونی خود را راه‌اندازی کردید.

گام دوم: بررسی ساختار فایل‌ها در آسترو

پروژه را در VS Code باز کنید. ساختار فایل‌ها در آسترو بسیار تمیز، بصری و استاندارد است:

my-astro-blog/
├── public/          # فایل‌های ثابت مثل تصاویر، فونت‌ها و favicon
├── src/             # قلب تپنده پروژه (کدها، صفحات و کامپوننت‌ها)
│   ├── components/  # کامپوننت‌های قابل استفاده مجدد (مثل هدر و فوتر)
│   ├── layouts/     # قالب‌های کلی صفحات
│   └── pages/       # فایل‌های صفحه (سیستم مسیریابی مبتنی بر فایل)
├── astro.config.mjs # فایل تنظیمات اصلی آسترو
└── package.json     # مدیریت پکیج‌ها و اسکریپت‌ها

نکته جذاب در آسترو این است که مسیردهی (Routing) کاملاً خودکار است؛ هر فایلی که داخل پوشه src/pages/ قرار دهید (مثل about.astro) به طور خودکار به یک آدرس در سایت تبدیل می‌شود (yoursite.com/about).

گام سوم: ذخیره و مدیریت پروژه در گیت‌هاب (GitHub)

برای اینکه بتوانیم تغییرات کد خود را ردیابی کنیم و آن را روی هاست ابری قرار دهیم، باید پروژه را به گیت‌هاب منتقل کنیم.

وارد حساب کاربری گیت‌هاب خود شوید و یک Repository (مخزن) جدید و خالی (ترجیحاً Public) بسازید.
دستورات زیر را در ترمینالِ پوشه پروژه اجرا کنید تا پروژه به گیت‌هاب متصل شود (به جای آدرس زیر، لینک مخزن خود را قرار دهید):

git remote add origin https://github.com/your-username/my-astro-blog.git
git branch -M main
git push -u origin main

گام چهارم: دپلوی و انتشار سایت روی Netlify

حالا که کدها روی گیت‌هاب قرار دارد، وقت آن است که سایت خود را روی اینترنت منتشر کنیم تا همه بتوانند آن را ببینند:

وارد پنل کاربری خود در Netlify شوید.
روی دکمه Add new site کلیک کرده و گزینه Import an existing project را انتخاب کنید.
به Netlify اجازه دهید به گیت‌هاب شما متصل شود و مخزن my-astro-blog را انتخاب کنید.
تنظیمات ساخت (Build Settings) به طور خودکار توسط Netlify تشخیص داده می‌شوند:
- Build command: npm run build
- Publish directory: dist
روی دکمه Deploy site کلیک کنید.

در عرض چند ثانیه، Netlify پروژه آسترو شما را بیلد کرده و یک آدرس اینترنتی اختصاصی (مثل https://random-name.netlify.app) به شما تحویل می‌دهد. هر زمان که تغییری در کد بدهید و آن را push کنید، Netlify به طور خودکار سایت شما را آپدیت خواهد کرد.

جمع‌بندی

در این بخش یاد گرفتیم که چگونه پروژه آسترو را از صفر استارت بزنیم، ساختار آن را بشناسیم، آن را در گیت‌هاب نسخه گذاری کنیم و روی Netlify زنده کنیم.

در بخش دوم، به سراغ ساخت صفحات سفارشی، کار با فایل‌های .astro و نوشتن اولین مقالات با فرمت Markdown خواهیم رفت. منتظر بخش بعدی باشید!