كيف تنشر موقعًا صنعته بـ ChatGPT أو Claude

لنشر موقع كتبه لك ChatGPT أو Claude، احفظ الشيفرة في ملف اسمه index.html، وارفع الملف إلى GitHub، ثم اختر المستودع في لوحة Coolify على خادمك وانشره. فيصبح موقعك على عنوان HTTPS عام، ويمكنك ربط نطاقك الخاص إن كان لديك. يفترض هذا الدليل أنها مرتك الأولى ويشرح كل مرحلة من البداية.

أولًا، تأكد مما لديك. الموقع المكتوب في محادثة هو عادةً ملف HTML واحد بلا شيء يُبنى، وهذا ما يغطيه هذا الدليل. فإذا ذكر الرد npm install أو package.json أو Next.js فلديك تطبيق، ودليل أدوات البرمجة لدينا أنسب لك.

1. اطلب ملفًا واحدًا

أرسل هذا في المحادثة كي لا تضطر إلى التنقل بين ملفات عدة:

Give me this site as one index.html file. Keep the CSS and JavaScript inside that file. If you use images, tell me their file names.

2. احفظ الملف على حاسوبك

• ChatGPT: تصل الشيفرة عادةً في كتلة شيفرة داخل المحادثة، فانسخ الكتلة. وإذا رأيت زر تنزيل فيمكنك استخدامه أيضًا.
• Claude: كثيرًا ما يُفتح الموقع كـ artifact بجانب المحادثة. تصف وثائق Anthropic أزرارًا في أعلى الـ artifact لعرض الشيفرة أو نسخها أو تنزيلها. وللتصاميم المصنوعة من قالب زر Export يعطيك HTML مستقلًا أو ملف .zip.

إذا نسخت الشيفرة فالصقها في محرر نصوص واحفظها باسم index.html. في Notepad على Windows اضبط نوع الملف على All Files، وإلا انتهى الاسم بـ .txt. وفي TextEdit على Mac حوّل إلى النص العادي أولًا. انقر الملف مرتين ويجب أن يُفتح موقعك في المتصفح. وضع أي صور في المجلد نفسه.

3. ارفع الملفات إلى GitHub

يجمع الخادم موقعك من مستودع على GitHub، وهو يعمل كمجلد لملفاتك.

1. أنشئ حسابًا في GitHub. في أعلى اليمين اختر New repository.
2. أعطه اسمًا قصيرًا، واضبط الرؤية على Public، وفعّل Add README واضغط Create repository.
3. فوق قائمة الملفات افتح قائمة Add file واختر Upload files واسحب index.html وصورك، ثم اضغط Commit changes.

يستطيع الجميع رؤية المستودع العام، وصفحة HTML ظاهرة لكل زائر على أي حال. فلا تضع فيها كلمة مرور أو مفتاح API أبدًا.

4. اطلب الخادم

اطلب من صفحة Next.js VPS أو صفحة Coolify VPS. كلتاهما تأتي بلوحة النشر Coolify. موقع HTML العادي بلا خطوة بناء، فلا يحتاج إلى الذاكرة التي يحتاجها Next.js، ويمكنك اختيار حجم أصغر في صفحة Coolify. بعد الدفع افتح خادمك من خوادمي في لوحة Seturack وانتظر حتى يقول صف التطبيق في تبويب نظرة عامة إنه جاهز.

5. انشر من اللوحة

1. في تبويب نظرة عامة افتح رابط عنوان اللوحة وسجّل الدخول إلى Coolify بصفّي البريد الإلكتروني وكلمة المرور.
2. في صفحة Projects، افتح My first project ثم production، واضغط New resource.
3. اختر Public Git Repository وأدخل عنوان مستودع GitHub واضغط Check repository.
4. تحت Build pack اختر Static، واترك Base Directory على / واضغط Continue. يتيح هذا الخيار نشر الملفات كما هي، بلا بناء.
5. اضغط Deploy. وحين ينتهي افتح عنوان HTTPS في صفحة Domains.

