دليل لمولدات المواقع الثابتة باستخدام Hexo و WordPress
نشرت: 2022-03-11مولدات المواقع الثابتة هي أنظمة تقوم بتجميع القوالب في صفحات HTML ثابتة. إذا كان هذا يبدو فعالا - نعم ، هو كذلك. لا توجد معالجة أو عرض للخادم ، لذلك تميل المواقع الثابتة إلى أن تكون سريعة جدًا وخفيفة الوزن ، مما يوفر لك وللمستخدمين وقتًا ثمينًا وعرض النطاق الترددي. تنعكس هذه الكفاءة المتزايدة في انخفاض التكاليف وربما ارتفاع الإيرادات.
من تحسين WordPress إلى Going Static
عند الحديث عن مولدات الإيرادات الفعالة ، يتبادر إلى الذهن WordPress. إنه يشغل 28 بالمائة من الإنترنت وهو عبارة عن نظام أساسي قوي به الكثير من الميزات الرائعة ، بما في ذلك إدارة المحتوى والمستخدم الشامل المدعومة بمجموعة من المكونات الإضافية والسمات وواجهات برمجة التطبيقات وما إلى ذلك.
حتى اللاعبين الكبار في صناعتنا يستخدمون WordPress. تستخدم مواقع الويب مثل Smashing Magazine و CSS-Tricks WordPress ، وإن كانت حالات مخصصة بشكل كبير في كلتا الحالتين. ومع ذلك ، يمكن أن يكون العمل مع WordPress مهمة شاقة ، خاصة عند تخصيص الأداء وتحسينه.
لقد بدأت مدونة صغيرة في عام 2015. كانت أول غريزتي هي استخدام WordPress. لقد أعطتني دفعة قوية ، حيث كنت أعمل مع WordPress بالفعل. لقد قمت بإنشاء تطبيق droplet الصغير على DigitalOcean كخادم ، وأنشأت Vesta كلوحة تحكم استضافة ، وقمت بتثبيت WordPress كمنصة مدونة. في النهاية ، قمت بتصميم وتطوير سمة WordPress جديدة تمامًا. الشيء الوحيد المفقود هو المحتوى.
كنت أعلم أنني أريد مشاركة بعض النصائح حول Atom ، حيث كنت أستخدم هذا المحرر الرائع في ذلك الوقت. لقد نشرت بعض المقالات حول هذا الموضوع وشاركتها مع المجتمع.
في البداية ، لم أكن أهتم كثيرًا بالأداء لأنني كنت شديد التركيز على المحتوى. بعد فترة ، لاحظت بعض المشكلات في الأداء. كانت النتيجة على Google PageSpeed Insights رديئة ، لذلك عملت بجد لإصلاح موقع الويب الخاص بي وتحسينه ، وحصلت على درجة شبه مثالية تبلغ 99/100:
لقد قمت بالتبديل من Nginx + Apache إلى Nginx + PHP-FPM.
لقد استخدمت CloudFlare للسرعة والحماية.
لقد استخدمت Cloudinary لاستضافة الصور.
لقد قمت بتعديل موضوعي واستخدمت Critical CSS.
كان التحذير الوحيد هو مشكلة التخزين المؤقت في Google Analytics والتي لم أكن أعرف كيفية إصلاحها في ذلك الوقت.
ولكن ماذا لو أن 99/100 أو 100/100 لا تزال لا تحصل على الأداء المطلوب؟ هذا هو المكان الذي تدخل فيه مولدات الصفحات الثابتة إلى المعركة.
أدخل مولدات الصفحة الثابتة و Hexo
إذن ما هو مولد الموقع الثابت؟
كما يوحي الاسم ، فإن منشئ موقع الويب الثابت هو نظام يقوم بإنشاء ملفات HTML ثابتة. يعد تقديم ملفات HTML الثابتة أسرع بكثير من إنشاء الصفحات أثناء التنقل. لا يوجد عرض أو تجميع للخادم ، مما يؤدي غالبًا إلى تأخير تحميل الصفحة.
عند الحديث عن الأداء ، يجب على المرء التفكير في التخزين المؤقت. على الرغم من وجود تقنيات متعددة للتخزين المؤقت في WordPress ، إلا أن هذه ليست مهمة مباشرة ، على عكس التخزين المؤقت للملفات الثابتة. يعد تقديم الملفات المخزنة مؤقتًا أكثر كفاءة من خدمة الملفات الفعلية من الخادم ويمكنه توفير الوقت عند تحميل مواقع الويب.
في يونيو من هذا العام ، قدم فيتالي فريدمان من مجلة Smashing Magazine JAMstack في ورشة عمل في مدينتي. لم أسمع به من قبل ، وكنت مفتونًا جدًا به. بعد انتهاء الندوة ، درست هذا المفهوم الجديد قليلاً ، وأدركت كم هو رائع. أدركت أن موقع الويب الخاص بي لا يحتاج إلى WordPress.
كانت الخطوة الأولى هي تحديد منشئ الصفحات الثابت الذي يجب استخدامه. لم أكن أعرف عددهم. قررت أن أجرب إطار عمل مدونة Hexo. يمكن نشره على Netlify ، ويحتوي على مكون إضافي للترحيل من WordPress ، ويستخدم Node.js ، الذي أعرفه ، على عكس Jekyll و Hugo ، اللذين يعتمدان على Ruby و Go ، على التوالي. وكما اكتشفت لاحقًا ، إنه سريع النيران.
ترحيل WordPress إلى Hexo
تركيب Hexo بسيط بقدر ما يمكن أن يكون. قم بتثبيت hexo-cli عالميًا باستخدام npm ، وقم بتشغيل الأمر hexo init ، وقم بتثبيت تبعيات npm ، و voila:
npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm installلإجراء الترحيل ، قم بتثبيت المكون الإضافي hexo-migrator-wordpress. يتوقع هذا المكون الإضافي ملفات XML كمصدر. يمكن تصدير ملفات XML عبر أداة تصدير WordPress ، والتي يمكن العثور عليها في لوحة الإدارة ضمن أدوات -> تصدير -> Wordpress . أخيرًا ، اكتب أمر الترحيل السداسي لإنهاء الاستيراد.
hexo migrate wordpress <source>الشيء الوحيد المتبقي هو التحقق من النتيجة. قم بتشغيل الأمر hexo server لبدء الخادم وفتح المتصفح على العنوان المحدد.
hexo serverتخفيض السعر وقيوده
Hexo يدعم Markdown خارج الصندوق. Markdown هي لغة ترميز يستخدمها الكثير لتنسيق ملفات README والتعليقات والمنشورات. ولكن يمكن استخدامه لكتابة مقالتك أيضًا. تركيبها بديهي وسهل التعلم.
ميزة أخرى لـ Markdown هي أنه ينشئ HTML نظيفًا وصالحًا. يتيح ذلك للمطورين إنشاء قواعد CSS نظيفة وقابلة للصيانة لتصميم مقالات وصفحات المدونات.
حياة المطور ليست سهلة أبدًا. غالبًا ما نواجه مشاكل قد تجعلنا نقضي الوقت في أشياء غير متوقعة. إذا تعلمنا شيئًا على طول الطريق ، فلن نضيع هذا الوقت ، وهذا شيء جيد. حدث الشيء نفسه بالنسبة لي. اعتقدت أن كل شيء سار على ما يرام لأنه لم يكن هناك خطأ في التجميع ، ولكن بعد ذلك لاحظت أن بعض الأشياء لم تعمل كما هو متوقع.
على سبيل المثال ، لم يتم تحميل العروض التوضيحية لـ Codepen. لقد بحثت عن مكون إضافي Hexo ، ووجدت واحدًا. لسوء الحظ ، لم يكن هذا المكون الإضافي رسميًا ، وقد أحدث أخطاء HTML غير مقبولة. كنت أرغب في المساهمة وإصلاح المشكلات ، لكن طلب السحب الأخير ظل دون حل لأكثر من عام ونصف. قررت أنه سيكون من الأسهل فصل المستودع وإصلاح المشكلات ونشر المكون الإضافي على صفحة Hexo بحيث يمكن لأي شخص استخدامه. تم قبول المكون الإضافي ، وقمت بتحديث المحتوى ، وعملت عروض Codepen التوضيحية مثل السحر.
حدثت مشكلات مماثلة مع تضمين CanIUse. الآن بعد أن عرفت كيفية إنشاء مكون إضافي Hexo ، لم يكن هناك أي عذر لعدم القيام بذلك. تم أيضًا نشر المكون الإضافي hexo-caniuse الخاص بي ، وكذلك كان المكون الإضافي السداسي السحابي الخاص بي للصور المستجيبة التي تم تحميلها من Cloudinary CDN.
إعادة التصميم والتحسين
تصميم الموقع أساسي إلى حد ما. يقدم Hexo عددًا قليلاً من السمات مجانًا على الموقع الرسمي ، لكنني أردت سمة فريدة لموقع Hexo الخاص بي. بعد أن قرأت الوثائق وتعلمت كيفية تخصيص Hexo ، بدأت في تطوير قالب أصلي من البداية.
لإنشاء قوالب جديدة ، قررت استخدام EJS للقوالب. نظرًا لأنني لم أعمل مطلقًا مع EJS ، فقد رأيت أنها فرصة لتعلم بناء جملة القالب الجديد. إذا كنت لا تحب EJS ، فإن Hexo توفر لك دعم Swig أو Haml أو الصلصال عبر المكونات الإضافية.
أثناء عملية إعادة التصميم ، كنت أولي اهتمامًا وثيقًا للأداء. باتباع أفضل الممارسات ، يمكننا تسريع موقعنا الإلكتروني الثابت بشكل أكبر. يؤدي وضع ملفات JavaScript في الجزء السفلي من المستند واستخدام تقنية Critical CSS إلى إنشاء أفضل تجربة لجمهورك.
يعد تحسين مُحسّنات محرّكات البحث أمرًا بالغ الأهمية لرؤية المدونة على محركات البحث مثل Google. يحتوي Hexo على مساعد مدمج لإدخال بيانات Open Graph. يستخدم Hexo ملفات YAML لتخزين تكوين الموقع والسمات. لقد استخدمت ملف تكوين السمة لتكوين اسم الموقع والوصف والمعرفات الاجتماعية المختلفة.
تعد إضافة Gulp أو Webpack إلى عملية الإنشاء دائمًا مفيدة ويوصى بها. لقد استخدمت Gulp لتصغير وضغط ملفات CSS و JavaScript ، وكان كل شيء جاهزًا. يمكنني نشرها.
نيتليفاي
Netlify هي عبارة عن نظام أساسي يوفر استضافة مواقع الويب والتطبيقات بأداء سريع للغاية. تقوم بتسويق نفسها على أنها منصة موحدة تعمل على أتمتة التعليمات البرمجية لإنشاء مواقع ويب فعالة وسهلة الصيانة.
ما عليك سوى دفع التعليمات البرمجية الخاصة بك ودعنا نتولى الباقي.
كما تتوقع ، يعد تكوين موقع الويب أمرًا سهلاً:
قم بإعداد المجال.
قم بتغيير سجلات DNS.
قم بإعداد البناء والنشر.
قم بتشغيل SSL.
عندما تم إعداد كل شيء ، أجريت عددًا قليلاً من الاختبارات الأساسية لمعرفة النتائج ، بما في ذلك اختبار سرعة موقع الويب Pingdom واختبار صفحة الويب و Testmysite.io. كانت النتائج ممتازة ، حيث حصل الموقع على أعلى الدرجات في كل أداة.
CloudFlare
على الرغم من النتائج الممتازة ، كنت أرغب في تجربة CloudFlare ، فقط لمعرفة مدى تسريع موقع الويب بشكل إضافي. يمكن أن يكون CloudFlare ساحقًا في البداية ، ولكن تعلم كيفية استخدامه أمر أساسي. بعد أن قمت بتهيئة CloudFlare ، أعدت إجراء الاختبارات وكانت النتائج أفضل.
كان الاختبار الأخير هو Google PageSpeed Insights. كانت النتيجة 100٪ تقريبًا لكلٍ من إصدارات الأجهزة المحمولة وسطح المكتب. كانت المشكلة هي التخزين المؤقت لمتصفح Google Analytics. تمكنت من حل المشكلة باستخدام تطبيق CloudFlare لـ Google Analytics.
كم يكلف؟
استخدام Hexo على Netlify مع CloudFlare لا يكلف شيئًا.
Hexo هي منصة مفتوحة المصدر ، لذا فهي مجانية بغض النظر عن الطريقة التي قررت استخدامها بها. لديه مجتمع كبير ، وهو ثالث أشهر منشئ صفحات ثابتة مفتوحة المصدر وفقًا لـ StaticGen.
لدى Netlify خطة مفتوحة توفر لنا خيارات رائعة لاستضافتنا. يتم استضافة الصور على خطة Cloudinary المفتوحة أيضًا. تتيح لنا خطة CloudFlare المجانية تكوين عدد كبير من القواعد التي يمكنها تسريع موقع الويب السريع بالفعل الخاص بك. كما يسمح لنا بإصلاح مشكلة التخزين المؤقت لمتصفح Google Analytics. لم أدفع مقابل المجال أيضًا ، لأنني استخدمت نطاقًا شخصيًا مجانيًا توفره الحكومة.
خفض إعداد هذا المشروع ميزانيتي إلى الحد الأدنى. إذا كنت بحاجة إلى المزيد من الميزات المتقدمة لمشروعك ، فقد يوفر لك مُنشئ الصفحة الثابتة بضعة دولارات.
يعني تقديم الملفات المخزنة مؤقتًا تقليل استخدام وحدة المعالجة المركزية والنطاق الترددي ، وهذا بدوره يعني أنه يمكنك استخدام خطط استضافة أرخص مع أجهزة أقل قوة. ليس ذلك فحسب ، فسيكون موقع الويب الخاص بك أسرع بكثير ، مما يعني أن المستخدمين سيستمتعون بالتصفح على كل من الأجهزة المحمولة وأجهزة سطح المكتب. ونظرًا لأن سرعة تحميل الصفحة يمكن أن تؤثر على تصنيفات بحث Google ، فإن موقع الويب الخاص بك سيحتل مرتبة أعلى ، ويكتسب المزيد من الزوار.
كل هذا يعني أنه يمكنك إنفاق جزء من ميزانيتك في مكان آخر - على سبيل المثال ، على الترويج لموقع الويب الخاص بك أو إنشاء محتوى إضافي ، مما سيساعد في كسب المزيد من الإيرادات.
حالة مولدات الموقع الثابت
لا يعد الترحيل من WordPress إلى منشئ الصفحات الثابتة مهمة بسيطة ، وهو بالتأكيد ليس شيئًا يجب على كل مستخدم WordPress القيام به. ومع ذلك ، جعلت Hexo هذا الانتقال غير مؤلم نسبيًا ، وذلك بفضل المكونات الإضافية والتوثيق الممتاز وواجهة برمجة التطبيقات البسيطة.
قبل أن تقرر ما إذا كنت تريد ترحيل منتجك إلى حل ثابت أم لا ، يجب أن تكون على دراية بالقيود التي تأتي مع أدوات إنشاء الصفحات الثابتة ، مثل قيود المحتوى ومنحنى التعلم Markdown والتحكم في الإصدار.
يجب أن تدرك أيضًا أن Hexo هو إطار عمل مدونة. إنه مثالي للمطورين والأشخاص التقنيين الذين يعرفون كيفية استخدام محرر نصوص ومحطة. إذا كنت ترغب في استخدام واجهة ويب لإدارة المحتوى الخاص بك ، فهناك مكون إضافي يوفر هذه الوظيفة أيضًا. يطلق عليه hexo-admin وهو شائع جدًا.
إذا كنت تستخدم WordPress بالفعل ، فيجب عليك التوقف والتفكير في ميزات WordPress التي تستخدمها الآن وأيها لا غنى عنها. هل لديك هيكل محتوى معقد؟ هل تستخدم إدارة المستخدم؟ هل تستخدم الكثير من المكونات الإضافية على مثيل WordPress الخاص بك وهل جميعها ضرورية؟ هل أنت راض عن أداء موقعك؟
إذا كانت الإجابة على معظم هذه الأسئلة أو جميعها بالنفي ، فأنت على استعداد لشحن موقع الويب الخاص بك باستخدام منشئ صفحات ثابتة. اعتمادًا على حالة الاستخدام ومتطلباتك ، يمكن أن تساعد الصفحات الثابتة في زيادة الكفاءة مع تقليل التكلفة. من ناحية أخرى ، إذا طلبت مرونة WordPress ، فمن المحتمل أنك لا تفكر في مثل هذه الخطوة.