كيف تستضيف موقعاً ثابتاً مجاناً في 2026: GitHub Pages وCloudflare Pages ونماذج التواصل

اختيار منصة استضافة المواقع الثابتة المناسبة قد يوفّر عليك مئات الدولارات سنويًا، مع الحفاظ على سرعة موقعك وأمانه وسهولة صيانته. الخطط المجانية تطورت كثيرًا في السنوات الأخيرة، ومنصات مثل GitHub Pages وCloudflare Pages باتت توفر بنية تحتية جاهزة للإنتاج بدون أي تكلفة. لكن هناك تحدٍّ واحد تتجاهله معظم الشروحات: كيف تتعامل مع نماذج التواصل على موقع ثابت لا يوجد فيه سيرفر لمعالجة البيانات؟ هذا الدليل يأخذك خطوة بخطوة عبر كامل عملية الإعداد، من اختيار المنصة إلى تشغيل نموذج تواصل فعلي، مع أمثلة عملية وقيود حقيقية تحتاج أن تعرفها قبل أن تبدأ.

لماذا تستحق الاستضافة المجانية للمواقع الثابتة اهتمامك

الموقع الثابت يقدّم ملفات HTML وCSS وJavaScript جاهزة مسبقًا مباشرةً إلى المتصفح. لا يوجد PHP، ولا runtime لـNode.js، ولا استعلامات قاعدة بيانات عند كل تحميل للصفحة. هذه البساطة بالذات هي ما يجعل استضافة الصفحات الثابتة المجانية موثوقة للغاية: لا شيء يمكن أن يتعطل أو يحتاج تحديثًا أو توسيعًا.

للشركات الصغيرة والمحافظ الشخصية وصفحات هبوط تطبيقات SaaS ومواقع التوثيق، تحقق الاستضافة الثابتة كل المتطلبات:

• السرعة: الملفات تُقدَّم من أقرب عقدة في شبكة CDN، وغالبًا في أقل من 100ms على مستوى العالم.
• الأمان: غياب runtime على جانب السيرفر يعني سطح هجوم أصغر بكثير.
• التكلفة: كلٌّ من GitHub Pages وCloudflare Pages مجانيان للمشاريع العامة وكثير من المشاريع الخاصة.
• البساطة: ادفع الكود إلى المستودع وسيُنشر الموقع تلقائيًا.

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

مقارنة المنصات: GitHub Pages مقابل Cloudflare Pages

الخلاصة: إذا كان جمهورك عالميًا وتريد أسرع أوقات تحميل ممكنة، فـCloudflare Pages هو الخيار الأفضل. أما إذا كان فريقك يعمل أصلًا على GitHub وتريد أبسط إعداد ممكن، فـGitHub Pages يؤدي الغرض تمامًا.

خطوة بخطوة: النشر على GitHub Pages

هذا المثال يفترض أن لديك موقعًا بسيطًا بـHTML/CSS جاهزًا للنشر. إذا كنت تستخدم مولّد مواقع ثابتة مثل Hugo أو Jekyll، فالعملية تكاد تكون مطابقة.

