ترحيل Eleventy (11ty) إلى Astro

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

Eleventy هو مولّد موقع ثابت قوي. إنه بسيط وسريع، ويحترم محتواك من خلال الاحتفاظ به بلغات قالب قياسية. إذا كنت تشغل موقع 11ty، فربما اخترته لهذه الأسباب بالذات.

فلماذا تنتقل؟

Astro يمنحك كل ما توفره Eleventy — صفر JavaScript بشكل افتراضي، مخرجات موجهة نحو الثبات، بناء سريع — بالإضافة إلى نموذج مكون، تحسين الأصول المدمج، مجموعات محتوى آمنة من حيث النوع، ودعم الإطار من الدرجة الأولى. نفس الفلسفة، لكن مع تجربة مطور أفضل بكثير.

لقد ترحلنا عشرات مواقع Eleventy إلى Astro. إنها واحدة من أنعم الانتقالات التي نتعامل معها لأن النماذج العقلية متوافقة جداً. كلا الأداتين تحترم المخرجات الثابتة. كلاهما يشحن الحد الأدنى من JavaScript. الفرق يظهر عندما تحتاج إلى المزيد.

نقاط الألم مع Eleventy

تجزؤ لغة القالب

Eleventy يدعم HTML، Markdown، Nunjucks، Liquid، Handlebars، Mustache، EJS، Haml، Pug، WebC، واللغات المخصصة. يتم تسويق هذا على أنه مرونة. في الممارسة العملية، فإنه يخلق تجزؤاً. قد تكون الملفات المدرجة من Nunjucks، والتخطيطات Liquid، وملفات البيانات JavaScript. يقضي المطورون الجدد في المشروع أسبوعهم الأول فقط في معرفة لغة القالب التي تفعل ماذا.

Nunjucks نفسه لم يتم صيانته بشكل فعال — لم يرَ مشروع Mozilla تحديثات كبيرة منذ سنوات. لا يدعم تطبيق Liquid الخاص بـ 11ty الحجج المسماة بالكامل. تم تقديم WebC كبديل حديث لكنه لم يكتسب اعتماداً واسعاً.

خط أنابيب الأصول اليدوي

Eleventy لا يتعامل عن قصد مع CSS أو JavaScript أو تحسين الصور. تقوم بتوصيل خط بناء خاص بك — عادةً PostCSS و esbuild أو Vite و eleventy-img plugin. قوي إذا كنت تعرف ما تفعله، لكن كل مشروع يبدأ بتكوين أدوات كبير قبل أن تكتب سطراً واحداً من المحتوى.

تعقيد علاقات البيانات

علاقات بيانات 11ty قوية لكنها غير واضحة. تتدفق البيانات من ملفات البيانات العامة، وملفات بيانات الفهرس، وface matter التخطيط، والبيانات المحسوبة، وملفات بيانات JavaScript — الكل يندمج بترتيب أولوية محدد. تصحيح أخطاء مشاكل البيانات يعني فهم علاقات البيانات بأكملها. حتى المطورون ذوو الخبرة يعثرون عليها.

لا يوجد نموذج مكون

Eleventy يستخدم الملفات المدرجة والرموز المختصرة لواجهة المستخدم القابلة لإعادة الاستخدام. هذه تعمل، لكنها ليست مكونات. لا يمكنك تمرير props مكتوبة، أو تجميع الأنماط، أو تحسين عناصر واجهة المستخدم بشكل تدريجي مع التفاعلية من جانب العميل دون بناء حل مخصص من الصفر.

ما يعطيك Astro

مكونات حقيقية، صفر وقت التشغيل

مكونات Astro تبدو وكأنها HTML مع كتلة script frontmatter. تدعم typed props، أنماط محدودة النطاق، وتكوين قائم على الفتحات. يتم ترجمتها إلى صفر JavaScript بشكل افتراضي — مثل قوالب Nunjucks، لكن مع نموذج مكون فعلي خلفها.

---
interface Props {
  title: string;
  date: Date;
}
const { title, date } = Astro.props;
---
<article>
  <h2>{title}</h2>
  <time datetime={date.toISOString()}>{title}</time>
  <slot />
</article>
<style>
  article { /* scoped automatically */ }
</style>

مجموعات المحتوى مع Type Safety

مجموعات محتوى Astro تستبدل علاقات بيانات 11ty بنظام يتحقق من الصحة والنوع آمن. تحدد مخطط محتواك باستخدام Zod، وتتحقق Astro من كل قطعة محتوى وقت الإنشاء. لا مزيد من المفاجآت من حقول frontmatter المفقودة المكتشفة في الإنتاج.

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()).optional(),
    draft: z.boolean().default(false),
  }),
});

هذا يستبدل علاقات البيانات الضمنية بمخططات صريحة ومُتحقق منها. اكتمال IDE الخاص بك في حقول المحتوى. أخطاء البناء تمسك البيانات المفقودة قبل النشر.

تحسين الأصول المدمج

Astro يتعامل مع bundling CSS ومعالجة JavaScript وتحسين الصور خارج الصندوق. يعالج مكون <Image /> الصور المتجاوبة بشكل صحيح srcset، والتحويل إلى WebP/AVIF، ومعالجة التحميل البطيء — لا يتطلب تكوين plugin.

