لحظة تحويل مشروعك البرمجي من بيئة التطوير المحلية (Localhost) إلى موقع حي يتفاعل معه الزوار، هي بلا شك الخطوة الأهم لأي مطور. ومع تطور تقنيات الـ Front-end، لم يعد رفع الموقع مقتصراً على السحب والإفلات عبر بروتوكول FTP. إذا كنت تتساءل عن كيفية التعامل مع مجلدات المشروع المعقدة وتحويلها إلى ملفات نهائية خفيفة وسريعة، فأنت في المكان الصحيح.
في هذا الدليل العملي، سنرافقك براحة بال تامة لإنهاء تجهيز موقعك، بدءاً من الضرورة القصوى لتنصيب بيئة Node.js، مروراً بأوامر البناء السحرية، وصولاً إلى استخراج ملفاتك النهائية لرفعها على استضافة Hostinger.
الخطوة الصفرية: لماذا يجب عليك تنصيب Node.js أولاً؟
قبل أن تتمكن من تنفيذ أي أمر بناء، يجب أن يتوفر حاسوبك على بيئة Node.js. هي ليست مجرد أداة إضافية، بل هي المحرك الذي يدير حزم مشروعك عبر أداة npm (Node Package Manager).
كيف تبدأ؟
- قم بزيارة الموقع الرسمي nodejs.org وحمل نسخة LTS.
- بعد التثبيت، تأكد من الجاهزية بفتح Terminal وكتابة:
node -v.
الخطوة الأولى: بناء الأساس باستخدام npm install
عندما تبدأ العمل على مشروع جديد أو تسحب كوداً من GitHub، ستجد ملفاً يسمى package.json ولكنه يفتقد للمكتبات الفعلية. هنا يأتي دور الأمر الأول:
npm installهذا الأمر يقوم بتهيئة بيئة العمل لديك وتحميل كافة "الاعتماديات" (Dependencies) اللازمة ليعمل المشروع بنفس الكفاءة التي صُمم بها.
الخطوة الثانية: استخراج النسخة النهائية عبر npm run build
المتصفحات لا تفهم أكواد React أو Vue الخام بشكل مباشر، كما أن حجم ملفات التطوير يكون ضخماً جداً. لتحويل تعبك إلى منتج نهائي (Production Ready)، استخدم الأمر التالي:
npm run buildما الذي تحصل عليه؟ سيقوم النظام بإنشاء مجلد يسمى غالباً dist أو build. هذا المجلد يحتوي على ملفات HTML و CSS و JS مصغرة جداً (Minified) ومحسنة لتعمل بأقصى سرعة ممكنة.
الخطوة الثالثة: الرفع على Hostinger براحة بال
الآن، انقل سحرك إلى خوادم Hostinger عبر لوحة التحكم hPanel:
- قم بضغط محتويات مجلد
build/distفي ملف ZIP. - توجه إلى File Manager في هوستنجر وافتح المجلد الرئيسي
public_html. - ارفع ملف الـ ZIP وقم بفك الضغط (Extract) هناك.
💡 نصيحة للمحترفين (React Router):
إذا كنت تستخدم نظام مسارات (Routes) وتواجه خطأ 404 عند تحديث الصفحة، قم بإنشاء ملف باسم .htaccess داخل public_html وأضف هذا الكود:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>خاتمة
مبروك! لقد أتممت للتو عملية النشر الاحترافية. اتباع هذه الخطوات يضمن لك أن موقعك ليس فقط متاحاً على الإنترنت، بل يعمل بأفضل أداء ممكن وبأقل حجم للملفات. ابدأ الآن في مشاركة رابط موقعك مع العالم!