1. أنشئ مستودعًا على GitHub. اذهب إلى github.com/new وأنشئ مستودعًا عامًا. سمِّه your-username.github.io إذا أردت أن يُخدَم على النطاق الجذري، أو أي اسم آخر إذا أردت مسارًا فرعيًا.
2. ادفع ملفات موقعك. من مجلد مشروعك المحلي، نفّذ:

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. فعّل GitHub Pages. في المستودع، اذهب إلى Settings > Pages. تحت "Source"، اختر الفرع main والمجلد /root (أو /docs إذا كان مخرج البناء يذهب إليه). اضغط Save.
4. انتظر اكتمال النشر. سيقوم GitHub بالبناء والنشر خلال 1-3 دقائق. ستظهر لك رابط الموقع المباشر (مثل https://your-username.github.io) في لوحة إعدادات Pages.
5. ربط نطاق مخصص (اختياري). أضف ملف CNAME إلى جذر مستودعك يحتوي على اسم نطاقك (مثل www.yoursite.com). ثم حدّث مزود DNS الخاص بك لتوجيه سجل CNAME نحو your-username.github.io. سيقوم GitHub بإصدار شهادة SSL تلقائيًا خلال دقائق قليلة.

خطوة بخطوة: النشر على Cloudflare Pages

1. سجّل أو سجّل دخولك إلى Cloudflare. اذهب إلى pages.cloudflare.com وربط حساب GitHub أو GitLab الخاص بك.
2. أنشئ مشروعًا جديدًا. اضغط "Create a project"، ثم "Connect to Git". اختر مستودعك من القائمة.
3. اضبط إعدادات البناء. إذا كان موقعك HTML عاديًا، اترك حقل أمر البناء فارغًا واضبط مجلد المخرجات على / أو أي مكان يوجد فيه ملف index.html. بالنسبة لـHugo، اضبط أمر البناء على hugo والمخرجات على public. بالنسبة لـJekyll، استخدم jekyll build والمخرجات على _site.
4. انشر. اضغط "Save and Deploy". سيقوم Cloudflare باستنساخ مستودعك وتشغيل البناء ونشره على شبكته الطرفية العالمية. سيحصل موقعك فورًا على نطاق فرعي *.pages.dev.
5. أضف نطاقًا مخصصًا. في لوحة تحكم مشروعك، اذهب إلى "Custom domains" وأدخل نطاقك. إذا كان نطاقك مدارًا بالفعل عبر Cloudflare DNS، فالإعداد بنقرة واحدة. وإلا، ستحتاج إلى إضافة سجل CNAME عند مسجّل نطاقك يشير إلى عنوان *.pages.dev الخاص بك.

كل git push لاحق إلى الفرع الرئيسي يُشغّل إعادة نشر تلقائية. كما يُنشئ Cloudflare نشرات معاينة لطلبات السحب (pull requests)، وهو أمر مفيد لمراجعة التغييرات قبل نشرها للعموم.

إضافة نموذج تواصل إلى موقعك الثابت

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

• خدمة معالجة النماذج (الموصى به): توجّه خاصية action في نموذجك إلى endpoint خارجي يستقبل الإرسال ويتحقق منه ويرسله إلى بريدك الإلكتروني.
• دالة serverless: تكتب دالة صغيرة (Cloudflare Workers أو AWS Lambda) تعالج النموذج. هذا يعمل لكنه يتطلب كودًا وصيانة مستمرة.
• JavaScript fetch(): تستخدم fetch API في المتصفح لإرسال بيانات النموذج إلى endpoint خلفي. راجع دليلنا حول كيفية إرسال بيانات نموذج HTML باستخدام JavaScript fetch() للتفاصيل التقنية.

أسرع طريقة للحصول على نموذج يعمل هي استخدام خدمة نماذج متخصصة. إليك مثالًا عمليًا باستخدام Sendform:

مثال عملي: نموذج تواصل يعمل في 5 دقائق

قبل إضافة أي كود إلى موقعك، تحتاج إلى إعداد حساب Sendform وإنشاء endpoint للنموذج. تستغرق العملية نحو دقيقتين:

1. سجّل في Sendform.net. أنشئ حسابًا مجانيًا - لا حاجة لبطاقة ائتمان. بعد التسجيل ستجد مشروعًا افتراضيًا جاهزًا.
2. أنشئ نموذجًا. في لوحة التحكم، اضغط "New Form". أعطه اسمًا، اختر مشروعًا، وأدخل عنوان البريد الإلكتروني الذي تريد استقبال الإرسالات عليه. سيتحقق Sendform من هذا العنوان قبل تفعيل الـendpoint.
3. انسخ رابط الـendpoint. بعد إنشاء النموذج، ستجد رابط endpoint فريدًا بالصيغة https://sendform.net/!your-form-id. انسخه - هذا ما ستلصقه في كود HTML الخاص بك.

بعد الحصول على الـendpoint، أضف كود HTML التالي إلى موقعك الثابت:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

استبدل your-form-id بالمعرّف الظاهر في لوحة تحكم Sendform. كل إرسال سيُحوَّل بعدها إلى البريد الإلكتروني الذي أكّدته أثناء الإعداد. لا كود خلفي، لا سيرفر، لا فاتورة بنية تحتية شهرية. للاطلاع على أنماط تجربة مستخدم أكثر تقدمًا، بما فيها صفحات إعادة التوجيه بعد الإرسال ورسائل التأكيد، اقرأ دليلنا حول أفضل ممارسات نماذج المواقع الثابتة.

إذا كنت تستخدم منشئ مواقع إلى جانب موقعك الثابت، فنحن نغطي عملية التكامل بالتفصيل في مقالنا حول كيفية دمج Sendform مع منشئ موقعك.

أخطاء شائعة يجب تجنبها

بعد مساعدة آلاف المستخدمين في إعداد استضافة مجانية للمواقع الثابتة، هذه هي الأخطاء التي تسبب أكبر قدر من الإحباط:

1. نسيان صفحة 404

كلٌّ من GitHub Pages وCloudflare Pages سيعرضان صفحة خطأ عامة إذا لم يُعثر على المسار المطلوب. أنشئ ملف 404.html مخصصًا في المجلد الجذري. هذا يبقي المستخدمين على موقعك ويحمي تجربتهم.

2. رفع البيانات السرية إلى مستودع عام

مفاتيح API وأسرار الـendpoints وعناوين البريد الإلكتروني يجب ألا تكون موجودة في مستودع GitHub عام أبدًا. استخدم متغيرات البيئة في Cloudflare Pages، أو أشر إلى ملف إعداد خاص مدرج في .gitignore.

3. بناء نموذج بدون خطة لمعالجة البيانات

هذا أكثر الأخطاء شيوعًا. يبني المطورون نموذج تواصل جميلًا، يرفعونه إلى GitHub Pages، ثم يكتشفون يوم الإطلاق أن النموذج يفشل بصمت. حدّد خدمة معالجة النماذج قبل أن تكتب وسم <input> واحدًا. أدوات مثل Sendform تتيح لك إعداد نموذج تواصل يرسل مباشرةً إلى البريد الإلكتروني بدون أي كود، مما يُزيل مشكلة الجانب الخلفي كليًا.

4. تجاهل مشكلات ذاكرة التخزين المؤقت للبناء

إذا لم يتحدث موقعك بعد الرفع، قد تكون شبكة CDN تقدّم ملفات قديمة من الكاش. Cloudflare Pages يُفرغ الكاش تلقائيًا عند كل نشر. GitHub Pages أبطأ في نشر التغييرات؛ انتظر حتى 10 دقائق، أو أضف query string إلى روابط أصولك أثناء الاختبار.

5. استخدام المسارات النسبية بشكل خاطئ

إذا كان موقع GitHub Pages الخاص بك يعيش في username.github.io/project-name/ (مسار فرعي)، فجميع مسارات الأصول يجب أن تأخذ هذا البادئة بعين الاعتبار. رابط مثل /styles.css سينكسر. استخدم المسارات النسبية (./styles.css) أو اضبط إعداد baseURL في مولّد موقعك الثابت ليتطابق مع المسار الفرعي.

6. تجاهل أتمتة سير عمل النماذج

بمجرد أن يبدأ نموذجك في استقبال الإرسالات، يمكنك فعل أكثر بكثير من مجرد استقبال رسائل بريد إلكتروني. Sendform يدعم الـwebhooks والتكاملات التي تتيح لك توجيه الإرسالات تلقائيًا إلى Slack أو نظام CRM أو جدول بيانات. دليلنا حول أتمتة سير عمل النماذج باستخدام الـwebhooks وAPIs يوضح لك كيفية إعداد ذلك بدون كتابة أي كود خلفي.

الخلاصة

استضافة المواقع الثابتة المجانية لم تكن أكثر قدرةً من أي وقت مضى. GitHub Pages مناسب للفرق المنغمسة أصلًا في منظومة GitHub، بينما يوفر Cloudflare Pages أداءً عالميًا أفضل وخطة مجانية أكثر سخاءً. التحدي الحقيقي ليس في الاستضافة نفسها - بل في الميزات الديناميكية، وخاصةً نماذج التواصل، التي تُربك الناس. بدمج أي من المنصتين مع خدمة نماذج متخصصة، تحصل على موقع احترافي متكامل الوظائف بدون أي تكلفة بنية تحتية. ابدأ بأحد دليلَي المنصات أعلاه، أطلق موقعك، ثم اربط نموذج التواصل باستخدام Sendform لمعالجة الإرسالات بشكل موثوق منذ اليوم الأول.

أضف نموذج تواصل إلى موقعك الثابت في دقائق

استخدم Sendform لاستقبال إرسالات النماذج من أي موقع ثابت مستضاف على GitHub Pages أو Cloudflare Pages. لا كود خلفي، لا إعداد سيرفر، لا تعقيدات. فقط أشر خاصية action في نموذجك إلى الـendpoint الخاص بك وانتهيت.

ابدأ مجانًا في Sendform.net ←

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