ورشة 15 دقيقة · كلاودفلير

مشروعك يستاهل
أكثر من localhost

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

… مشروع انبنى هنا 330+ مدينة 0 ريال
جرّب المساعد ↓ حمّل الملفات
الرياض
0
نقطة البداية

بنيت شيئًا جميلًا…
ولا أحد يقدر يشوفه

طلبت من كلود أو كيرسر موقعًا، واشتغل على جهازك، وانبسطت. ثم جاء السؤال: كيف أوريه لأحد؟ ثلاثة أسئلة تقف بينك وبين العالم، ولكل واحد منها أداة مجانية.

«كيف أنشره للأبد؟»
رابط دائم يشتغل بعد ما تطفّي جهازك ← Pages
«كيف أخلّيه يفكّر؟»
نماذج، بيانات، ذكاء اصطناعي، ومفاتيح API مخفية ← Workers
«كيف أوريه لأحد الآن، قبل ما أنشره؟»
رابط مؤقت يفتح مشروعك من جهازك مباشرة ← Tunnel
1
الأداة الأولى

انشر موقعك للعالم

Cloudflare Pages
💡 تخيّلها: رسمت لوحة جميلة، و Pages معرض عالمي يعلّقها في 330+ مدينة في نفس اللحظة. زائرك في الرياض يشوفها من الرياض، وزائرك في طوكيو من طوكيو. مجانًا.
  • الزيارات: بلا حدود. لو انتشر موقعك فجأة، ما تدفع ريالًا واحدًا.
  • 500 عملية نشر شهريًا وهذا أكثر من كافي.
  • HTTPS تلقائي. القفل الأخضر يجيك بدون ما تسوي شيء.
  • دومينك الخاص مدعوم. تربط mysite.com بضغطات.

أسرع طريقة: سحب وإفلات

  1. سجّل مجانًا في dash.cloudflare.com
  2. اختر Workers & Pages ثم Create ثم تبويب Pages
  3. اختر Upload assets واسحب مجلد موقعك
  4. سمِّ مشروعك… وخلال ثوانٍ صار حيًّا 🎉
💬 قل هذا لأداتك، وهي تنشرالصقه في كلود كود أو كيرسر داخل مجلد مشروعك
Prepare my project for Cloudflare Pages: make sure index.html is at the
root of the folder and that all image and asset paths are relative.
Then deploy it to Cloudflare Pages and give me the final URL.
الطريقة الثانية: اربطه بـ GitHub، وكل تعديل ترفعه يُنشر تلقائيًا، ومع كل تجربة يعطيك رابط معاينة خاصًا تشاركه قبل الاعتماد.
مجلدك index.html yoursite.pages.dev
2
الأداة الثانية

خلّي موقعك يفكّر

Cloudflare Workers
💡 تخيّلها: موظف صغير خارق يقف عند باب موقعك. كل ما وصل طلب، ينفّذه فورًا، بدون ما تستأجر له مكتبًا (سيرفر) أو تدير أي شيء.

موقعك على Pages واجهة صامتة، جميلة لكنها لا تفكّر. الـ Worker هو العقل الصغير الذي يضيف الحياة.

  • 100,000 طلب يوميًا مجانًا وهذا يفوق حاجة أي مشروع شخصي.
  • محرر داخل المتصفح. بدون تثبيت أي شيء على جهازك.
  • يخفي مفاتيح الـ API. وهذا أهم سبب تحتاجه.
💬 قل هذا لأداتك، وهي تضيف العقلنفس الشي اللي شفته قبل شوي · المفتاح المجاني من aistudio.google.com/apikey
Add a Cloudflare Worker to my project that takes a question from my page
and answers it using the Gemini API with model gemini-3.6-flash.
Store the key in a Worker Secret named GEMINI_API_KEY.
Never put the key in the page code.
Then deploy the Worker, connect it to my site, and give me the URL.
لماذا لا يكفي الموقع الساكن؟ أي مفتاح API تضعه في كود الصفحة يقدر أي زائر يقرأه بضغطة واحدة. الـ Worker هو المكان الوحيد الذي يبقى فيه المفتاح مخفيًا، لأنه يشتغل على السيرفر، لا في متصفح الزائر.
الزائر السيرفر، مخفي عن الزائر Worker API KEY بياناتك الذكاء الاصطناعي

