كيف بنينا mantek.io بكلفة اسم النطاق فقط
جعفر أبازيد
الموقع الذي تتصفّحه لا يكلّفنا تقريباً شيئاً لتشغيله. لا فاتورة خادم، ولا فاتورة استضافة، ولا رسوم شهرية لأي منصّة، فقط اسم النطاق (domain)، يُجدَّد مرّة واحدة في السنة. وكل ما عدا ذلك يعمل على بنية تحتية مجانية، وسريعة في كل مكان من العالم.
وهذا ليس خفضاً للتكاليف على حساب الجودة، بل مجموعة من الخيارات المدروسة، مخرجات ثابتة (Static)، وتوزيعٌ من الـ Edge، وGit كأساس لحفظ ونشر التغييرات، تصادف أنها أرخص وأسرع وأبسط من أي بديل آخر. وفي ما يلي البنية كاملةً، والمنطق الكامن خلفها.
الفاتورة كلّها اسم نطاق واحد
فكِّك الموقع وابحث عن التكاليف، فلن تجد سوى بندٍ واحد.
- الاستضافة وشبكة التوزيع (CDN): التكلفة صفر. الموقع مُستضاف على Cloudflare Pages، والتي تخدمه من مراكز بيانات في مئات المدن، بعرض حزمة غير محدود على الباقة المجانية. والبند الذي يكلّف عادةً أكثر من غيره، التوزيع العالمي (CDN)، لا يكلّف هنا شيئاً.
- الـ DNS: التكلفة صفر. يُدار على Cloudflare إلى جانب اسم النطاق.
- إرسال البريد الإلكتروني: التكلفة صفر. رسائل صفحة التواصل تمرّ عبر الباقة المجانية من Resend.
- اسم النطاق: الفاتورة الوحيدة. يُجدَّد سنوياً، وهذه هي كلفة التشغيل بأكملها.
البنية التحتية مجانية؛ أما الاستثمار فهو الهندسة. هذه هي المعادلة، ولموقع يجب أن يكون سريعاً وثنائيّ اللغة وقابلاً للصيانة لسنوات، فهي المقايضة الصحيحة.
مخرجات ثابتة، وGit بوصفه خطّ النشر
الموقع مبنيّ باستخدام Astro، ويُترجَم إلى HTML وCSS فقط. لا يوجد خادم تطبيقات يعمل في الخلفية: لا شيء يحتاج إلى تحديثات أمنية، أو توسيعٍ، أو إيقاظٍ عند وصول زائر. تخدم Cloudflare الملفات الجاهزة من أقرب نقطة Edge إلى كل قارئ، ولهذا تبدو الصفحات فوريّة.
أما النشر فهو Git لا أكثر. نرسل التغييرات إلى الفرع الرئيسي (main)، فتبني Cloudflare الموقع وتنشره حول العالم خلال دقيقة أو أقل. ولكل فرع رابط معاينة خاص به، فيُمكن مراجعة أي تغيير على عنوان حقيقي قبل أن يصبح مباشراً. ولأن المستودع (Repository) هو مصدر الكود الوحيد، فإن التراجع عن تغيير خاطئ هو مجرّد git revert، لا استعادةً من نسخة احتياطية بعد منتصف الليل.
نظام إدارة محتوى بلا قاعدة بيانات
هذه المدوّنة قابلة للتحرير من المتصفّح، لكن لا قاعدة بيانات خلفها، ولا خادم لنظام إدارة المحتوى يجب إبقاؤه في وضعية العمل. المحرِّر قائم على Git: حفظ المقال يودِع ملف Markdown في المستودع (repo)، ليُنشَر بعد ذلك عبر المسار الآلي نفسه الذي يُنشر من خلاله الكود.
ولهذا فوائد مهمة. كل تعديل موثَّق بإصداراته كالكود تماماً، مع سجلٍّ كامل. لا قاعدة بيانات تحتاج إلى نسخ احتياطي أو تأمين أو ترحيل. والمحرِّر محميٌّ خلف تسجيل الدخول عبر GitHub، فلا مجموعة كلمات مرور منفصلة تُدار، ولا شيء يُذكَر أمام أدوات الاختراق الأمني لتعثر عليه. المحتوى والكود يسكنان في مكان واحد، ويُنشَران بالطريقة نفسها.
صفحة تواصل بلا خادم
نموذج صفحة التواصل يعني عادةً خادماً ما في مكانٍ ما ينتظر استقبال البيانات منه. أما في حالتنا فهو دالّة واحدة بلا خادم (Serverless) تعمل على الـ Edge عند الطلب: تتحقّق من صحّة المُدخَلات ثم تسلّمها إلى Resend التي ترسل البريد. لا خادم مخصص يعمل بشكل مستمر، ولا طابور انتظار، ولا بنية تحتية تحتاج إلى صيانة بين رسالة وأخرى.
ولا يتم إدراج بيانات الاعتماد داخل الكود أبداً. مفتاح Resend (API Key) مخزّن في متغيّرات البيئة المشفّرة لدى Cloudflare، وتقرؤه الدالّة وقت التشغيل، فهو غير مخزّن في المستودع، وليس في الموقع المنشور. أما الرسائل المزعجة فتُلتقَط بحقلٍ خفيٍّ (Honeypot) وفحوصٍ من جهة الخادم، بدلاً من استخدام الـ CAPTCHA من طرف ثالث. والنموذج مرن: فحين يكون JavaScript مُعطَّلاً يُرسِل الطلب بشكل طبيعي ويحول الزائر إلى صفحة تظهر رسالة شكر؛ وحين يكون مُفعَّلاً يُرسِل البيانات في الخلفية ويُظهِر رسالة الشكر في نفس الصفحة. ودون استخدام Cookies في كلتا الحالتين.
السعي إلى درجةٍ مثالية
الموقع الثابت Static بدايةٌ سريعة، لا نهايةٌ مكتملة. والوصول إلى درجة Lighthouse مثالية، 100 في الأداء وإتاحة الوصول وأفضل الممارسات وتحسين الظهور في محرّكات البحث (Performance · Accessibility · Best Practices · SEO)، تتطلّب سلسلة من القرارات الصغيرة المدروسة:
- خطوط (Fonts) مستضافة ذاتياً، ومحمّلة مسبقاً. الخطوط تُخدَم من نطاقنا نحن، لا من مصادر خطوط خارجية، والخط المستخدم في العنوان محمّل مسبقاً ليكون جاهزاً مباشرة عند رسم الصفحة. والخطوط العربية لا يتم تحميلها إلا في الصفحات العربية.
- لا JavaScript يعطّل عرض الصفحة. القليل الذي يحتاجه الموقع من الكود مضمَّنٌ في الصفحة وصغير الحجم؛ ولا إطار عمل Framework يُرسل إلى المتصفّح. فهذه صفحات HTML حقيقية لا يضاف إليها سوى قدر محدود من JavaScript، وليست تطبيقاً يتظاهر بأنه صفحة.
- ورقة أنماط واحدة مشتركة. ملف CSS واحد، مخزَّن مؤقتاً عبر كل الصفحات، فالتنقّل في الموقع لا يُعيد تنزيل شيء.
- عملٌ يستطيع المتصفّح تخطّيه. الأقسام أسفل الصفحة مُعلَّمة كي لا يبذل المتصفّح جهداً في رسمها قبل أن يصل الزائر إليها.
- لا وميض، ولا انزياحات. المظهر اللوني يُحدّد قبل أول رسمٍ للصفحة، فلا شيء يومض من الفاتح إلى الداكن، ولا شيء يقفز أو ينزاح أثناء التحميل.
قد لا يبدو أيٌّ من هذه التفاصيل مثيراً بمفرده. لكن أثرها يتراكم ليصنع الفارق بين «أداء مقبول» ونتيجة مثالية.
تخزينٌ مؤقّت محكم، بلا تقادم
غالباً ما تكون السرعة وحداثة المحتوى على طرفي نقيض؛ لكن قواعد التخزين المؤقّت الصحيحة تمنحك الاثنتين معاً. تأخذ الملفات أسماءً ببصمة فريدة، وتُخزَّن لمدة عام وتُعلَّم بأنها غير قابلة للتغيير (immutable)، فلا يسأل المتصفّح عنها مرّة أخرى أبداً. والصور تُخزَّن لأسبوع. أما الـ HTML نفسه فيُعاد التحقّق منه دائماً، فما إن تُنشر حتى يصل كل قارئٍ النسخة الأحدث.
والدرس الوحيد الجدير بالذكر: immutable تعني الثبات حرفياً. فهي لا تليق إلا بالملفات التي يتغيّر اسمها كلما تغيّر محتواها. ضَعها على رابطٍ ثابت، وستقضي يوماً كاملاً تصارع الذاكرة المؤقّتة.
آمنٌ وقابلٌ للاكتشاف بصورة افتراضية
تُطبَّق مجموعة من ترويسات الأمان على الـ Edge، مجاناً: HTTPS صارم (HSTS)، وحمايةٌ من Clickjacking ومن تخمين أنواع الملفات (MIME-sniffing)، وسياسة إحالة (referrer) متحفّظة، وسياسة أذونات تُعطّل الوصول للكاميرا والميكروفون والموقع الجغرافي الذي لا يستخدمه الموقع أصلاً. وهناك اسم نطاقٍ رسميٌّ واحد (Canonical)، وكل ما عداه يُحوَّل إليه.
وقابلية الاكتشاف مبنيّة بالروح نفسها. كل صفحة تُعلِن رابطها الرسمي وبدائلها بالعربية والإنجليزية، فتقرأ محرّكات البحث اللغتين بوصفهما موقعاً واحداً، لا محتوًى مكرَّراً. وكل مقال يولّد بطاقة مشاركةٍ اجتماعية (Social-share Card) خاصة به. والبيانات المنظَّمة (Structured Data)، وخريطة موقع (Sitemap) تُولَّد تلقائياً، وخلاصة RSS، كلها تُحدّث مع كل عملية بناء. والتحليلات Analytics بلا Cookies، أي بلا نافذة موافقةٍ تُبطئ الصفحة أو تستقبل القارئ بإعلانٍ منبثق.
لغتان، وبناءٌ واحد
الموقع ثنائيّ اللغة بالكامل: الإنجليزية كأساس، والعربية، من اليمين إلى اليسار،
تحت المسار /ar/. لا نسخة مكرّرة من الموقع، ولا إضافات (Plugins) للترجمة. المكوّنات نفسها تعرض
اللغتين انطلاقاً من قاموس، حتى التخطيطات (Layouts) المعكوسة والبيانات المنظَّمة (Structured Data) مترجمة.
وإضافة لغة جديدة بسهولة إضافة ملف جديد، لا إعادة بناء.
إن كنت تبني شيئاً مشابهاً
- اجعل الثابت (Static) هو الأصل. إن كان بالإمكان أن تكون الصفحة HTML، فلتكن كذلك. وكل ما يأتي بعد ذلك، السرعة، والكلفة، والأمان، يصبح أسهل.
- اجعل Git العمود الفقري. أن يجتمع النشر والمحتوى والتراجع والسجلّ في مكانٍ واحد خيرٌ من أربعة أنظمة يجب إبقاؤها متزامنة.
- أنفق ما وفّرته على القرارات الصائبة. البنية التحتية المجانية تترك الميزانية متاحة للجزء الذي يصنع الفارق فعلاً: الهندسة.
هذه هي المنهجية الهندسية نفسها التي نعتمدها في مشاريع عملائنا: أنظمةٌ سريعة، بتكلفة تشغيل منخفضة، مبنيّة لتدوم. وإن أردت موقعاً كهذا الموقع، فاطّلِع على ما نقدّمه أو لنتحدّث.