التثبيت وهيكل المشروع

المطلوب قبل ما تبدأ

من Astro 6 وطالع، المشروع محتاج Node.js 22 أو أحدث. Node 18 و 20 مش مدعومين. مدير الحزم حر: npm أو pnpm أو yarn أو bun. المذكرة دي بتستخدم أوامر pnpm لأن الموقع اللي بتقرأ فيه شغال بيه.

pnpm create astro@latest

الـ wizard هيسألك: اسم الفولدر، قالب (فاضي أو بلوج أو دوكس)، TypeScript ولا لأ، ومدى الصرامة (base أو strict أو strictest)، وهل يعمل git. للمشاريع الجديدة خد strict. الـ content collections محتاجة strictNullChecks.

لو عايز تبدأ من ريبو جاهز على GitHub، نفس الأمر بيقبل رابط الريبو. والتثبيت اليدوي: حزمة astro في package.json، و tsconfig بيعمل extends لـ astro/tsconfigs/strict، وملف src/pages/index.astro.

الشجرة اللي هتتعود عليها

الفولدر الوحيد المحجوز هو src/pages. الباقي اتفاقية. المجتمع بيسمّي المكوّنات components واللاياوت layouts، بس تقدر تغيّر الأسماء دي.

koshary-site/├── public/                 # يتتنسخ زي ما هو، من غير معالجة│   ├── favicon.svg│   └── robots.txt├── src/│   ├── components/│   ├── layouts/│   ├── pages/              # كل ملف هنا = رابط│   │   └── index.astro│   ├── styles/│   ├── content.config.ts   # مجموعات المحتوى وقت البناء│   └── live.config.ts      # اختياري: محتوى بيتجاب وقت الطلب├── astro.config.mjs├── package.json└── tsconfig.json

رابط ملف في public/menu.pdf هو /menu.pdf من جذر الموقع. متحطّش /public في الرابط.

الملفات اللي حوالي الشجرة

package.json فيه السكربتات. Astro محتاج الاعتمادات وقت البناء، فحطها في dependencies لحد ما يبقى عندك سبب حقيقي لـ devDependencies.

astro.config.mjs (أو .ts) إعدادات البناء: التكاملات، الـ adapter، عنوان الموقع. TypeScript في الكونفج بيتقرأ بأداة tsm وبيحترم tsconfig. الـ SEO (عنوان الصفحة ووصفها) مش بيتحط هنا. ده مكانه وسم head في اللاياوت، لأن Astro مش بيستخدم الكونفج كبيانات للموقع.

tsconfig.json عشان المحرر يفهم الاستيراد. من غيره حاجات زي أنواع الحزم بتبان ناقصة.

import { defineConfig } from "astro/config";export default defineConfig({  site: "https://koshary.example",});

site هو عنوان النشر من غير شرطة في الآخر. محتاجه الـ sitemap والروابط الـ canonical. لو الموقع مش على جذر الدومين (زي GitHub Pages تحت /repo)، زوّد base: "/repo".

أوامر كل يوم

🧪 Lab

اعمل مشروع فاضي، افتح src/pages/index.astro، غيّر العنوان لـ “كشري ستيشن”، وشغّل pnpm dev. بعدين حط public/note.txt فيه سطر، وافتح /note.txt في المتصفح. الملف ظهر من غير أي صفحة Astro، لأن public بيتنسخ كما هو.

خلّصت الفصل لما

• تعمل مشروع بـ pnpm create astro@latest على Node 22
• تفرّق src عن public بمثال
• تعرف إن src/pages هو الفولدر المحجوز الوحيد
• تحط site في الكونفج وتعرف ليه
• تفرّق dev عن build و preview