استضف Artifact من Claude على رابط خاص به، مع React

أيّ النوعين لديك

• HTML، إن كان الكود يبدأ بـ<!DOCTYPE html> أو <html>. إنه صفحة كاملة بالفعل.
• React، إن كان يبدأ بأسطر import وفيه export default function. إنه مكوّن، لا صفحة. في Claude، تُوفّر نافذة الـArtifact الصفحة المحيطة به، وReact نفسه، وأنماط Tailwind، والمكتبات التي يستوردها.
• يصنع Canvas في ChatGPT النوعين نفسيهما، وينطبق على كل منهما الأمر ذاته. انشر Canvas من ChatGPT برابط.

صفحة HTML: أي استضافة ثابتة

الاستضافة الثابتة تأخذ ملفاتك وتقدّمها كما هي، على عنوان https. ويعمل GitHub Pages وCloudflare Pages وNetlify وtiiny.host بهذه الطريقة، وكذلك Solta. بعضها يطلب حسابًا ومشروعًا أولًا. أما Netlify Drop فيقبل مجلدًا أو ملف zip دون حساب للبدء، بحسب دليل Netlify نفسه، كما قُرئ في 13 أكتوبر 2026.

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

ولترى صفحة HTML تعمل قبل أن تذهب إلى أي مكان، الصقها في عارض HTML: يعمل في متصفحك، ولا يُرسل شيء إلى أي مكان حتى تنشرها.

مكوّن React: يجب أن يتحول إلى صفحة أولًا

تقدّم الاستضافة الثابتة ملف .jsx كما هو، ولا يستطيع المتصفح تشغيله. يجب تحويل JSX إلى JavaScript، وأن يشير كل import إلى ملف حقيقي، وأن يركّب شيءٌ ما المكوّنَ في صفحة. ودون ذلك تحصل على صفحة فارغة. وتقول صفحة tiiny.host نفسها الشيء ذاته: يظهر Artifact مكتوب بـReact صفحةً فارغة حين يغادر Claude، والحل عندها أن تطلب من Claude تحويله أولًا إلى ملف index.html مكتمل بذاته (كما قُرئت في 13 أكتوبر 2026).

هناك ثلاث طرق لهذه الخطوة. وأسباب كل منها في لماذا يُظهر ملف React من Claude صفحة فارغة.

1. ابنِه بنفسك

كما يفعل المطوّر. يعمل على أي استضافة، وتعيد بناءه بعد كل تغيير.

1. أنشئ مشروع React باستخدام Vite:

   npm create vite@latest my-page -- --template react
   cd my-page && npm install

2. استبدل src/App.jsx بملف Claude، وشغّل npm install لكل حزمة يستوردها، مثل recharts أو lucide-react.
3. أضف Tailwind مع إضافته لـVite، @tailwindcss/vite. وإن كان الملف يستورد من @/components/ui/، فأعِدّ shadcn/ui أيضًا، كي توجد تلك المكوّنات.
4. شغّل npm run build وارفع مجلد dist الذي ينشئه.

2. اطلب من Claude ملف HTML واحدًا

اطلب منه إعادة كتابة المكوّن صفحةَ HTML واحدة تحمّل React من شبكة CDN. ينجح هذا مع مكوّن بسيط، وتصلح النتيجة لأي استضافة ثابتة. وهناك أمران يجب معرفتهما. هذه الصفحات تحوّل JSX عادةً في متصفح كل زائر باستخدام Babel، الذي تنصح وثائقه نفسها بعدم فعل ذلك في بيئة الإنتاج. والاستيراد من @/components/ui/ ليس له CDN يُحمَّل منه، فعلى Claude أن يعيد كتابة تلك الأجزاء يدويًا.

3. دع Solta يبنيه

يحوّل Solta المكوّن إلى صفحة حين تنشره. الصق الملف الذي كتبه Claude، فيُجمَّع مع React وTailwind ومكوّنات shadcn/ui التي يستوردها، ويُركَّب في صفحة ويُقدَّم على عنوانه الخاص. وتُعاد كتابة الاستيرادات من npm إلى إصدارات مثبّتة يجلبها متصفح الزائر من esm.sh، فلا تُحمَّل حزمة لا يملكها esm.sh.

إن لم يكن في الملف export default ولم يركّب نفسه، يقول Solta ذلك بدلًا من نشر صفحة فارغة. وإن أطلق المكوّن خطأً أثناء عرضه، تُظهر الصفحة الخطأ.

ما يأتي مع رابط على Solta

• عنوان خاص به على solta.site. ونطاقك الخاص: نطاق واحد في خطة Plus، و10 في خطة Pro، وبقدر ما تحتاج في خطة Team.
• اختيار من يستطيع فتحه: عام أو غير مُدرج أو خاص في كل الخطط؛ وكلمة مرور في كل الخطط؛ وأشخاص بأسمائهم يتحققون من بريدهم مرة، في خطط Pro وTeam؛ ومساحة عملك فقط، في خطة Team. من يستطيع فتح الموقع.
• النسخ. ينتظر التغيير مسودةً حتى تنشره، ولا يتغير الرابط.
• تضمينه في موقع شركتك بشيفرة واحدة، لموقع عام أو غير مُدرج. وفي خطة Free يحمل شارة Solta صغيرة.
• تثبيته على الهاتف، كأنه تطبيق. كيف تضعه على هاتفك.

الحدود: ملف واحد حتى 10 MB، ومجلد أو ملف zip حتى 50 MB في Free، و100 MB في Plus، و250 MB في Pro وTeam. ملفات ثابتة فقط: لا يعمل أي شيء خاص بك على خادم. ما لا يعمل.

إن كان يستخدم Claude أثناء استخدام الناس له

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

من داخل المحادثة

أضف Solta إلى Claude أو ChatGPT كموصل مخصص، وعندها يمكنك أن تطلب منه نشر ما صنعه للتو. يعود الرابط في المحادثة. كيف توصل Claude أو ChatGPT.

أسئلة