لا يكون مشروع الطالب جاهزًا للتسليم فعلًا إذا كان على المدرّس أو المقيّم أو زميل الفريق أو مسؤول التوظيف تنزيل ملف ZIP، والبحث عن المجلد الصحيح، وتثبيت الاعتماديات، ثم تخمين الملف الذي يفتح التطبيق.
في كثير من مشاريع الطلاب، التسليم الأفضل هو رابط يعمل مباشرة.
هذا لا يعني أن كل واجب يحتاج إلى بنية سحابية كاملة. كثير من مشاريع الجامعة، والدورات المكثفة، والهاكاثون، وتجارب ملف الأعمال تكون ثابتة، أو يمكن بناؤها إلى ملفات ثابتة: HTML وCSS وJavaScript وVite وReact وVue وAstro وألعاب متصفح صغيرة وتمارين واجهة وصفحات هبوط ولوحات معلومات وتجارب portfolio. إذا كان المتصفح يستطيع تشغيل الملفات النهائية دون عملية خادم منفصلة، فالمشروع غالبًا مناسب للاستضافة الثابتة.
ما الذي يجب أن تحله استضافة مشروع الطالب؟
الهدف ليس مجرد وضع الملفات على الإنترنت. الرابط يجب أن يعمل في لحظة التقييم الحقيقية.
| الحاجة | معناها عمليًا |
|---|---|
| فتح سهل | المقيّم يضغط على URL بدل تنزيل ملف ZIP. |
| ملفات كاملة | CSS والصور والخطوط وJavaScript وJSON ومجلدات build تُحمّل من الرابط العام. |
| اختبار خارج جهازك | المشروع يفتح من هاتف أو متصفح آخر. |
| سياق واضح | الصفحة الرئيسية تشرح ما يجب مراجعته. |
| صالح لملف الأعمال | يمكن استخدام الرابط نفسه في السيرة الذاتية أو portfolio أو GitHub README أو طلب تدريب. |
| إمكانية الاسترجاع | يمكن استبدال تحديث مكسور أو الرجوع عنه دون تغيير الرابط العام كله. |
عبارة "يعمل على جهازي" ليست كافية. مشروع التسليم يجب أن يعمل عند شخص آخر أيضًا.
ما المشاريع المناسبة؟
الاستضافة الثابتة مناسبة عندما تكون النتيجة النهائية مجموعة ملفات يستطيع المتصفح تحميلها مباشرة.
| نوع المشروع | ما الذي ترفعه | ملاحظة |
|---|---|---|
| واجب HTML/CSS | مجلد يحتوي على index.html | ارفع الصور والخطوط ومجلدات CSS أيضًا. |
| تمرين JavaScript | مجلد يحتوي على HTML وJS وCSS والأصول | مناسب للحاسبات والألعاب والاختبارات وتطبيقات todo والرسوم والواجهات. |
| مشروع Vite | dist بعد npm run build | لا ترفع src إذا كان الهدف هو الرابط العام. |
| مشروع React | مجلد build | الرابط العام يجب أن يقدّم الملفات الثابتة المجمعة. |
| مشروع Vue | dist بعد build | اختبر المسارات وروابط الأصول بعد النشر. |
| portfolio ثابت | مجلد portfolio أو خرج build | أضف سياق المشروع، لا تكتفِ باللقطات. |
| واجهة hackathon | خرج build ثابت | شغّل API أو backend في مكان منفصل إذا كان العرض يعتمد عليه. |
الاستضافة الثابتة لا تشغّل PHP أو Java أو Python أو Ruby أو خوادم قواعد بيانات أو مهام خلفية أو خدمات تسجيل دخول. يمكنك نشر الواجهة الأمامية كملفات ثابتة، لكن backend وقاعدة البيانات يحتاجان إلى منصة أخرى.
لماذا يبدأ كثيرون بـ GitHub Pages؟
GitHub Pages خيار مألوف لأن كثيرًا من الدورات تستخدم GitHub أصلًا. توثيق GitHub يصف Pages كخدمة استضافة مواقع ثابتة تنشر HTML وCSS وJavaScript مباشرة من repository. إذا كان المشروع البرمجي مرتبًا داخل repo، فقد يكون ذلك مناسبًا.
لكن البدء من repository ليس دائمًا أسرع طريق للتسليم:
- المشروع جاء من قالب تم تنزيله أو تصدير AI أو مجلد تصميم.
- تحتاج إلى رابط قبل تنظيف repository.
- في العرض الأول، النتيجة التي تفتح أهم من تاريخ commit.
- المجلد النهائي ينتج بعد build، وليس هو مجلد source نفسه.
- عضو في الفريق يحتاج إلى النشر دون أن يكون مالك repository.
Cloudflare Pages توثق Direct Upload للأصول المبنية مسبقًا والرفع من الكمبيوتر المحلي، بما في ذلك drag and drop. Firebase Hosting تقدّم نفسها عربيًا كاستضافة سريعة وآمنة لتطبيق الويب. هذا يوضح أن نشر مشروع web لا يبدأ دائمًا من المسار نفسه.
مسار نظيف لتسليم المشروع
استخدم أصغر عملية تنتج رابطًا موثوقًا.
- أنهِ المشروع محليًا.
- حدّد مجلد النشر الحقيقي.
- ارفع المجلد كاملًا أو ملف ZIP.
- افتح رابط HTTPS الناتج في نافذة خاصة.
- اختبره من هاتف أو متصفح آخر.
- ضع الرابط في نموذج التسليم.
- احتفظ بالرابط لملف الأعمال إذا كان المشروع يستحق العرض لاحقًا.
الخطوة الثانية هي الأكثر عرضة للخطأ. كثير من الطلاب يرفعون المجلد غير الصحيح.
| التقنية | غالبًا انشر هذا | غالبًا تجنب هذا |
|---|---|---|
| HTML/CSS/JS | مجلد يحتوي على index.html | ملف index.html وحده دون الأصول |
| Vite | dist | src, node_modules |
| React static build | build أو خرج framework | مجلد source قبل build |
| Vue | dist | جذر المشروع وفيه source فقط |
| Astro | dist | مجلد content/source قبل build |
| Next static export | out | تطبيق يحتاج إلى عملية Node |
إذا لم تكن متأكدًا، ابحث عن المجلد الذي يحتوي على index.html والأصول المجمعة. ثم افتحه بمعاينة ثابتة قبل رفعه.
ماذا تكتب في الصفحة الرئيسية؟
رابط المشروع لا يجب أن يجعل المقيّم يخمّن السياق.
أضف قسمًا قصيرًا في البداية:
| الحقل | مثال |
|---|---|
| اسم المشروع | Weather Dashboard |
| المادة أو الحدث | مشروع frontend نهائي، 2026 |
| التقنيات | HTML, CSS, JavaScript, OpenWeather API |
| ما يجب اختباره | البحث عن مدينة، تغيير الوحدات، فحص التصميم المتجاوب |
| حدود معروفة | مفتاح API تجريبي عليه rate limit؛ لا يوجد نظام حسابات |
هذا يساعد المدرّس على تقييم السلوك الصحيح، ويساعد مسؤول التوظيف على فهم المشروع دون قراءة repository بالكامل.
أخطاء شائعة قبل التسليم
معظم روابط المشاريع المكسورة تفشل لأسباب بسيطة.
| العرض | السبب المحتمل | الحل |
|---|---|---|
| الصفحة الرئيسية تعرض 404 | index.html ليس في جذر النشر | ارفع المجلد الذي يحتوي مباشرة على index.html. |
| CSS لا يظهر | استخدام مسارات محلية أو مطلقة | استخدم مسارات نسبية وارفع مجلد CSS. |
| الصور تعمل محليًا ولا تعمل online | مجلد الصور غير مرفوع أو اختلاف في الأحرف الكبيرة والصغيرة | ارفع كل الأصول وتحقق من Logo.png مقابل logo.png. |
| الأزرار لا تعمل | ملف JavaScript غير موجود | افتح devtools على الرابط العام وافحص الطلبات الفاشلة. |
| مسارات React/Vue تعرض 404 | routing الثابت غير مجهز | استخدم hash routing أو fallback إذا احتاج المشروع ذلك. |
| طلبات API تفشل | backend غير منشور، أو CORS يمنع الطلب، أو localhost لا يزال في الكود | استبدل localhost بعنوان API حقيقي واستضف backend منفصلًا. |
أسرع اختبار بسيط: افتح الرابط العام من جهاز لم يرَ ملفاتك المحلية من قبل.
إذا كان المشروع يحتوي على backend
بعض الواجبات ليست ثابتة بالكامل. قد تستخدم Express أو Flask أو Django أو Spring Boot أو PHP أو Firebase أو Supabase أو قاعدة بيانات أو تسجيل دخول.
في هذه الحالة، افصل الطبقات بوضوح:
| الطبقة | المكان المناسب |
|---|---|
| Frontend ثابت | DeployPages أو static host آخر |
| API server | Backend host أو serverless platform أو بيئة الدورة |
| Database | Managed database أو بيئة تعليمية |
| Secrets | Environment variables في backend، وليست ملفات frontend عامة |
لا ترفع .env أو private keys أو بيانات قاعدة البيانات أو أسرار المدرّس إلى موقع ثابت عام. كل ملف frontend يمكن قراءته من المتصفح.
اجعل الرابط مناسبًا لملف الأعمال
واجب دراسي يمكن أن يصبح دليلًا على العمل إذا كانت الصفحة العامة واضحة.
قبل مشاركته خارج الصف، أضف:
- وصفًا قصيرًا للمشكلة وطريقتك في حلها.
- توضيحًا لما بنيته بنفسك.
- لقطات شاشة فقط عندما يحتاج العرض إلى سياق.
- رابط source code إذا كان repository جاهزًا للعرض.
- ملاحظة عن demo data أو الميزات المعطلة أو حدود API.
- custom domain لاحقًا إذا أصبح المشروع جزءًا رئيسيًا من portfolio.
لا تحتاج إلى تقديم واجب دراسي كأنه SaaS مكتمل. الشرح المحدد والصادق أكثر إقناعًا.
أين يدخل DeployPages؟
DeployPages مناسب عندما تكون الحاجة الأولى هي رابط HTTPS يعمل.
يمكنك من المتصفح نشر مجلد ثابت، ZIP، مشروع HTML، خرج build للواجهة، صفحة مولدة بالذكاء الاصطناعي، PDF، لعبة صغيرة، صفحة CV، أو تجربة portfolio. عندما يصبح المشروع أهم، يمكن أن يتوسع المسار نفسه إلى custom domains، وanalytics، وpassword protection، وrollback، وCLI deploys.
لمشاريع الطلاب، ابدأ من student hosting. إذا كان المشروع ملف HTML أو مجلدًا صغيرًا، فـ HTML deployment guide أقرب. وللسيرة الذاتية وportfolio، راجع resume hosting وportfolio hosting.
قائمة فحص قبل إرسال الرابط
قبل لصق URL في Moodle أو Canvas أو Google Classroom أو البريد أو نموذج التسليم:
index.htmlأو static entry point موجود في جذر النشر.- CSS وJavaScript والصور والخطوط وJSON والأصول الناتجة مرفوعة.
- الرابط يفتح في نافذة خاصة.
- الرابط يفتح من الهاتف.
- الصفحة الرئيسية تشرح المشروع والمادة والتقنيات وما يجب اختباره.
- لا توجد secrets أو tokens أو private data أو مستندات شخصية في الملفات العامة.
- اعتماديات backend موثقة ومضافة إلى استضافة منفصلة.
- الرابط المرسل هو URL العام النهائي، وليس مسارًا محليًا أو رابط dashboard.
هذه المراجعة القصيرة تمنع أكثر المشاكل التي تستهلك الوقت قبل الموعد النهائي.