⚡ المساعد يشتغل الآن على Worker

اكتب فكرة مشروعك… وشوف الصفحة تتغيّر لك أنت
متصل
أهلًا 👋 قل لي وش تبي تبني، وأنا أجهّز لك الصفحة على مقاسك: وش الخدمات اللي تحتاجها، وخطوات النشر، والتكلفة.
✦ لوحتك فاضية.
اكتب فكرتك على اليمين وبتنبني هنا.

وش صار قبل شوي؟

  1. رسالتك راحت إلى Worker، لا إلى Google مباشرة.
  2. الـ Worker أضاف مفتاح Gemini من مكان آمن، وأرسل الطلب.
  3. Gemini ما ردّ بنص فقط، بل استدعى دوال عرّفناها له مسبقًا.
  4. المتصفح نفّذ تلك الدوال، فتغيّرت الصفحة أمامك. هذا هو الـ Agentic UI.
افتح أدوات المطوّر وشوف: ما بتلقى مفتاح Gemini في أي مكان في الصفحة. لأنه لم يغادر الـ Worker إطلاقًا.

🧪 المختبر: نسخة أعمق

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

افتح المختبر ←

مشاريع الحاضرين اليوم

ما بدأ أحد بعد، كن أول واحد
3
الأداة الثالثة

شارك جهازك مع العالم

Cloudflare Tunnel
💡 تخيّلها: مشروعك شغّال على جهازك فقط، وصديقك في مدينة ثانية يبغى يجربه الآن. النفق يمد «خرطومًا سحريًا» من جهازك إلى شبكة كلاودفلير، ويعطيك رابطًا يفتح مشروعك من أي مكان.

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

$ cloudflared tunnel --url http://localhost:3000
 
+--------------------------------------------+
| Your quick Tunnel has been created! |
| https://calm-river-4821.trycloudflare.com |
+--------------------------------------------+

التثبيت مرة واحدة فقط

# ماك
$ brew install cloudflared
# ويندوز
> winget install Cloudflare.cloudflared
💬 أو قل لأداتك بدل ما تحفظ الأمرتفتح لك النفق وتعطيك الرابط
Start a temporary Cloudflare tunnel pointing to http://localhost:3000
and give me the public URL.
  • بدون حساب وبدون تسجيل. تشتغل فورًا.
  • الرابط مؤقت. ينتهي لحظة ما تسكّر الأمر أو تطفّي الجهاز.
  • ممتازة لـ: عرض سريع، رأي صديق، تجربة الموقع من جوالك.
⚠️ ليست للإطلاق الرسمي. لا ضمان استمرارية، والحد 200 طلب متزامن. للإطلاق الحقيقي استخدم Pages.
800,000 صورة جهازك · localhost:3000 كلاودفلير trycloudflare.com
4
تأخذه معك

كل اللي شفناه مكتوب لك

ملفات .md تفتحها في أي مكان: كلود، كيرسر، نوشن، أو محرر نصوص. وفيها تفاصيل أكثر مما وسعه الوقت.

01-pages.md

انشر موقعك

الطريقتان بالتفصيل، الحدود المجانية، وربط دومينك الخاص.

تحميل
02-workers.md

خلّيه يفكّر

كود الـ Worker كامل، إخفاء المفاتيح، واستدعاء الدوال الذي شفته.

تحميل
03-tunnel.md

شارك جهازك

التثبيت، الأوامر، الأنفاق الدائمة، ومتى لا تستخدمها.

تحميل
04-challenge.md

تحدي هذا الأسبوع

خمس خطوات من فكرة إلى رابط حقيقي تشاركه معنا.

تحميل
05-setup.md

ابدأ من هنا

الحساب والأدوات، وكيف تبدأ اليوم بدون حساب أصلًا.

تحميل

📦 المجلد الجاهز

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

⬇ حمّل المجلد
القاعدة الذهبية للـ Vibe Coder: إذا تعثرت في أي خطوة، انسخ رسالة الخطأ كاملة والصقها في أداتك المفضلة واطلب الحل. هذي هي الطريقة 😄
…