موقعك الأول باستخدام Astro

يشرح هذا الدليل إنشاء موقع متعدد الصفحات باستخدام Astro. ستحصل في النهاية على موقع سريع وحديث يسهل صيانته ونشره مجاناً.

المتطلبات الأساسية

• Node.js مثبت (الإصدار 18 أو أحدث)
• محرر نصوص (VS Code موصى به)
• أساسيات الطرفية (إنشاء الملفات، تشغيل الأوامر)

الخطوة 1: إنشاء مشروع جديد

# إنشاء المشروع
npm create astro@latest my-site -- --template basics

# الانتقال إلى المشروع
cd my-site

# تثبيت التبعيات
npm install

الخطوة 2: تعرف على بنية المشروع

مشروعك له هذه البنية:

src/
  pages/
    index.astro   — الصفحة الرئيسية
  layouts/
    Layout.astro  — غلاف الصفحة
public/           — الملفات الثابتة (صور، أيقونة الموقع)

افتح src/pages/index.astro — هذه صفحتك الرئيسية. غيّر النص واحفظ. خادم التطوير على localhost:4321 يُحدّث فوراً.

الخطوة 3: أضف صفحة جديدة

أنشئ src/pages/about.astro:

---
import Layout from '../layouts/Layout.astro';
---

<Layout title="معلومات عنا">
  <main>
    <h1>معلومات عن مشروعنا</h1>
    <p>احكِ قصتك هنا. اجعلها بسيطة وصادقة.</p>
  </main>
</Layout>

زر http://localhost:4321/about — صفحتك الجديدة أصبحت متاحة.

الخطوة 4: اربط الصفحات ببعضها

عدّل src/pages/index.astro:

<nav>
  <a href="/">الرئيسية</a>
  <a href="/about/">معلومات عنا</a>
</nav>

الخطوة 5: ابنِ وانشر

npm run build

هذا يُنشئ مجلد dist/ يحتوي HTML وCSS وJS نقية. ارفعها إلى أي مستضيف ثابت (Netlify، Vercel، Cloudflare Pages) مجاناً.

ما تعلمته

• كيفية إنشاء مشروع Astro
• كيف تُرسم الصفحات إلى مسارات
• كيفية إنشاء الصفحات وربطها
• كيفية بناء الموقع للإصدار النهائي

الخطوات التالية

• أضف مدونة باستخدام ملفات Markdown
• أضف تنسيقات باستخدام CSS أو Tailwind
• اجلب بيانات من API
• انشر بنقرة واحدة على Netlify