تعلم في هذا الدرس من دليل تعلم Astro كيفيةتثبيت Astro وإنشاء أول مشروع ، وتشغيله محلياً. شرح عملي خطوة بخطوة مع أمثلة حقيقية لبناء موقعك الأول باستخدام Astro.

مقدمة صغيرة

في الجزء السابق من دليل تعلم Astro بدأنا نتعرف على الفلسفة وراء الإطار، وكيف يقدم تجربة تطوير مختلفة تماماً عن أي شيء تعودت عليه سابقاً.

اليوم… سننزل من “السحاب” وندخل العالم العملي.
سنُنشئ أول مشروع Astro خاص بنا، خطوة بخطوة، وكأنك جالس أمامي الآن على جهازك.

إذا كان هذا أول إطار ويب تقني تتعامل معه، فلا تقلق… ستجد العملية ممتعة وسلسة جدًا.

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

قبل أن نبدأ، تحتاج إلى:

✔️ Node.js

أي إصدار 18.14.1 أو أعلى.
تحقّق من الإصدار لديك:

node -v

إن لم يكن لديك Node، نزّله من الموقع الرسمي.

محرر نصوص

أفضل اختيار هو VS Code.

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

افتح Terminal (أو PowerShell في Windows)، ثم نفّذ الأمر:

npm create astro@latest

سيظهر لك برنامج سطر أوامر لطيف… يسألك عدة أسئلة.

📌 السؤال الأول: اسم المشروع

اكتب أي اسم تريد. مثلاً:

my-astro-website

📌 السؤال الثاني: نوع القالب

سترى خيارات مثل:

Empty → مشروع فارغ تمامًا
Blog → قالب مدونة جاهز
Portfolio → صفحة شخصية
Docs → موقع توثيق

أنصحك في أول تجربة بالاختيار: Empty

✔ Template: Empty

📌 السؤال الثالث: إضافة TypeScript؟

اختر:

Yes, use TypeScript with strict mode

(لا تقلق… Astro يتعامل مع TypeScript بسهولة جدًا)

📌 السؤال الرابع: تثبيت التبعيات؟

اختر:

Yes, install dependencies

الخطوة 2: الدخول إلى المشروع

بعد إنشاء المشروع، ادخل المجلد:

cd my-astro-website

الخطوة 3: تشغيل الموقع محلياً

نفّذ الأمر:

npm run dev

سترى رسالة جميلة:

🚀  Astro  ready in 300ms
Local:   http://localhost:4321/

افتح الرابط في المتصفح…

مبروك! لقد أنشأت أول موقع Astro في حياتك.

ستظهر لك صفحة بيضاء بسيطة مكتوب عليها:

Hello, World!

لكن هذه مجرد البداية.

ما الذي حدث فعلياً؟ (مهم لفهم Astro)

عندما أنشأت مشروعًا جديدًا، قام Astro بعمل ثلاثة أشياء:

1) إضافة مجلد src/pages

هذا هو قلب الموقع.
أي ملف داخل هذا المجلد يُصبح صفحة تلقائيًا.

مثل:

src/pages/index.astro  ← الصفحة الرئيسية
src/pages/about.astro  ← صفحة “من نحن”

2) إنشاء ملف تكوين astro.config.mjs

هذا هو عقل المشروع، الذي يحتوي على إعدادات:

الإضافات
المسارات
بناء المشروع

3) إعداد dev server سريع جدًا

بمجرد حفظ أي ملف… تتحدث الصفحة تلقائيًا.

الآن نبدأ اللعب الحقيقي! (أول تعديل على الموقع)

افتح الملف:

src/pages/index.astro

وستجده بهذا الشكل:

---
---

<html lang="en">
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

لنعدل النص:

<h1>أهلاً بك في أول مشروع Astro!</h1>

احفظ الملف… وسترى التغيير مباشرة في المتصفح.

الخطوة 4: إضافة أول مكوّن Component

لننشئ مكونًا بسيطًا :

أنشئ مجلدًا في المشروع:

src/components/

ثم ملفًا جديدًا:

src/components/Hero.astro

اكتب فيه:

<section style="padding: 40px; text-align: center;">
  <h2>مرحباً بك في موقعك الجديد المبني بـ Astro!</h2>
  <p>هذا أول مكوّن تقوم بإنشائه. رائع، أليس كذلك؟</p>
</section>

الآن افتح الصفحة الرئيسية وأضفه:

---
import Hero from "../components/Hero.astro";
---

<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>موقعي الجديد</title>
  </head>
  <body>
    <Hero />
  </body>
</html>

شاهد النتيجة في المتصفح…
أصبحت لديك صفحة تحتوي على مكوّن جميل.

الخطوة 5: إنشاء صفحة جديدة

أنشئ ملفًا جديدًا:

src/pages/about.astro

واكتب:

<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>موقعي الجديد</title>
  </head>
 <body>
    <h1>من نحن؟</h1>
    <p>هذه صفحة تعريفية داخل موقع Astro الخاص بك.</p>
  </body>
</html>

ثم افتح:

http://localhost:4321/about

صفحة جديدة جاهزة…
بدون أي إعدادات…
بدون Router…
بدون JavaScript.

قبل أن ننهي – ماذا تعلمنا اليوم؟

في هذا الجزء من دليل تعلم Astro تعلّمنا:

✔ تثبيت Node
✔ إنشاء أول مشروع Astro
✔ تشغيل سيرفر التطوير
✔ تعديل الصفحة الرئيسية
✔ إنشاء مكوّن
✔ إنشاء صفحة إضافية
✔ فهم بنية المشروع الأساسية

وهكذا أصبح لديك موقع يعمل، جاهز للتوسع وإضافة مئات الصفحات والمكونات.

دليل تعلم Astro – الجزء الثاني : تثبيت Astro وإنشاء أول مشروع خطوة بخطوة

Byاحمد علي