كيف تنقل مشروعك من Lovable إلى هوستنجر أو أي استضافة خارجية؟

الإجابة المباشرة

لنقل مشروع Lovable إلى هوستنجر: اربط المشروع بـ GitHub من داخل Lovable، استنسخ المستودع على جهازك، أنشئ ملف .env بمتغيّرات المشروع، نفّذ npm install ثم npm run build، وارفع محتويات مجلّد dist إلى مجلّد public_html في هوستنجر، ثم أضف ملف .htaccess يوجّه كل المسارات إلى index.html. أخيراً حدّث الدومين في إعدادات المصادقة وCORS لقاعدة بياناتك. المدّة المتوقّعة من 30 إلى 60 دقيقة لمشروع بسيط.

هل تحتاج النقل أصلاً؟

قبل أي خطوة تقنية، كن صريحاً مع نفسك: Lovable تنشر مشروعك وتتيح ربط دومينك المخصّص من داخل المنصّة، وهذا يكفي أغلب المشاريع. النقل خيار صحيح في ثلاث حالات فقط:

• عندك استضافة قائمة تدفع ثمنها بالفعل وتريد جمع مواقعك في مكان واحد.
• تحتاج تحكّماً كاملاً في الخادم أو في إعدادات الشبكة والنطاقات الفرعية.
• تريد تقليل الاعتماد على منصّة واحدة والاحتفاظ بنسخة تشغيل مستقلّة.

وإن كان دافعك «توفير التكلفة» فقط، فاحسب الوقت: النقل يعني أنّك أنت من يبني ويرفع مع كل تعديل. راجع صفحة الأسعار قبل القرار.

الخطوة صفر: تحقّق من نوع مشروعك

هذه أهم نقطة يتجاهلها أغلب الأدلّة. مشاريع Lovable ليست نوعاً واحداً:

لا ترفع مشروعاً يحتاج خادماً على استضافة مشتركة ثم تتساءل لماذا يظهر بياضاً. تحقّق من النوع أولاً، فهذا يوفّر عليك ساعات.

خطوات النقل بالتفصيل

1. 1. اربط المشروع بـ GitHub وصدّر الكود

   من داخل مشروع Lovable افتح زرّ GitHub أعلى الصفحة ثم Connect to GitHub وأنشئ مستودعاً. بعدها استنسخ المستودع على جهازك ونفّذ npm install.

2. 2. تحقّق من نوع المشروع قبل أي شيء

   افتح package.json و vite.config: إن كان المشروع Vite + React عادياً فمخرجاته ملفات ثابتة تصلح لأي استضافة مشتركة. أمّا إن كان يعتمد على تصيير من الخادم أو دوال خادمية فيحتاج استضافة تشغّل Node لا استضافة مشتركة.

3. 3. أنشئ ملف .env قبل البناء

   متغيّرات Vite تُحقن وقت البناء لا وقت التشغيل. ضع مفاتيح قاعدة البيانات العامّة (URL والمفتاح العام) في ملف .env في جذر المشروع، ولا ترفع أي مفتاح سرّي إلى كود الواجهة.

4. 4. ابنِ المشروع واختبره محلياً

   نفّذ npm run build ثم npm run preview وتصفّح الروابط الداخلية كلّها. الناتج في مجلّد dist، وهذا هو ما سيُرفع للاستضافة.

5. 5. ارفع محتويات dist إلى public_html

   من hPanel افتح File Manager ثم public_html، احذف الملف الافتراضي، وارفع محتويات مجلّد dist لا المجلّد نفسه. أو استخدم FTP/SSH لرفع أسرع.

6. 6. أضف ملف .htaccess لتوجيه الروابط

   بدون .htaccess ستعمل الصفحة الرئيسية فقط وتعطي بقية الروابط 404. ضع الملف داخل public_html وأيضاً داخل مجلّد public بالمشروع ليُنسخ مع كل بناء.

7. 7. فعّل شهادة SSL وأجبر HTTPS

   من hPanel فعّل شهادة SSL المجانية للدومين، ثم أجبر التحويل إلى HTTPS عبر قاعدة إعادة توجيه في .htaccess.

8. 8. حدّث إعدادات قاعدة البيانات والمصادقة

   في لوحة قاعدة البيانات حدّث Site URL و Redirect URLs إلى دومينك الجديد، وأضف الدومين في إعدادات CORS إن كنت تستخدم التخزين أو دوالّ خادمية.

