كيف أبني هذا الموقع

أكتب هنا عن التصميم، والعمل بأدوات الذكاء الاصطناعي، والمنتجات الرقمية، والعقارات، والحياة العائلية في دبي. أحتاج إلى موقع يجمع كل ذلك: المقالات والصور ومشاريع العمل والأدوات التفاعلية.

البداية كانت مع Framer

بنيت موقعي الأول على Framer. ولا يزال متاحاً على nevskii.me، حيث أعرض أعمالي في تصميم المنتجات الرقمية.

لاحقاً أنشأت مدونة مستقلة على Ghost Pro. اشتريت قالب Scope من Priority Vision وبدأت تعديله. كنت أعمل على القالب عبر GitHub وGitHub Actions. وبالتوازي، واصلت الكتابة وتجميع المحتوى، مع دفع 35 دولاراً شهرياً لاشتراك Ghost Pro.

بمرور الوقت، أصبح للموقع تصميمه الخاص وسجل للتعديلات. أردت الحفاظ على كل ذلك عند الانتقال التالي.

لماذا انتقلت إلى Astro

في مرحلة ما، قررت أن بناء الموقع باستخدام Astro سيكون أبسط. نقلت تصميم القالب وواصلت تطويره من خلال الشيفرة.

يجمع Astro الصفحات من مكوّنات، ويمكنه توليد HTML جاهز مسبقاً. وهذا يناسب المدونة: نص المقال والصور وقوائم التنقل يمكن أن تصل إلى المتصفح بتنسيقها النهائي. لا يحتاج القارئ إلى انتظار JavaScript كي يبني الصفحة على جهازه.

تطلّب الانتقال نقل قوالب المقالات وقوائم المنشورات ومعارض الصور والقوائم، إضافة إلى المظهرين الفاتح والداكن. يمكن أن يكون لكل صفحة ترتيبها الخاص. لا يلزم أن تتشابه صفحة مقال مصوّر مع قائمة ملاحظات قصيرة.

لا يزال مظهر المدونة مبنياً على Scope، لكن قوالبها تعمل الآن داخل Astro. ويبقى Framer موقعاً مستقلاً لعرض أعمالي وأحد المراجع البصرية.

ثم ظهر EmDash

عندما ظهرت النسخة الأولى من EmDash، قررت نقل المحتوى كله إليه. وما زلنا نعمل على هذا الانتقال وعلى تطوير الموقع.

يؤدي EmDash دور CMS، أي نظام إدارة محتوى الموقع. أعمل فيه على المقالات والصفحات وترجماتها، وأعدّل تعليقات الصور والنصوص المشتركة في الواجهة. ولكل مادة مسودات ونسخ منشورة.

الشيفرة منفصلة عن المحتوى. تحدد مكوّنات Astro طريقة عرض المقال أو معرض الصور، بينما يحتفظ EmDash بالمحتوى. لذلك لا يتطلب تعديل فقرة البحث عنها داخل ملفات القوالب، ولا ينبغي أن يؤدي تغيير التصميم إلى إنشاء نسخة أخرى من المقال.

كيف ترتبط الأجزاء ببعضها

يتكوّن الموقع من محرر وعملية بناء ونسخة عامة.

أعدّل المواد في محرر EmDash. تُحفظ النصوص وبيانات النشر في قاعدة بيانات Cloudflare D1. وتستخدم الوسائط المرفوعة خدمة التخزين الكائني Cloudflare R2: تُحفظ الصور والملفات الأخرى منفصلة عن شيفرة الموقع.

عند إصدار نسخة من الموقع، يحصل Astro على لقطة من المواد المنشورة ويبني الصفحات. وفي الوقت نفسه تُجهّز روابط الترجمات وخريطة الموقع وفهرس البحث. لا تدخل المسودات في هذا البناء.

يعمل الموقع الجاهز على Cloudflare Workers ويُقدّم للزوار عبر بنية Cloudflare التحتية. لا تتصل صفحة المقال العادية بالمحرر أو قاعدة البيانات في كل مرة تُفتح فيها، لأن HTML الخاص بها بُني مسبقاً. ويستخدم البحث فهرس النسخة المنشورة نفسها.

تمر المادة بهذا المسار:

