جارٍ التحميل…Loading…Cargando…Carregando…Chargement…
دليل استضافة ونشر مواقع الويب وصفحات HTML ومشاريع React و Next.js مجاناً مدى الحياة عبر منصات Vercel و Netlify مع دومين مجاني وتحديث تلقائي عبر GitHub.
3 خطوات7 دقائق قراءةبواسطة Admin
انتهى العصر القديم الذي كان يتطلب شراء استضافات مشتركة باهظة الثمن والتعامل مع برامج FTP البطيئة لرفع ملفات موقعك يدوياً في كل مرة تجري فيها تعديلاً صغيراً. اليوم، بفضل المنصات السحابية الحديثة لشبكات الحافة (Edge Cloud) مثل Vercel و Netlify، أصبحت استضافة المواقع الثابتة وتطبيقات React و Next.js مجانية بنسبة 100% ومدعومة بشبكات CDN عالمية توزع صفحاتك على سيرفرات سريعة في كل قارة.
أعظم ميزة في هذا النظام هي النشر المستمر (Continuous Deployment - CI/CD)؛ فبمجرد دفع الكود وتعديلاتك إلى مستودع GitHub، يقوم Vercel ببناء الموقع وتحديثه على الإنترنت تلقائياً في ثوانٍ معدودة. نستعرض هنا كيفية إطلاق موقعك الأول للعالم مجاناً.
سجل دخولك في موقع github.com واضغط على زر New لإنشاء مستودع جديد (Repository). اختر اسماً للمشروع واجعله Public أو Private. قم برفع ملفات موقعك إما عبر سحبها وإفلاتها داخل المتصفح، أو عبر أوامر Git من حاسوبك: git init && git add . && git commit -m "Initial commit" && git push. يضمن وجود الكود على GitHub حفظ نسختك السحابية وربطها بنظام النشر الآلي.
النتيجة المتوقعة: مستودع برمجي منظم وجاهز للاستيراد السحابي في منصات الاستضافة العالمية
توجه إلى موقع vercel.com واضغط على Sign Up واختر تسجيل الدخول المباشر بحساب GitHub. في لوحة التحكم (Dashboard): اضغط على زر Add New... > Project. ستظهر لك قائمة بمستودعاتك على جيت هب؛ انقر على زر Import بجانب مشروعك. يتعرف Vercel تلقائياً على نوع المشروع (Next.js, Vite, Static HTML)؛ اضغط على زر Deploy الأزرق وانتظر 20 ثانية فقط!
النتيجة المتوقعة: بناء سحابي خاطف وناجح وتوليد رابط موقع حي ومباشر على شبكة الإنترنت
بمجرد ظهور قصاصات الاحتفال (Congratulations): ستجد رابط موقعك الحي فورياً بصيغة مجانية تنتهي بـ .vercel.app ومحمياً بشهادة أمان SSL تلقائية مشفرة (القفل الأخضر). وإذا كنت تمتلك دومين خاص (مثل yourname.com): اذهب لتبويب Settings > Domains؛ اكتب اسم الدومين واتبع توجيهات سجلات DNS البسيطة (CNAME و A Record) لربطه بموقعك مجاناً وبسرعة.
النتيجة المتوقعة: موقع سريع وآمن يعمل 24/7 دون أي توقف وبأعلى تقييم أداء عالمي
أخبرنا إذا تمكنت من إكمال الخطوات أو ما زلت بحاجة إلى مساعدة.
طريقة تثبيت وإعداد Visual Studio Code للمبرمجيندليل تثبيت وتهيئة محرر الأكواد العالمي Visual Studio Code، وتثبيت أهم إضافات المطورين لتنسيق الأكواد وكشف الأخطاء واختصارات لوحة المفاتيح السحرية.
طريقة استخدام Git من سطر الأوامر وربطه بـ GitHub للمبتدئيندليل أوامر Git الأساسية من سطر الأوامر للمبتدئين، من تهيئة المستودعات وتوثيق التعديلات Commits وحتى رفع الكود ومزامنته مع GitHub والتعامل مع الفروع.
خارطة طريق تعلم مكتبة React للمبتدئيندليل شامل وخارطة طريق لتعلم مكتبة React.js لبناء واجهات الويب التفاعلية الحديثة، من المفاهيم الأولى ونظام JSX وحتى الـ Hooks و Next.js المعاصر.