إعادة بناء موقع ويب آخر

مناقشة الأسباب والتقنية المستخدمة وراء هذا المدونة

8 min 1497 words
Cameron Roots Cameron Roots's profile picture

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

كسر الأرض... مرة أخرى

لقد مر وقت طويل منذ آخر تحديث لموقعي. لقد قمت بالتنقل كثيرًا بين تكوينات مختلفة. لفترة من الوقت كنت أستخدم Hugo Academic، ثم انتقلت إلى Bay حيث جلست لفترة دون لمس أي شيء. في مرحلة ما كنت ألعب مع Flask، لكنني لم ألتزم به بالكامل. مع اقترابي من نهاية دراستي للدكتوراه، اعتقدت أنه سيكون من الجيد تحديث موقعي إلى شيء أكثر حداثة وبدء نشر محتوى حقيقي.

في القيام بذلك، وضعت بعض المعايير التي أردت تحقيقها:

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

ثانيًا، أردت شيئًا يمكنني فهم معظم كود الواجهة الخلفية له. يمكنني العمل على JavaScript وHTML وCSS، لكنني لست خبيرًا في أي منها. كعالم متعدد التخصصات، أقضي معظم وقتي البرمجي في العمل بلغة R وPython مع السكربتات وأدوات سطر الأوامر، على الرغم من أنني علمت نفسي Rust فقط للحصول على لغة منخفضة المستوى تحت حزامي. تم كتابة Hugo بلغة Go وJekyll بلغة Ruby. بمجرد أن تعرف لغة واحدة، يمكنك تعلم لغات أخرى؛ ومع ذلك، لا أريد أن يتحول موقعي الشخصي إلى مشروع برمجي كبير. الهدف هو الحصول على موقع ويب بسيط حيث يمكنني طرح أفكاري هناك وتوفير موارد للآخرين للتعلم منها. من خلال استخدام لغة أنا بالفعل على دراية بها، يمكنني بسرعة النظر إلى الكود لإضافة أي وظيفة أحتاجها أو معرفة الحلول البديلة للمشكلات التي أواجهها.

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

إعداد المكدس

زولا - مولد مواقع ثابتة غني بالميزات

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

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

وجدت أن وثائق إعداد زولا كانت ممتازة. إذا كنت تتبعني، يمكنك العثور على ذلك هنا. أنا على نظام Arch Linux، لذا اتبعت هذه الخطوات:

# لنظام Arch Linux
$ sudo pacman -S zola
$ cd ~/code/  # أو أينما تريد تخزين موقعك الإلكتروني
$ zola init website_name
$ cd website_name
$ git init
$ git submodule add https://github.com/tchartron/blow.git themes/blow
$ zola serve

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

<div {% if class %}class="{{class}}" {% endif %}>
    <p><a href="http://{{loc | safe}}">إعادة توجيه</a></p>
    <script>
        window.location.href = "http://{{loc | safe}}";
    </script>
</div>

بعد إضافة هذا إلى templates/shortcodes/redirect.html يمكنني إعداد إعادة توجيه تعمل حتى مع تحليلاتي.

إرضاء الاتحاد الأوروبي مع أومامي

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

Plausible هو بديل رائع لـ Umami ويستحق الذكر هنا. السبب الذي جعلني أقرر استخدام Umami هو أنه يقدم مستوى مجاني كجزء من خدمتهم المستضافة. يمكنك استخدام نسخة المجتمع من Plausible مجانًا، ولكن عليك استضافتها بنفسك للقيام بذلك. أردت تجنب ذلك للأسباب المذكورة أعلاه.

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

استضافة ثابتة مجانية مع Cloudflare Pages

هناك الكثير من مزودي الاستضافة الثابتة المجانية هناك. عندما بدأت لأول مرة في استخدام مولد مواقع ثابتة، استخدمت Netlify. كانت تلك خدمة رائعة، لكنني أستخدم بالفعل Cloudflare كجزء من موقعي الشخصي لتصفية الروبوتات وأنا سعيد بالبقاء معهم. مؤخرًا، تم استضافة موقعي مباشرة باستخدام Githup Pages. ومع ذلك، كانت لدى Github بعض المشكلات الأخيرة مع المستودعات الخاصة التي أصبحت متاحة للجمهور، ومن المحتمل أنني لن أحتفظ باشتراك Github Pro الخاص بي بعد انتهاء رخصتي التعليمية. علاوة على ذلك، لدى Github حد لعدد البيانات التي يمكنك تخزينها في مستودع. لدي بعض الأفكار المثيرة لمنشورات المدونة التي قد تتطلب أكثر من بضع مئات من الكيلوبايت من البيانات الخام، وسيكون من الجيد أن أتمكن من إدارة هيكل بياناتي بطريقة تبقي موقعي والبيانات قريبة من بعضها. لدي خطة جيدة لتكرار البيانات (منشور مدونة آخر في يوم آخر)، لذا أشعر بالراحة في إدارة بياناتي بهذه الطريقة.

تعتبر Cloudflare Pages رائعة لأنه يمكنك رفع موقعك الثابت مباشرة إلى خدمتهم. هذا يتجنب الحاجة لاستخدام شيء مثل Github CI أو القلق بشأن عملية إصدار API معقدة. أعتقد أنه قد يكون من الممكن دمج إعادة التوجيه مباشرة في Cloudflare، مما سيسمح لي بتجاوز الحاجة إلى إدخال تلك الميزة في Zola. في الوقت الحالي، Cloudflare Pages مجانية ولا يبدو أن لديها أي حدود على البيانات التي يمكنك تخزينها. كما أن لديها وظائف بدون خادم مدمجة، لذا يمكنني استخدام ذلك لبناء المزيد من الوظائف في موقعي الثابت. لدي الكثير من الأفكار لمشاريع شخصية، لذا فإن التكيف مع منصة Cloudflare يجهزني أيضًا لمشاريع مستقبلية.

أولاً، أحتاج إلى بناء موقعي باستخدام Zola. للقيام بذلك، أستخدم أمر zola build. سيؤدي ذلك إلى إنشاء مجلد يسمى public في دليل مشروعي. في الوقت الحالي، أتعامل مع عملية الرفع يدويًا. ببساطة، أنشئ حسابًا على Cloudflare إذا لم يكن لديك واحد وانتقل إلى قسم Workers & Pages في لوحة التحكم الخاصة بك. انقر على علامة التبويب Pages، سمِّ مشروعك الجديد، وارفع مجلد public. إذا لم يكن لديك نطاق، فسوف يمنحونك نطاقًا فرعيًا للاستخدام. في النهاية سأقوم بأتمتة عملية الرفع. الوثائق للقيام بذلك هي هنا

من الجدير بالذكر أنه في وقت كتابة هذا، لدى Cloudflare Pages خطأ طويل الأمد لمستخدمي Firefox. عند رفع المحتوى، لأي سبب من الأسباب، يتضمن بيانات وصفية إضافية تغير الطريقة التي تتعامل بها Cloudflare مع الصفحات بحيث تعرض فقط HTML الخام. قد يكون هناك طريقة للقيام بذلك تلقائيًا، ولكن يمكن إصلاح ذلك عن طريق إضافة ملف إضافي يسمى "_headers" في جذر مجلد "public/".

/*
! خيارات نوع المحتوى

الخطط المستقبلية

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

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