كيفية الترحيل من WordPress إلى أحد عشر موقعًا ثابتًا لمولد الموقع

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

ما هو مولد الموقع الثابت؟

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

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

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

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

إذا كنت تعمل في هذه الصناعة لفترة من الوقت ، فقد تتذكر منتج Dreamweaver الخاص بـ Macromedia (ما قبل Adobe). لقد أحببت مفهوم عناصر المكتبة والقوالب ، وتحديداً كيف تسمح لي بإنشاء تناسق عبر صفحات ويب متعددة. في حالة Eleventy ، تعتبر مفاهيم القوالب والمرشحات والأكواد القصيرة والمكونات الإضافية نظائر قريبة. لقد بدأت في هذه الرحلة بأكملها بعد أن قرأت عن تحويل مؤسسة Smashing إلى JamStack. قرأت أيضًا كتاب Mathias Biilmann & Phil Hawksworth المجاني المسمى Modern Web Development على JAMstack وعرفت أنني مستعد لأشمر عن سواعدي وتحويل شيء خاص بي.

لماذا لا تستخدم مولد موقع ثابت؟

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

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

كيف اخترت أحد عشر كمولد موقع ثابت

قم ببحث سريع عن مولدات المواقع الثابتة الشائعة وستجد العديد من الخيارات الرائعة لتبدأ بها: كان Eleventy و Gatsby و Hugo و Jekyll من المتنافسين الرئيسيين في قائمتي. كيفية اختيار؟ فعلت ما جاء بشكل طبيعي وسألت بعض الأصدقاء. كان Eleventy قائدًا واضحًا في استطلاعي على Twitter ، ولكن ما حسمه هو التعليق الذي قال "eleven_ty يشعر بأنه ودود للغاية إذا كان المرء لا يعرف ما الذي يفعله المرء." اهلا انه انا! يمكنني التعلق بشلل التحليل للأسف. ليس اليوم ... كان من الجيد اختيار Eleventy بناءً على استطلاع رأي وتعليق. منذ ذلك الحين ، قمت بتحويل أربعة مواقع WordPress إلى Eleventy ، باستخدام GitHub لتخزين الكود و Netlify لخدمة الملفات بأمان. هذا هو بالضبط ما سنفعله اليوم ، لذلك دعونا نشمر عن سواعدنا ونغوص!

الشروع في العمل: Bootstrapping الموقع الأولي

لدى Eleventy مجموعة رائعة من المشاريع الأولية. سنستخدم برنامج Dan Urbanowicz المكون من إحدى وعشرين netlify-boilerplate كنقطة انطلاق ، ويتم الإعلان عنها كـ "نموذج لبناء موقع ويب بسيط للمدونة باستخدام Eleventy ونشره على Netlify. يتضمن Netlify CMS و Netlify Forms ". انقر فوق "نشر إلى netlify" للبدء. ستتم مطالبتك بتوصيل Netlify بـ GitHub ، وتسمية المستودع الخاص بك (أنا أسمي my smashing-eleventy-dawson) ، ثم "Save & Deploy".

بعد ذلك ، حدثت بعض الأشياء:

1. تمت إضافة المشروع المعياري إلى حساب GitHub الخاص بك.
2. عيّن Netlify اسمًا ديناميكيًا للمشروع ، وقام ببنائه ونشره.
3. قامت Netlify بتهيئة المشروع لاستخدام الهوية (إذا كنت تريد استخدام ميزات CMS) والنماذج (نموذج اتصال بسيط).

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

قمت بالنقر فوق إعدادات الموقع ، ثم تغيير اسم الموقع لإنشاء اسم أكثر ملاءمة لموقعي. بقدر ما أحببت jovial-goldberg-e9f7e9 ، فإن elizabeth-dawson-piano أكثر ملاءمة. بعد كل شيء ، هذا هو الموقع الذي نقوم بتحويله! عندما أقوم بزيارة elizabeth-dawson-piano.netlify.app ، أرى المحتوى المعياري. مدهش!

لنقم بتنزيل المستودع الجديد على أجهزتنا المحلية حتى نتمكن من البدء في تخصيص الموقع. يمنحني مستودع GitHub الخاص بي لهذا المشروع الأمر git clone الذي يمكنني استخدامه في محطة Visual Studio Code لنسخ الملفات:

• استنساخ git →

ثم نتبع التعليمات المتبقية في ملف README الخاص بـ boilerplate لتثبيت التبعيات محليًا ، وتحرير ملف _data/metadata.json لمطابقة المشروع وتشغيل المشروع محليًا.

• npm install @11ty/eleventy
• npm install
• npx eleventy --serve --quiet

باستخدام هذا الأمر الأخير ، أطلق Eleventy موقع التطوير المحلي على localhost:8080 ويبدأ في مراقبة التغييرات.

الحفاظ على منشورات وصفحات وصور ووردبريس