EmDash → النسخة المنشورة في D1 → بناء Astro → Cloudflare → القارئ

تُجهّز الصور بشكل منفصل. تُحفظ الملفات الأصلية، وتُنشأ للصفحات نسخ بأحجام مناسبة. وتُقدّم عبر cdn.nevsky.ae حتى لا تضطر بطاقة صغيرة، مثلاً، إلى تحميل صورة بحجمها الكامل.

يمكن لعملية البناء إعادة استخدام الصفحات والموارد التي سبق التحقق منها إذا لم تتغير اعتمادياتها. وقد يتطلب تعديل المكوّنات المشتركة أو بنية الموقع إعادة بناء كاملة.

أين أستخدم Svelte

يستخدم المشروع Svelte للتفاعلات الأكثر تعقيداً. ويُستخدم في بعض طرق العرض المنفصلة التي تدعم البحث وتصفية قائمة المنشورات: يمكن تغيير عبارة البحث أو التصنيف، وتحديث النتائج، وحفظ الخيارات في عنوان الصفحة.

يسمح Astro بإضافة هذه المكوّنات بشكل مستقل. يبقى المقال صفحة HTML عادية، بينما تحصل الكتلة التفاعلية على JavaScript الخاص بها حيث يلزم. لا يُحمّل Svelte على كل صفحة من صفحات المدونة الرئيسية.

يمكن للقوائم وتبديل المظهر والعناصر الصغيرة الأخرى العمل باستخدام JavaScript عادي. ولا تحتاج إلى مكوّن Svelte مستقل.

مادة واحدة بسبع لغات

يدعم الموقع الروسية والإنجليزية والعربية والصينية والفرنسية والألمانية والإسبانية. وتُستخدم الروسية لغة أصلية للمواد.

يُحفظ المقال في EmDash ضمن مستند واحد. وله ترتيب مشترك للكتل والصور، مع نسخ لغوية للنصوص والعناوين وتعليقات الصور وحقول SEO.

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

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

التصميم والشيفرة

لا يزال تنسيق الخطوط وبنية Scope أساساً للتصميم. والألوان المشتركة والأزرار والعناصر المتكررة الأخرى موثّقة في نظام التصميم.

لون التمييز الرئيسي حالياً هو #46a758. يستخدم الموقع خطّي Geist وGeist Mono المقدّمين محلياً، والمظهرين الفاتح والداكن، وأيقونات Remix Icon. والأنماط مكتوبة باستخدام CSS عادي.

تجتمع لوحة الألوان وأمثلة المكوّنات في الصفحة العامة لنظام التصميم. وتُشرح القواعد التقنية ورموز التصميم في design.md، كي تستخدم الصفحات الجديدة الألوان والأحجام وحالات الأزرار نفسها.

الحزمة التقنية في أكتوبر 2026

يعتمد المشروع على Astro 7.3.8 وEmDash 1.2.0. تستخدم العروض التفاعلية المعقدة Svelte 5.57.1، ولغة التطبيق هي TypeScript 6.0.3. يتم التكامل مع Cloudflare عبر @astrojs/cloudflare 14.3.4. يستخدم محرر EmDash الإصدار React 19.2.4، ويستند وضع تحرير النص الكامل إلى Ghost Koenig وLexical. هذه هي إصدارات اعتماديات المشروع في 19 أكتوبر 2026.

لكل طبقة مهمة. يتولى Astro ملفات HTML والقوالب، وEmDash المحتوى التحريري ومراجعاته، وSvelte المكونات التفاعلية. تشغّل Cloudflare Workers كود الخادم، وتخزن D1 البيانات التحريرية، وتحفظ R2 الوسائط وحزم البناء الخاصة. التصميم مكتوب بلغة CSS العادية: متغيرات وشبكات متجاوبة وحالات للمكونات وتكوينات مختلفة للصفحات.

لماذا اخترت هذه الحزمة

جزء كبير من محتوى المدونة معروف قبل طلب القارئ. يمكن توليد العناوين والمقالات والصور وقوائم المنشورات مسبقًا. لذلك يقدّم الموقع الرئيسي ملفات HTML ثابتة عبر Cloudflare Workers Assets. لا تتصل بيئة التشغيل العامة بقاعدة D1: يحتاجها المحرر والبناء، لكن قراءة مقال لا ترسل استعلامات إلى نظام إدارة المحتوى.

