نشر الموقع مجاناً للعالم: ربط GitHub ورفع المشروع على Netlify وGitHub Pages

أكبر قفزة في مسار أي مبرمج هي اللحظة التي يرسل فيها رابطاً حقيقياً يبدأ بـ https:// لصديق أو عميل، فيفتحه من هاتفه في أي مكان بالعالم ويشاهد الموقع يعمل بكفاءة وسرعة.

منصات الاستضافة الحديثة مثل GitHub Pages وNetlify توفر استضافة مجانية دائمة للمواقع الثابتة، مع شهادة أمان SSL تلقائية، وسرعة فائقة عبر شبكات توزيع المحتوى (CDN)، وتوفر عليك تكاليف الاستضافات المدفوعة.

في هذا الدرس سنتعلم كيف تحزم مشروعك، ترفعه على مستودع GitHub، وتنشر نسخته الحية للعالم، لتضع أول رابط حقيقي في سيرتك الذاتية.

1. أنشئ حساباً مجانياً على موقع GitHub ببريدك الإلكتروني، وتأكد من تفعيل المصادقة الثنائية. شو رح تشوف على الشاشة: واجهة منصة غيتهاب العالمية مع رسالة ترحيب وزر أخضر 'Create repository'. إذا ما ظهرلك: غيتهاب منصة عالمية تقبل التسجيل بحساب شخصي وتعتبر الهوية الرسمية لأي مبرمج بالعالم.
2. أنشئ مستودعاً جديداً (New Repository) وسمّه باسم مشروعك بالإنكليزية، مثلاً 'my-first-landing-page'، واجعله Public. شو رح تشوف على الشاشة: صفحة المستودع الجديدة تظهر بعنوان المشروع مع تعليمات رفع الملفات. إذا ما ظهرلك: اختيار Public ضروري لتتمكن من استخدام خدمة GitHub Pages المجانية.
3. في صفحة المستودع، اختر خيار 'uploading an existing file' واسحب ملفات موقعك (index.html ومجلد assets) وأفلتها. شو رح تشوف على الشاشة: المتصفح يرفع الملفات واحداً تلو الآخر ويظهر شريط تقدم أزرق. إذا ما ظهرلك: احرص على رفع الملفات من داخل مجلد المشروع بحيث يكون index.html في الجذر مباشرة وليس داخل مجلد فرعي.
4. اكتب رسالة وصفية في خانة التعديل 'Initial commit - first release' واضغط الزر الأخضر 'Commit changes'. شو رح تشوف على الشاشة: ملفات مشروعك تظهر مرتبة داخل المستودع مع تاريخ ووقت الرفع. إذا ما ظهرلك: كل تعديل مستقبلي سترفعه سيحفظ كتحديث جديد مع الاحتفاظ بالنسخ السابقة تلقائياً.
5. انتقل إلى تبويب 'Settings' بأعلى المستودع، ثم اختر من القائمة الجانبية قسم 'Pages'. شو رح تشوف على الشاشة: لوحة إعدادات النشر على GitHub Pages مع خيارات مصدر البناء (Build and deployment). إذا ما ظهرلك: إذا لم تظهر، تأكد أن المستودع مضبوط على الوضع العام Public وليس Private.
6. تحت خانة 'Branch'، اختر فرع 'main' (أو master) والمجلد '/ (root)' ثم اضغط الزر الأزرق 'Save'. شو رح تشوف على الشاشة: رسالة باللون الأزرق تفيد بأن عملية البناء والنشر قيد التنفيذ (Your site is being built). إذا ما ظهرلك: انتظر دقيقة إلى دقيقتين ثم قم بتحديث الصفحة حتى يظهر شريط أخضر برابط الموقع.
7. انسخ الرابط النهائي الذي يظهر بالأعلى (مثل: username.github.io/my-first-landing-page) وافتحه في تبويب جديد. شو رح تشوف على الشاشة: موقعك الذي بنيته على حاسوبك يفتح الآن مباشرة من الإنترنت العالمي برمز قفل الأمان HTTPS. إذا ما ظهرلك: افتح الرابط من هاتفك المحمول وتأكد أن كل التنسيقات والصور تفتح بسلاسة وسرعة.
8. إذا تعثر الرفع على غيتهاب، يمكنك استخدام منصة Netlify: اسحب مجلد الموقع كاملاً وأفلته في قسم 'Drop your site folder' بموقع app.netlify.com. شو رح تشوف على الشاشة: خلال ثانيتين فقط، يمنحك نتلافي رابطاً فورياً حياً يعمل على مدار الساعة. إذا ما ظهرلك: كلا الخيارين مجانيان بالكامل ومثاليان لعرض أعمالك على العملاء.