كيف تصنع موقعا باستخدام ChatGPT: ثلاث طرق تنجح فعلا

لصناعة موقع باستخدام ChatGPT يمكنك أن تطلب منه كتابة ملفات HTML وCSS للموقع ثم رفعها على خدمة استضافة بنفسك، أو أن تستعين به في تخطيط الصفحات وكتابة المحتوى قبل البناء في أداة مواقع، أو أن تربط أداة بناء ذكية مثل Mythex داخل ChatGPT ليبني الموقع وينشره لك من المحادثة نفسها. الطريقة الأولى مجانية وتكفي لموقع من صفحة واحدة؛ أما الثالثة فهي الأنسب عندما يحتاج الموقع إلى نماذج تحفظ البيانات أو تسجيلات دخول أو تحديثات منتظمة. يعرض هذا الدليل كل طريقة مع الأوامر المناسبة، ويوضح أين تتوقف كل واحدة.

ما الذي يستطيع ChatGPT فعله وما الذي لا يستطيعه وحده

ChatGPT ممتاز في الكتابة: الكود والعناوين ونصوص الصفحات والخطط. لكنه ليس شركة استضافة في الأصل. لا يمنح موقعك عنوانا عاما، ولا يشغّل قاعدة بيانات، ولا يحتفظ بملفات موقعك بين المشاريع كما تفعل أداة البناء. كل طريقة أدناه هي حل مختلف لهذه الفجوة.

الطريقة الأولى: ChatGPT يكتب الكود وأنت تستضيفه

هذه هي الطريقة التقليدية، وتعمل جيدا مع موقع ثابت بسيط: ملف أعمال شخصي، أو صفحة هبوط، أو صفحة مناسبة لحفل زفاف.

الخطوة 1: اطلب صفحة كاملة في ملف واحد

كن محددا في المحتوى والتخطيط:

اكتب موقع صفحة واحدة كاملا في ملف HTML واحد، مع وضع CSS داخل وسم style. الموقع لـ مايا حداد، رسامة مستقلة في عمّان. الأقسام: رأس فيه اسمها وعبارة «رسوم للكتب والعلامات التجارية»، وشبكة من ستّ صور من أعمالها (استخدم مسارات صور وهمية أستطيع استبدالها)، وفقرة قصيرة عنها، وقائمة من ثلاث خدمات مع أسعار البداية، وقسم تواصل يحتوي بريدها الإلكتروني كرابط mailto. تصميم نظيف وحديث، مساحات بيضاء واسعة، ويعمل على الهواتف. بدون أطر عمل JavaScript.

طلب ملف واحد يبسّط الحفظ والرفع.

الخطوة 2: احفظ الملف وافتحه

انسخ الكود إلى محرر نصوص، واحفظه باسم index.html، ثم افتحه في متصفحك. إذا ظهر شيء غير صحيح، صفه لـ ChatGPT: «شبكة الصور تظهر عمودا واحدا على الحاسوب؛ اجعلها ثلاثة أعمدة فوق عرض 900 بكسل».

الخطوة 3: استبدل العناصر الوهمية

استبدل الصور الوهمية بصورك، واستبدل أي نص اخترعه ChatGPT. تحقق من الأسعار والبريد الإلكتروني والأسماء بعناية، فالذكاء الاصطناعي يملأ الفراغات بثقة زائدة.

الخطوة 4: انشره على الإنترنت

ارفع الملف على استضافة ثابتة مجانية مثل GitHub Pages، أو على أي استضافة تدفع ثمنها أصلا. ستحصل على عنوان عام. ولاستخدام نطاقك الخاص، اتبع تعليمات الاستضافة؛ ويشرح دليلنا عن ربط نطاق مخصص جزء DNS.

أين تتوقف الطريقة الأولى

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

الطريقة الثانية: ChatGPT يخطط وأداة بناء تنفذ

هنا يقوم ChatGPT بالتفكير والكتابة، وتقوم أداة المواقع بالبناء والاستضافة.

الخطوة 1: خطط الموقع مع ChatGPT

أدير مخبز عائليا صغيرا في مانشستر يستقبل طلبات الكعك. اقترح الصفحات التي يحتاجها موقعي، وما يجب أن تقوله كل صفحة، والإجراء الواحد الذي أريد أن يقوم به الزائر في كل صفحة. اجعل العدد خمس صفحات أو أقل.