يسمح Astro أيضًا ببناء واجهات معقدة. في عروض مستقلة، تتحكم مكونات Svelte في التدفقات التفاعلية وإعدادات العرض. لا تحتاج المقالات العادية إلى تفعيل تفاعلي من جانب العميل. ويستخدم البحث والقوائم وتبديل المظهر شيفرات صغيرة مخصصة. بذلك أختار الأداة بحسب سلوك كل مكوّن وأتحكم في مقدار JavaScript الذي يصل إلى القارئ.

الوثيقة التحريرية كنموذج بيانات

تحتوي المادة في EmDash على locales وfields ومصفوفة blocks مشتركة وpresentation مع روابط التنسيق. لكل كتلة معرّف ثابت وبنية ووسائط مشتركة، وتُحفظ النصوص في خلايا لغوية. للمعرض ترتيب صور موحّد، بينما تُترجم التعليقات والنصوص البديلة alt. نقل صورة يعدّل بنية واحدة لكل الترجمات.

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

تتبع التسميات المشتركة والقوائم والإعدادات أيضًا EmDash. تستطيع المواد الإشارة إلى حقول الوثيقة المالكة لها. ويحل العرض العام هذه الإشارات من الوثائق المنشورة. بذلك لا تتحول التسمية نفسها إلى سبع نسخ تُحرر منفصلة، ولا يتطلب تغيير التنقل البحث عن نص داخل القوالب.

إضافات محرر طورتها للمشروع

طورت الإضافة الأصلية nevsky-multilingual 1.0.0 لهذا النموذج. تربط المحرر بفحوص beforeSave وbeforePublish وbeforeSchedule. تتحقق من بنية الوثيقة ونسخ اللغات والمسارات والبيانات المطلوبة. تُضاف الترجمات داخل المادة، ويرسل النشر أو إلغاء النشر إشارة إلى نظام الإصدارات.

يستخدم وضع النص الكامل محرر Ghost Koenig، ويبقى وضع الكتل متاحًا بجانبه، وكلاهما يحرر الوثيقة نفسها. تربط إضافة مستقلة، nevsky-grid 0.1.0، المحتوى بالتنسيق: تتحقق من انتماء التكوين إلى المادة ومراجع الكتل ومراجعة التخطيط. تغيير ترتيب العرض يحافظ على المصدر التحريري.

يساعد الذكاء الاصطناعي في تجهيز النصوص والترجمات، ثم تتحقق الإضافات من النتيجة قبل الحفظ والنشر. أستطيع إعداد نص في مشروع أو محادثة ChatGPT، وتنقيحه وفق قواعد humanizer لدينا، ثم نقله إلى مادة واحدة متعددة اللغات. مزود الترجمة بالذكاء الاصطناعي المدمج على الخادم غير مُعد حاليًا؛ يعتمد العمل على ترجمة مجهزة ومراجعة.

كيف يعمل البناء والإصدار

يقرأ البناء المراجعات الأصلية المنشورة فقط عبر live_revision_id، مع العلاقات المنشورة بالتصنيفات والوسوم والمؤلفين. لا تدخل المسودات في التصدير. قبل الإصدار تُسجل نسخة المصدر وبصمة البيانات المنشورة. إذا نشر أحد محتوى جديدًا أو غيّر الكود أثناء البناء، يوقف فحص جديد الإصدار الذي أصبح متقادمًا.

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

تُجمع النتيجة في حزمة كاملة تضم HTML وفهرس البحث والأنماط والوسائط والملفات المقروءة آليًا. تُفحص الحزمة محليًا قبل رفع نسخة Worker جديدة. وبعد الرفع تُراجع الروابط العامة وبيانات الإصدار. ويمكن أن يؤدي فشل الفحص إلى الرجوع للنسخة السابقة. يُفحص المصدر والبيانات المنشورة مجددًا قبل الرفع مباشرة.

Cloudflare والبناء السحابي والعمل من المحادثة