Islands الإطار عندما تحتاج إليها

هل تحتاج إلى تفاعلية من جانب العميل — عنصر بحث، رسم بياني تفاعلي، نموذج مع التحقق من الصحة؟ تتيح بنية island في Astro لك إسقاط مكونات React أو Svelte أو Vue أو Solid التي تُرطب بشكل مستقل. مع Eleventy، يتطلب كل عنصر تفاعلي bundling JavaScript مخصص. تبني تلك البنية الأساسية بنفسك.

عملية ترحيلنا

المرحلة 1: التدقيق والعمارة (الأسبوع 1)

نحن نحلل البنية الحالية لمشروع 11ty الخاص بك — لغات القالب المستخدمة، تبعيات علاقات البيانات، الرموز المختصرة، المكونات الإضافية، والمرشحات المخصصة. يتم تعيين كل قالب Nunjucks/Liquid إلى معادله مكون Astro، ونوثق تدفق البيانات الكامل قبل كتابة سطر جديد من الكود.

المرحلة 2: ترحيل المحتوى (الأسبوع 1-2)

محتوى Markdown الخاص بك ينتقل مباشرة — يقرأ Astro نفس تنسيق frontmatter. نحدد مخططات Zod بناءً على أنماط frontmatter الموجودة ونعد مجموعات المحتوى. إذا كنت تستخدم computed data أو ملفات بيانات JavaScript من 11ty، فإننا نحولها إلى أنماط تحميل بيانات Astro.

يتبع تحويل القالب أنماطاً يمكن التنبؤ بها:

Eleventy	Astro
{% include "header.njk" %}	<Header />
{% block content %}{% endblock %}	<slot />
{{ variable | filter }}	{variable} مع تحويلات JS
{% for item in collection %}	{collection.map(item => ...)}
Shortcodes	مكونات Astro
_data/ البيانات العامة	Astro.glob() أو مجموعات المحتوى

المرحلة 3: التصميم وبناء المكون (الأسبوع 2-3)

نحن نعيد بناء قوالبك كمكونات Astro مع أنماط محدودة النطاق. هنا يظهر الترقية فائدتها. القوالب التي كانت ملفات Nunjucks محرجة تصبح وحدات نظيفة ومكتوبة وقابلة للتكوين. نطبق الصور المتجاوبة، وتحسين الخطوط، وإضافة أي islands تفاعلية يحتاجها موقعك.

المرحلة 4: الاختبار والتحقق من SEO (الأسبوع 3-4)

تدقيق Lighthouse كامل. كل عنوان URL تم التحقق من صحته مقابل خريطة الموقع الموجودة لديك. تم اختبار عمليات إعادة التوجيه. تم التحقق من البيانات المنظمة. نتحقق من أن تغذيات RSS وعلامات وسائط اجتماعية وعناوين URL canonical جميعها تطابق الإعداد الموجود قبل أن يصل أي شيء للعيش.

استراتيجية الحفاظ على SEO

كل من Eleventy و Astro ينتجان HTML ثابت، مما يجعل ترحيل SEO أبسط بكثير من الانتقال من إطار يتم تقديمه من جانب العميل. إليك ما نتعامل معه بشكل خاص:

• توازن URL: نعيّن كل عنوان URL موجود ونضمن مسارات متطابقة في Astro. إذا كان موقع 11ty الخاص بك يستخدم هياكل رابط دائم مخصصة، فإننا نكررها بالضبط.
• إعادة التوجيه 301: بالنسبة لأي عناوين URL يجب أن تتغير، نقوم بتكوين عمليات إعادة توجيه صحيحة على مستوى الاستضافة.
• توليد خريطة الموقع: يولد دمج @astrojs/sitemap في Astro خريطة موقع دقيقة تلقائياً.
• علامات Meta: تنتقل جميع علامات العنوان، ووصفات meta، وعلامات Open Graph والبيانات المنظمة إلى إدارة <head> في Astro.
• مكاسب الأداء: تحسين الصور المدمج وbundling الأصول عادة ما يحسن Core Web Vitals، مما يؤثر على تصنيفات البحث.

الجدول الزمني والتسعير

ترحيلات Eleventy إلى Astro من بين أسرع ما لدينا. ينتقل المحتوى بتغييرات طفيفة، وتحويل القالب يتبع أنماطاً ميكانيكية. الفلسفات قريبة بما يكفي لأنه لا يوجد إعادة تفكير أساسية مطلوبة.

• المواقع الصغيرة (تحت 20 قالب، مدونة/مستندات): 2-3 أسابيع، ابتداءً من $4,000
• المواقع المتوسطة (20-50 قالب، أنواع محتوى متعددة): 3-5 أسابيع، ابتداءً من $8,000
• المواقع الكبيرة (50+ قالب، علاقات بيانات معقدة، ميزات تفاعلية): 5-8 أسابيع، ابتداءً من $15,000

كل ترحيل يبدأ بتدقيق مجاني — نقيّم إعداد 11ty الحالي ونُنتج وثيقة نطاق مفصلة. لا مفاجآت.