الخطوة 2: اكتب النص

اطلب نص كل صفحة، ثم أعد صياغته بأسلوبك. أضف التفاصيل الحقيقية التي لا يعرفها ChatGPT: ساعات العمل، والأسعار، ومناطق التوصيل، وما يميز كعكاتك.

الخطوة 3: ابنِ الموقع في أداة بناء

الصق الخطة والنص في أداة مواقع. في الأدوات التي تعمل بالسحب والإفلات، تضع النص داخل قالب جاهز. أما في أدوات البناء بالذكاء الاصطناعي فيمكنك إعطاء الخطة كاملة في رسالة واحدة فتبني الصفحات؛ مثلا في منشئ المواقع من Mythex:

ابنِ موقعا لمخبز عائلي في مانشستر باستخدام هذه الخطة والنص: [الصق هنا]. أضف نموذج طلب طلبية يحفظ كل طلب (الاسم، الهاتف، نوع الكعكة، التاريخ المطلوب، رسالة) حتى أستطيع رؤيتها في صفحة إدارة لا يدخلها سواي. تصميم دافئ ومريح، ويعمل على الهواتف.

نموذج الطلبات هنا يحفظ في قاعدة بيانات حقيقية، وهذا ما لا تستطيعه ملفات HTML الملصقة. لمزيد عن هذا المسار، راجع كيف تبني موقعا بالذكاء الاصطناعي.

الطريقة الثالثة: البناء والنشر من داخل ChatGPT

الخيار الأحدث هو ربط أداة بناء بـ ChatGPT حتى تستخدم أدوات البناء مباشرة. تبقى داخل محادثة ChatGPT، وتتولى الأداة المشروع والمعاينة وقاعدة البيانات والاستضافة.

تعمل Mythex بهذه الطريقة عبر تطبيقها داخل ChatGPT (وهو موصل MCP). تربطه من إعدادات الحساب في Mythex؛ والربط متاح في أي خطة، أما الأدوات التي تشغّل بيئة مشروعك فتحتاج إلى خطة Pro. وبعد الربط يمكنك أن تقول لـ ChatGPT شيئا مثل:

باستخدام Mythex، أنشئ موقعا جديدا لمخبزي فيه صفحة رئيسية، وصفحة للقائمة فيها الكعك مع الأسعار، ونموذج طلب يحفظ في قاعدة بيانات. اعرض لي المعاينة، وانشره عندما أوافق.

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

أي طريقة تختار؟

نصائح في كتابة الأوامر تنفع في أي طريقة

• قدم الحقائق الحقيقية من البداية. الاسم والمكان والخدمات والأسعار وبيانات التواصل. كلما قلّت التفاصيل المخترعة قلّ التنظيف لاحقا.
• صف الزائر والهدف. «والد يبحث عن كعكة عيد ميلاد، ويجب أن ينتهي بإرسال طلب طلبية».
• اطلب تخطيطا يبدأ من الهاتف. معظم الزوار يستخدمون الهواتف.
• غيّر شيئا واحدا في كل رسالة بعد أن تتوفر النسخة الأولى.
• اطلب أساسيات تحسين محركات البحث صراحة: عنوان ووصف فريدان لكل صفحة، وعناوين حقيقية، ونص بديل للصور. راجع تحسين محركات البحث للمواقع المبنية بالذكاء الاصطناعي.

يقدم دليلنا عن كتابة الأوامر لأدوات بناء التطبيقات بالذكاء الاصطناعي أنماطا أخرى مفيدة.

مشكلات شائعة وحلولها

• التصميم يبدو عاما. أعطِ مرجعا: «مثل مقهى إسكندنافي هادئ، فيه كثير من الأبيض ولون أخضر خافت واحد».
• الكود انقطع. اطلب من ChatGPT أن يكمل من السطر الأخير، أو أن يقسم الصفحة إلى أقسام ويعطيك كل قسم على حدة.
• اخترع شهادات أو إحصاءات. احذفها. التقييمات المزيفة تضر الثقة، وهي في كثير من الأماكن مخالفة لقوانين حماية المستهلك.
• يتعطل الموقع بعد تعديل. احتفظ بنسخة من آخر نسخة تعمل قبل لصق كود جديد. وأدوات البناء مثل Mythex تحفظ نقاط استعادة حتى تعود إلى نسخة سابقة.

قبل النشر

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

الأسئلة