الموقع الذي نقوم بالتحويل منه هو موقع WordPress موجود على elizabethrdawson.wordpress.com. على الرغم من أن الموقع بسيط ، إلا أنه سيكون من الرائع الاستفادة من أكبر قدر ممكن من هذا المحتوى الحالي. لا أحد يحب حقًا النسخ واللصق بهذا القدر ، أليس كذلك؟ يجعل WordPress الأمر سهلاً باستخدام وظيفة التصدير الخاصة به.

يمنحني تصدير المحتوى ملفًا مضغوطًا يحتوي على مستخرج XML لمحتوى الموقع. يمنحني تصدير مكتبة الوسائط ملفًا مضغوطًا لصور الموقع. الموقع الذي اخترت استخدامه كنموذج لهذا التمرين هو موقع بسيط مكون من 3 صفحات ، ويتم استضافته على Wordpress.com. إذا كنت تستضيف نفسك بنفسك ، فيمكنك الانتقال إلى أدوات> تصدير للحصول على مستخرج XML ، ولكن اعتمادًا على مضيفك ، قد تحتاج إلى استخدام FTP لتنزيل الصور.

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

إذا كنت ترغب في استخراج المنشورات من XML ، فسيعمل هذا خارج الصندوق. ومع ذلك ، فإن نموذج الموقع الخاص بنا يتكون من ثلاث صفحات ، لذلك نحتاج إلى إجراء تعديل بسيط. في السطر 39 من parser.js ، قم بتغيير "النشر" إلى "الصفحة" قبل المتابعة.

تأكد من إجراء "تثبيت npm" في دليل wordpress-export-to-markdown ، ثم أدخل "node index.js" واتبع التعليمات.

أنشأت هذه العملية ثلاثة ملفات لي: welcome.md و about.md و contact.md . في كل منها ، توجد الصفحة الأمامية التي تصف عنوان الصفحة وتاريخها ، و Markdown للمحتوى المستخرج من XML. قد يكون مصطلح "المقدمة" مصطلحًا جديدًا بالنسبة لك ، وإذا نظرت إلى القسم الموجود أعلى نموذج ملفات .md في دليل "الصفحات" ، فسترى قسمًا من البيانات في أعلى الملف. يدعم Eleventy مجموعة متنوعة من المواد الأمامية للمساعدة في تخصيص موقعك ، والعنوان والتاريخ هما مجرد البداية. في نماذج الصفحات ، سترى هذا في قسم المقدمة:

 eleventyNavigation: key: Home order: 0

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

يبدو أن هذا هو الوقت المناسب للالتزام بالتحديثات ودفعها إلى GitHub. تحدث بعض الأشياء عندما أقوم بإجراء تحديثات. بناءً على إشعار من GitHub بإجراء تحديثات ، تقوم Netlify بتشغيل الإصدار وتحديث الموقع المباشر. إنها نفس العملية التي تحدث محليًا عند تحديث الملفات وحفظها: يقوم برنامج Eleventy بتحويل ملفات Markdown إلى صفحات HTML. في الواقع ، إذا _site في دليل الموقع محليًا ، فسترى إصدار HTML من موقع الويب الخاص بك ، جاهزًا للخدمة الثابتة. لذلك ، أثناء التنقل إلى elizabeth-dawson-piano.netlify.app بعد الالتزام بفترة وجيزة ، أرى نفس التحديثات التي رأيتها محليًا.

مضيفا الصور

سنستخدم الصور من الموقع الأصلي. في ملف .eleventy.js ، سترى أن أصول الصور الثابتة يجب أن تنتقل إلى المجلد الثابت / img. ستحتوي كل صفحة على صورة رئيسية ، وهنا حيث تعمل الصفحة الأمامية بشكل جيد حقًا. في قسم المقدمة في كل صفحة ، سأضيف إشارة إلى الصورة الرئيسية:

 hero: `/static/img/performance.jpg`

يحتفظ برنامج Eleventy بتنسيقات الصفحات في المجلد _includes/layouts . يتم استخدام base.njk في جميع أنواع الصفحات ، لذلك سنضيف هذا الرمز أسفل التنقل مباشرةً ، حيث أننا نريد صورة بطلنا.

 {% if (hero) %} <img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" /> {% endif %}

لقد قمت أيضًا بتضمين علامة صورة لصورة إليزابيث في صفحة "حول" ، باستخدام فئة CSS لمحاذاة الصورة ومنحها مساحة مناسبة. الآن هو الوقت المناسب للالتزام ومعرفة ما تغير بالضبط.

تضمين مشغل يوتيوب مع البرنامج المساعد

يوجد عدد قليل من مقاطع فيديو YouTube على الصفحة الرئيسية. دعنا نستخدم مكونًا إضافيًا لإنشاء كود تضمين Youtube تلقائيًا. يعد أحد عشر مكونًا من مكونات youtube-embed خيارًا رائعًا لهذا الغرض. تعليمات التثبيت واضحة جدًا: قم بتثبيت الحزمة باستخدام npm ثم قم بتضمينها في ملف .eleventy.js بنا. بدون أي تغييرات أخرى ، يتم تحويل عناوين URL هذه على YouTube إلى مشغلات مضمنة. (انظر الالتزام)

