مقال جديد ضمن سلسلة مقالات الاستضافات المجانية، وفي هذه المرة لن تحتاج إلى بطاقة ائتمان أو فيزا أو أي شيء إطلاقًا. ولكن، استخداماتها محدودة. الاستضافة التي سنتناولها اليوم هي استضافة للمواقع الثابتة (Static Websites).
ما هو الموقع الثابت (Static Website)؟
الموقع الثابت هو موقع لا يمكن للمستخدم أن يقوم فيه بأي إجراءات تفاعلية تتطلب معالجة من جانب الخادم، مثل الشراء أو حتى إرسال نموذج اتصال (Contact Form). لا يمكن إرسال النموذج الموجود في صفحة “اتصل بنا” على موقع ثابت بالطريقة التقليدية، ولكن هناك حل لمسألة نموذج الاتصال. كذلك، لا يمكن للمستخدم على سبيل المثال أن يضيف تعليقًا على تدوينة.
متى تستخدم الاستضافة الثابتة؟
المواقع الثابتة مناسبة تمامًا للاستضافة التي نستعرضها اليوم، وهي تشمل:
- موقع معرض أعمال (Portfolio): إذا كنت محترفًا وتريد عرض أعمالك.
- مواقع الشركات البسيطة: الشركات التي تحتاج لصفحات لعرض الخدمات، المعارض، ومعلومات التواصل.
في هذه المواقع، يمكن للزائر تصفح كل الخدمات التي تقدمها الشركة، وعندما يرغب في التواصل، يتجه إلى صفحة “اتصل بنا” ويملأ النموذج. هذا النموذج سيكون من طرف ثالث (Third-party) أو مزود خدمة خارجي، وهو الجزء الديناميكي الوحيد في موقعنا، أما بقية الموقع فهو ثابت.
كيفية تحويل موقع ووردبريس إلى موقع ثابت
ببساطة شديدة، سنقوم بإنشاء موقع عادي على ووردبريس باستخدام أي أداة بناء (Builder) تفضلها، وبإضافة بسيطة وخطوات قليلة سنحوله إلى موقع ثابت ثم نرفعه على استضافتنا. كل ما تحتاجه هو نطاقك (Domain)، وهو اسم الموقع نفسه، وبالطبع هذا ليس مجانيًا. فإذا كنت تملك النطاق وتريد استضافة لموقع بسيط، سواء كان معرض أعمال أو موقع شركة، فلنستعرض معًا الطريقة.
الموقع المعروض في المثال هو موقع مستضاف على الخدمة التي نتحدث عنها. هو موقع بصفحات بسيطة، وبالطGبع ثابت. المواقع الثابتة سريعة جدًا لأنها تتكون بالكامل من HTML، مما يجعل الصفحات تُحمَّل في لحظات. الاستضافة تدعم الصور، ولكن هناك حد للمساحة سنتطرق إليه لاحقًا. إذا كنت تريد إنشاء موقع مثل هذا دون دفع تكاليف استضافة، فأرى أن هذا الحل مناسب جدًا.
1. التعامل مع نماذج الاتصال (Contact Forms)
الجزء الخاص بنموذج الاتصال هو أحد القيود الموجودة لدينا. هذا النموذج هو الجزء الديناميكي الوحيد في الموقع. لحل هذه المشكلة، تم استخدام نموذج من خدمة Typeform. يمكنك أيضًا استخدام Google Forms المجانية، أو Zoho Forms، أو أي مزود خدمة نماذج آخر، ثم تقوم بتضمين (Embed) النموذج في صفحتك.
للقيام بذلك، اتبع الخطوات التالية:
- أنشئ موقعك على ووردبريس: يمكنك العمل على خادم محلي (Localhost) أو على أي استضافة أخرى. المهم أن يكون الموقع جاهزًا للنقل.
- تعديل صفحة الاتصال: عند إنشاء صفحة الاتصال، بدلًا من استخدام نموذج ووردبريس، ستقوم بتضمين كود من خدمة خارجية.
مثال باستخدام Typeform: بعد إنشاء حسابك وتصميم النموذج في Typeform، اتبع الخطوات التالية للحصول على كود التضمين:
- بعد الانتهاء من تصميم النموذج، اضغط على Publish.
- اذهب إلى قسم Share واختر Embed in a web page.
- ستجد زرًا لنسخ كود النموذج. انسخ هذا الكود.
مثال باستخدام Google Forms: إذا كنت تفضل Google Forms، يمكنك البحث في جوجل عن:
how to embed google forms in web page
اتبع الإرشادات الموجودة في النتائج للحصول على كود التضمين الخاص بنموذجك.
تضمين الكود في ووردبريس: بعد الحصول على كود التضمين من أي مزود خدمة، ارجع إلى موقعك في ووردبريس:
- حرر صفحة “اتصل بنا”.
- أضف عنصر “Custom HTML”.
- الصق الكود الذي نسخته داخل هذا العنصر.
- احفظ الصفحة.
عند عرض الصفحة، ستجد أن النموذج يظهر بشكل صحيح. عندما يقوم الزوار بإرسال النموذج، يمكنك رؤية البيانات في حسابك على Typeform، أو في Google Sheets إذا كنت تستخدم Google Forms، وذلك حسب الخدمة التي اخترتها.
2. تحويل الموقع باستخدام إضافة Simply Static
بعد أن أصبحت جميع صفحات الموقع جاهزة، سنقوم بتحويله إلى ملفات HTML ثابتة.
- اذهب إلى Plugins > Add New في لوحة تحكم ووردبريس.
- ابحث عن إضافة Simply Static.
- قم بتثبيت وتفعيل الإضافة.
- بعد التفعيل، اذهب إلى قائمة Simply Static في الشريط الجانبي واختر Generate.
- ستقوم الإضافة بمعالجة الموقع، وبعد الانتهاء سيظهر لك رابط لتنزيل الموقع كملف مضغوط (
.zip).
بذلك، أصبح موقعك جاهزًا للنقل إلى الاستضافة.
3. رفع الموقع على Cloudflare Pages
الاستضافة التي نستخدمها هي من Cloudflare.
- اذهب إلى حسابك المجاني في Cloudflare.
- من القائمة، اختر Workers & Pages.
- اضغط على Create application ثم اختر تبويب Pages واضغط على Upload assets.
هذه الخدمة تشبه GitHub Pages، فهي مكان يمكنك رفع ملفات ثابتة فيه وربطها بنطاق مخصص. الميزة مع Cloudflare هي أن ملفاتك تُوزَّع على خوادمها حول العالم، مما يمنحك سرعة وأمانًا فائقين، بالإضافة إلى خدمة DNS ممتازة.
خطوات الرفع:
- سيُطلب منك إدخال اسم للمشروع.
- اضغط على Create project.
- سيُطلب منك اختيار الملفات لرفعها. اختر ملف
.zipالذي قمت بتنزيله من إضافة Simply Static.
ملاحظة هامة: الحد الأقصى لحجم الملف هو 25 ميجابايت. لهذا السبب، يجب عليك ضغط جميع الصور على موقعك قبل تحويله باستخدام أدوات مثل Imagify أو ShortPixel ورفع صور بأحجام صغيرة.
- بعد اختيار الملف، سيبدأ الرفع.
- بعد انتهاء الرفع، ستمنحك Cloudflare نطاقًا مؤقتًا (مثل
your-project.pages.dev). قد لا يعمل الموقع فورًا، لذا امنحه من 5 إلى 10 دقائق ثم اضغط على Visit site. - تأكد من أن الموقع يعمل بشكل صحيح، وأن الصور ونموذج الاتصال وكل شيء آخر يُحمَّل بدون أخطاء.
4. ربط نطاق مخصص (Custom Domain)
لربط نطاقك الخاص بالموقع:
- من صفحة مشروعك في Cloudflare Pages، اذهب إلى تبويب Custom domains.
- اضغط على Set up a custom domain.
- ستظهر لك تعليمات لضبط سجلات DNS. ستختلف هذه التعليمات بناءً على المكان الذي اشتريت منه نطاقك (مثل Namecheap, GoDaddy, إلخ).
- إذا لم يكن نطاقك مُدارًا عبر Cloudflare بالفعل، فستحتاج إلى ربطه أولًا. يُنصح بشدة بربط أي نطاق بـ Cloudflare للاستفادة من جدار الحماية المجاني وخدمة DNS الممتازة والسرعة.
- بعد اتباع خطوات ضبط DNS، عد إلى صفحة Custom domains واضغط على Activate Domain. قد تستغرق العملية بعض الوقت.
- عندما تصبح الحالة Active، فهذا يعني أن نطاقك قد تم ربطه بنجاح بموقعك الثابت.
الآن عند فتح نطاقك، ستجد موقعك الثابت يعمل بسرعة وكفاءة.
حدود النسخة المجانية (Free Plan Limits)
في الخطة المجانية من Cloudflare Pages، تحصل على الميزات التالية:
- 100 موقع: يمكنك استضافة ما يصل إلى 100 موقع ثابت مجانًا.
- 20,000 ملف: لا يجب أن يتجاوز عدد ملفات الموقع الواحد 20,000 ملف، وهو عدد كبير جدًا.
- 25 ميجابايت: لا يجب أن يتجاوز حجم الملف الواحد 25 ميجابايت. لهذا السبب، من الضروري تحسين حجم الصور.
هذه الاستضافة حل ممتاز للمواقع التي تم ذكرها سابقًا. نأمل أن يكون هذا المقال قد أفادك. إذا كان لديك أي سؤال، اتركه في التعليقات.