هذا كل شيء، موقعك على الهواء. صلاحية root لك، ويمكنك إدارة كل شيء من اللوحة إن فضّلت.

أداة برمجة تفعل هذا عنك

إذا كنت ستغيّر الموقع كثيرًا فأداة برمجة مثل Claude Code أو Cursor تسهّل الأمر. افتح المجلد الذي فيه index.html في الأداة، وانسخ صف الصقه في أداة الذكاء الاصطناعي من لوحة Seturack والصقه. تنشئ الأداة المستودع وتنشر الموقع وتعطيك العنوان. وفي دليل أدوات البرمجة لدينا التفاصيل. ونافذتا المحادثة في ChatGPT وClaude لا تستطيعان إرسال أوامر إلى خادم، فلا تلصق ذلك النص فيهما.

أربعة أشياء تستحق المعرفة

• النماذج: نموذج اتصال بـ HTML عادي لا يستطيع إرسال بريد بنفسه. ولكي تستقبل الرسائل يجب أن يتصل بخدمة نماذج أو بشيفرة على الخادم.
• الحسابات والمدفوعات: تسجيل الدخول والسجلات المخزنة والمدفوعات تحتاج إلى شيفرة خادم وقاعدة بيانات. وعندها يصبح موقعك تطبيقًا.
• أسماء الملفات: يعامل الخادم الأحرف الكبيرة والصغيرة على أنها مختلفة. فإذا كتبت الشيفرة logo.png وكان الملف Logo.PNG فلن تظهر الصورة.
• النسخ الاحتياطية: النسخ الاحتياطية اليومية مشمولة في السعر، وتبقى النسخة الرئيسية من موقعك على GitHub.

الأسئلة الشائعة

كم RAM يحتاج موقع HTML بسيط؟

بلا بناء، لا يطلب الموقع نفسه إلا القليل جدًا، فيضع Coolify الحد الأدنى. وتطلب وثائقه 2 نواة و2 GB من RAM على الأقل. ويوصي خيار Next.js بأكثر بسبب عمليات البناء: 4 GB من RAM على الأقل و2 vCore و40 GB من القرص.

كم تبلغ التكلفة شهريًا؟

سعر الحجم الأدنى الموصى به لخيار Next.js نحو $6 شهريًا (شاملًا ضريبة القيمة المضافة)، ومن خارج تركيا تدفع بالدولار الأمريكي. وستجد أحجامًا أصغر في صفحة الأسعار. النسخ الاحتياطية اليومية مشمولة في السعر والترافيك غير محدود. والنطاق تكلفة منفصلة تشتريه من مكان آخر.

كيف أربط نطاقي الخاص؟

وجّه سجل A إلى عنوان IP للخادم لدى مزوّد نطاقك. وفي Coolify اضغط Add domain في صفحة Domains وأدخل نطاقك مع https واحفظ واضغط Redeploy. وتصدر الشهادة تلقائيًا. ويشرح مقال النطاق لدينا سجل A.

كيف أحدّث الموقع لاحقًا؟

اطلب التعديل من ChatGPT أو Claude، وارفع index.html الجديد إلى GitHub بالاسم نفسه، واضغط Redeploy في Coolify. وللنشر مع كل رفع أضف العنوان من صفحة Webhooks في التطبيق إلى GitHub، كما يشرح دليل Next.js لدينا.

هل أحتاج إلى قاعدة بيانات؟

ليس لموقع HTML عادي. ولتخزين بيانات الزوار يمكنك إنشاء PostgreSQL في Coolify على الخادم نفسه، لكنك ستحتاج أيضًا إلى شيفرة خادم لاستخدامها. وعند تلك المرحلة انتقل إلى دليل نشر التطبيقات لدينا.

جاهز على Seturack: Next.js, Coolify.