استخدام المجموعات والمرشحات

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

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

• قم بإنشاء ملف events.md جديد في دليل صفحاتنا.
• أضف بعض الأحداث إلى دليل مشاركاتنا. لقد أضفت ملفات .md لحفلة موسيقية في عطلة ، وحفل ربيعي ، وحفل خريف.
• أنشئ تعريفًا للمجموعة في .eleventy.js حتى نتمكن من التعامل مع هذه الأحداث كمجموعة. إليك كيفية تعريف المجموعة: نجمع كل ملفات Markdown في دليل posts ونقوم بتصفية أي شيء ليس له موقع محدد في المقدمة.

 eleventyConfig.addCollection("events", (collection) => collection.getFilteredByGlob("posts/*.md").filter( post => { return ( item.data.location ? post : false ); }) );

• أضف مرجعًا إلى المجموعة إلى ملف events.md بنا ، مع إظهار كل حدث كإدخال في جدول. إليك ما يبدو عليه التكرار على مجموعة:

 <table> <thead> <tr> <th>Date</th> <th>Title</th> <th>Location</th> </tr> </thead> <tbody> {%- for post in collections.events -%} <tr> <td>{{ post.date }}</td> <td><a href="{{ post.url }}">{{ post.data.title }}</a></td> <td>{{ post.data.location }}</td> </tr> {%- endfor -%} </tbody> </table>

ومع ذلك ، يبدو تنسيق التاريخ لدينا سيئًا جدًا.

لحسن الحظ ، يحتوي ملف .eleventy.js بالفعل على مرشح بعنوان readableDate. من السهل استخدام عوامل التصفية على المحتوى في ملفات وقوالب Markdown:

 {{ post.date | readableDate }}

الآن ، تم تنسيق التواريخ بشكل صحيح لدينا! تتعمق وثائق مرشح Eleventy بمزيد من التعمق حول المرشحات المتوفرة في إطار العمل ، وكيف يمكنك إضافة المرشحات الخاصة بك. (انظر: الالتزام)

تلميع تصميم الموقع باستخدام CSS

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

الآن يمكننا إخبار العالم عن كل عملنا الشاق. دعونا ننشر هذا الموقع.

نشر الموقع

أوه ، لكن انتظر. تم نشره بالفعل! لقد عملنا في سير العمل الرائع هذا طوال الوقت ، حيث تنتشر تحديثاتنا لـ GitHub تلقائيًا إلى Netlify وإعادة بنائها إلى HTML جديد وسريع. التحديثات سهلة مثل git push. يكتشف Netlify التغييرات من git ، ويعالج تخفيض السعر إلى HTML ، ويخدم الموقع الثابت. عند الانتهاء والاستعداد لمجال مخصص ، يتيح لك Netlify استخدام المجال الحالي مجانًا. قم بزيارة إعدادات الموقع> إدارة المجال للحصول على جميع التفاصيل ، بما في ذلك كيفية الاستفادة من شهادة HTTPS المجانية من Netlify مع مجالك المخصص.

خيارات متقدمة: الصور ونماذج الاتصال وإدارة المحتوى

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

تذكر نموذج الاتصال الذي تم تثبيته مع النموذج المعياري الخاص بنا؟ إنه يعمل فقط. عند إرسال نموذج الاتصال ، سترى عمليات الإرسال في قسم إدارة Netlify. حدد "نماذج" لموقعك. يمكنك تكوين Netlify لإرسال بريد إلكتروني إليك عندما تحصل على إرسال نموذج جديد ، ويمكنك أيضًا إضافة صفحة تأكيد مخصصة في رمز النموذج الخاص بك. قم بإنشاء صفحة في موقعك على /contact/success Success ، على سبيل المثال ، ثم ضمن علامة form الخاصة بك (في form.njk ) ، أضف action="/contact/success" لإعادة توجيه المستخدمين إلى هناك بمجرد إرسال النموذج.

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

• موقع الويب المحول النهائي (النتيجة)
• مستودع جيثب

قراءة متعمقة

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

• "كيف تدير مجلة Smashing المحتوى: الانتقال من WordPress إلى JAMstack" ، سارة دراسنر
• "تطوير الويب الحديث على JAMstack" ، ماتياس بيلمان وفيل هوكسورث
• "Eleventy هو مولد موقع ثابت أبسط" ، Eleventy Docs
• “Starter Projects” ، Eleventy Docs
• "مستندات الوسائط الكبيرة" ، Netlify
• "خيارات التكوين" ، Netlify CMS
• "12 شيئًا تعلمته بعد تحويل مواقع WordPress إلى أحد عشر ،" سكوت داوسون