9. 9. اختبر كل شيء بعد الرفع

   افتح الدومين، وجرّب رابطاً داخلياً مباشرة من شريط العنوان، وسجّل الدخول، وارفع صورة، وتأكّد من ظهور المحتوى على الجوّال.

10. 10. أتمتة النشر (اختياري لكن موصى به)

    أضف GitHub Actions تبني المشروع وترفعه عبر FTP عند كل دفعة إلى الفرع الرئيسي، حتى لا تكرّر الرفع اليدوي مع كل تعديل.

الأوامر الأساسية

git clone https://github.com/USERNAME/REPO_NAME.git
cd REPO_NAME
npm install
npm run build
npm run preview

VITE_SUPABASE_URL=https://xxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=المفتاح_العام

استخدم المفتاح العام (anon / publishable) فقط. أي مفتاح خدمة سرّي يجب ألّا يوضع في كود الواجهة إطلاقاً لأنّه يصبح مقروءاً لكل زائر، وحمايتك الحقيقية هي سياسات الصفوف (RLS) على قاعدة البيانات.

cd dist
zip -r ../site.zip .
scp -P 65002 ../site.zip USER@HOST:~/public_html/
ssh -p 65002 USER@HOST
cd ~/public_html && unzip -o site.zip && rm site.zip

ملف .htaccess — الخطوة التي يسقط عندها الجميع

ضع هذا الملف داخل public_html، وضع نسخة منه في مجلّد public بالمشروع حتى يُنسخ تلقائياً مع كل بناء:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # إجبار HTTPS
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

  # توجيه تطبيق الصفحة الواحدة
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/plain application/javascript application/json image/svg+xml
</IfModule>

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

<IfModule mod_headers.c>
  Header set X-Content-Type-Options "nosniff"
  Header set X-Frame-Options "SAMEORIGIN"
  Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

تحديث قاعدة البيانات والمصادقة

• Site URL: غيّرها إلى دومينك الجديد بصيغة https كاملة.
• Redirect URLs: أضف الدومين مع نمط شامل لمساراته حتى تعمل روابط تأكيد البريد واستعادة كلمة المرور.
• CORS: أضف الدومين في إعدادات الواجهة البرمجية إن كنت تستخدم التخزين أو دوالّ خادمية.
• مزوّدو الدخول الاجتماعي: حدّث Redirect URI في لوحة كل مزوّد (Google مثلاً) وإلا فشل تسجيل الدخول.

نشر تلقائي مع كل تحديث

بدل الرفع اليدوي، أضف هذا الملف في .github/workflows/deploy.yml، وضع بيانات FTP ومتغيّرات البيئة في أسرار المستودع:

name: Deploy to Hostinger

on:
  push:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - name: Build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
        run: npm run build
      - name: Copy .htaccess
        run: cp public/.htaccess dist/.htaccess || true
      - name: Deploy via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USER }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: /public_html/
          local-dir: ./dist/

بيانات FTP تجدها في hPanel ضمن قسم الملفات ← حسابات FTP. لا تكتبها في الكود أبداً، ضعها في أسرار المستودع فقط.

ما الذي يكسر الموقع بعد النقل؟

قائمة تحقّق نهائية

• الصفحة الرئيسية تفتح على https بدون تحذير شهادة.
• فتح رابط داخلي مباشرة من شريط العنوان يعطي الصفحة لا 404.
• تسجيل الدخول والتسجيل يعملان ويعيدانك إلى الدومين الجديد.
• الصور والخطوط تظهر، ولا توجد أخطاء في وحدة تحكّم المتصفّح.
• الموقع سليم على الجوّال بعرض 375 بكسل.
• أعدت إرسال خريطة الموقع في Search Console، وضبطت التحويلات 301 من الدومين القديم إن وُجد.

بعد النقل: كيف تستمر في التطوير؟

تعديلاتك داخل Lovable لن تصل إلى الموقع المرفوع تلقائياً. المسار الصحيح: عدّل في Lovable ← يُدفع التغيير إلى GitHub ← يبني GitHub Actions ويرفع إلى الاستضافة. هذه الحلقة هي الفرق بين موقع حيّ وموقع يتجمّد عند نسخة الرفع الأولى. وإن أردت العودة إلى النشر داخل Lovable لاحقاً فالأمر ممكن دائماً، فالمشروع لم يفارق المنصّة.