الدليل الشامل: إنشاء نطاق فرعي مجاني وحمايته من السرقة (Cloudflare & GitHub)

أهلاً بكم متابعي منصة الشامل التعليمية. بصفتنا مطورين وصناع محتوى في الجزائر والعالم العربي، نصل أحياناً إلى مرحلة نحتاج فيها إلى توسيع مواقعنا؛ كأن نضيف قسماً مستقلاً للموسوعات، أو أدوات تفاعلية، أو حتى "مطبخاً" للوصفات كما فعلنا مؤخراً في مشروع مطبخ الشامل.

لترتيب هذه المشاريع باحترافية، نلجأ إلى ما يسمى بـ النطاق الفرعي (Subdomain). في هذا الدرس المبسط، سأنقل لكم تجربتي التقنية الكاملة في رفع موقع ثابت، ربطه بنطاق فرعي، والأهم من ذلك: كيفية تحصينه وحماية أكواده من المتطفلين.

الخطوة الأولى: ما هو النطاق الفرعي؟ ولماذا نستخدمه؟

تخيل أن موقعك الرئيسي (مثلاً eshamel.net) هو منزلك الكبير. النطاق الفرعي هو بناء "ملحق" مستقل بمدخل خاص، مثل kitchen.eshamel.net. هذا الفصل يمنحك سرعة في التصفح، تنظيماً للأكواد، وراحة في الإدارة دون المساس بملفات موقعك الرئيسي.

الخطوة الثانية: رفع الموقع مجاناً عبر GitHub و Cloudflare Pages

بدلاً من شراء استضافات مكلفة للمشاريع الثابتة (HTML/CSS/JS)، سنستخدم أقوى دمج مجاني في عالم الويب:

GitHub (المستودع): نقوم بإنشاء مستودع (Repository) مستقل ونرفع عليه ملفات موقعنا.
Cloudflare Pages (واجهة العرض): نربط حسابنا في كلاود فلار بـ GitHub. سيقوم النظام تلقائياً بسحب الملفات وعرضها كصفحات ويب سريعة جداً. الجميل هنا أن أي تعديل تقوم به مستقبلاً، سينعكس في الموقع خلال ثوانٍ.

الخطوة الثالثة: ربط النطاق الفرعي (حل مشكلة Error 1014)

بعد رفع الموقع على Cloudflare Pages، سيعطيك رابطاً عشوائياً. لربطه بنطاقك الفرعي:

اذهب إلى إعدادات المشروع في Cloudflare واختر Custom Domains.
أدخل اسم النطاق الفرعي الذي تريده.
نصيحة المحترفين: لتجنب خطأ التداخل الشهير (Error 1014)، تأكد دائماً أن الدومين الأساسي مربوط في نفس حساب كلاود فلار الذي تنشئ عليه الـ Pages.

الخطوة الرابعة: ترسانة الحماية (كيف تمنع سرقة مجهودك؟)

الآن موقعك يعمل على الهواء، لكن كود HTML متاح لأي زائر لنسخه. لا توجد حماية 100%، لكن يمكننا إزعاج وطرد 99% من المتطفلين بخطوات بسيطة:

1. جدار الحماية (ملف _headers)

في الاستضافات العادية نستخدم .htaccess، لكن في Cloudflare Pages نستخدم ملفاً يسمى _headers (بدون أي امتداد). ضعه بجوار ملف index.html واكتب فيه:

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff

2. خريطة العناكب (ملف robots.txt)

لمنع عناكب جوجل من أرشفة مجلدات التصميم الحساسة، أنشئ ملف robots.txt وضع فيه:

User-agent: *
Allow: /
Disallow: /css/
Disallow: /js/
Sitemap: https://kitchen.eshamel.net/sitemap.xml

3. السكربت المضغوط (منع الزر الأيمن والاختصارات)

قمنا بكتابة سكربت جافاسكربت مصغر يمنع الزائر من النقر بزر الماوس الأيمن، ويُعطل أزرار F12، Ctrl+U، و Ctrl+S. انسخ هذا السطر وضعه مباشرة قبل إغلاق وسم </body> في جميع صفحات موقعك:

<script>document.addEventListener("\x63\x6f\x6e\x74\x65\x78\x74\x6d\x65\x6e\x75",(_=>_.preventDefault())),document.addEventListener("\x6b\x65\x79\x64\x6f\x77\x6e",(_=>{if(123===_.keyCode||_.ctrlKey&&_.shiftKey&&(73===_.keyCode||67===_.keyCode)||_.ctrlKey&&(85===_.keyCode||83===_.keyCode))return _.preventDefault(),!1}));</script>

خاتمة

بهذه الخطوات، أنت لم تقم فقط ببناء موقع، بل حصّنته وربطته باحترافية. نتمنى أن يكون هذا الدرس قد أضاء لكم طريق تطوير الويب. لا تترددوا في استكشاف تجربتنا الحية على [مطبخ الشامل]، وشاركونا تجاربكم في التعليقات! https://kitchen.eshamel.net

أخوكم: أحمد خمقاني - إدارة شبكة الشامل التعليمية