المحرر وD1 وR2 والتسليم العام تعمل بالفعل على Cloudflare، والكود محفوظ في GitHub. يوجد publisher خاص مبني على Workers وDurable Objects وجاهز للإصدارات السحابية. يستقبل أحداث EmDash، ويجمع المنشورات المتقاربة زمنيًا، ويستطيع بدء بناء متحقق منه عبر GitHub Actions. أبقي التشغيل التلقائي معطّلًا حاليًا، وأنشر نسخة الإنتاج يدويًا من الطرفية مع الفحوص نفسها.

يمكن حفظ حزم البناء المقبولة في ذاكرة تخزين R2 خاصة ومشفرة باستخدام AES-256-GCM. تضم الحزمة الناتج المولد والاعتماديات ومجاميع التحقق. ولا تشمل المسودات أو قاعدة CMS أو الأسرار. قبل إعادة الاستخدام تُطابق نسخة المصدر والبيئة وسلامة الملفات. تتيح هذه الحزمة متابعة البناء في بيئة أخرى؛ ويحتاج نظام تشغيل جديد أو إصدار أدوات مختلف أولًا إلى قاعدة كاملة خاصة به.

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

تحسين محركات البحث التقني ضمن البناء

لكل نسخة لغوية منشورة عنوان URL وcanonical وlang وروابط hreflang إلى الترجمات المقابلة. تستخدم اللغة الافتراضية x-default، وتحصل الصفحات العربية على dir="rtl". تأتي العناوين والأوصاف وبيانات Open Graph وTwitter من وثيقة EmDash نفسها التي تضم النص الظاهر.

تصف JSON-LD كيان WebSite ونوع الصفحة المحدد: BlogPosting للمقال، وProfilePage للمؤلف، وCollectionPage للمجموعة، وWebPage للصفحة العادية. تأتي بيانات المؤلف والتواريخ من البيانات التحريرية. تُقسم خرائط الموقع بحسب نوع المحتوى، ويُبنى RSS من المواد المنشورة. تمر فحوص البناء عبر شبكة الروابط الداخلية وcanonical وhreflang وروابط sitemap كاملة، وتتجاوز مجرد التأكد من وجود بعض وسوم meta.

محتوى للنماذج اللغوية

تُنتج المواد المنشورة تلقائيًا نسخ Markdown للصفحات، إلى جانب llms.txt وllms-full.txt بسبع لغات. يقدم الملف القصير التعريف واللغات وروابط المحتوى، ويحتوي الكامل على نص موسع. تشترك النسخة المقروءة آليًا مع الموقع في المصدر التحريري، ولا أحتفظ بسيرة منفصلة للروبوتات.

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

تسليم الوسائط والتحقق من التغييرات

تُقدّم الوسائط منفصلة عن HTML. يختار البناء نسخ الصور المتجاوبة، ويحافظ على روابط الملفات الأصلية، ويفحص الملفات المشتقة. وعند تطبيق تحسين دون فقد، تُقارن البكسلات بعد فك الترميز. يُجهز نطاق المحارف للخطين المحليين Geist وGeist Mono، وتستخدم المحارف غير المتاحة خطًا بديلًا من النظام. تُربط Remix Icon بأقنعة CSS محلية.

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

كيف أواصل العمل على الموقع

أحرر المواد في EmDash وأحتفظ بالشيفرة على GitHub. أستخدم أدوات الذكاء الاصطناعي في العمل على الشيفرة، وتُراجع التغييرات من خلال البناء والاختبارات والفحص في المتصفح. كان GitHub Actions جزءاً من العمل منذ تطوير قالب Ghost. ويوفر المشروع الحالي أيضاً مساراً مستقلاً للإصدار عبر الطرفية، مع فحوص قبل الرفع وبعد النشر التقني.

حفظ النص ينشئ مسودة. ونشر المادة في EmDash وإيصال نسخة جديدة إلى الموقع العام خطوتان منفصلتان. تُطلق إصدارات الموقع حالياً يدوياً بعد الفحوص.

لا يزال الانتقال مستمراً. تعمل بالفعل المنشورات بسبع لغات ومكتبة المحتوى المشتركة وعدة طرق لعرض المواد نفسها. وعلى هذا الأساس أواصل تطوير المحرر والتصميم والصفحات التفاعلية.

ما الذي أستطيع بناءه على هذا الأساس

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

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