الرئيسية المشاريع المدونة
092025-06

تجربة استخدام Strapi و Cloudflare R2 مع Astro لنشر المحتوى لموقعي الشخصي

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

كان كل شيء يتم بصورة يدوية:
أفتح محرر كود، أُنشئ ملف Markdown، أضعه في مجلد المحتوى داخل مشروع Astro ثم أبحث عن الصور، أضيفها يدويًا في مجلد public/، وأكتب مساراتها في كل مقال أو مشروع.
العملية كانت مرهقة، مملة، وتأخذ وقتًا أكثر مما تستحق.

المضحك في الأمر أنّي أعلم أن الحل منذ البداية كان استخدم نظام إدارة محتوى (CMS).
لكن كالعادة، التسويف والتكاسل لعبا دورهما.

لماذا ليس WordPress لإدارة المحتوى؟

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

أثناء قراءتي في التوثيق الفني في موقع Astro، ظهر لي اسم مألوف: Strapi وكان قد مرّ علي كثيرًا أثناء تجوالي العشوائي في الويب، اطلعت سريعا على التوثيق الفني الخاص به وطريقة استخدامه فقررت أن أجرّبه لما وجدت فيه من مرونة وسهولة استخدام.

ما هو Strapi ولماذا اخترته؟

نظام Strapi هو CMS مفتوح المصدر مبني على Node.js، ويتميز بسهولة تخصيصه وقوته كـ Headless CMS ويوفر أيضا خدمة استضافة Cloud. قمت بتثبيت النظام محليا، وأنشأت المجموعات (Collections) الخاصة بالمشاريع والمقالات عن طريق Content builder ، وبدأت بإدخال المحتوى النصي والوسائط.

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

ربط Strapi مع Astro

بعد تجهيز Strapi، ربطت Astro بـ Strapi API عبر fetch لقراءة المحتوى وعرضه في الموقع.
كل شيء كان يعمل بصورة ممتازة... حتى ظهرت أزمة الصور.

حسب الإعدادات الافتراضية لـ Strapi فإنه يقوم بتخزين الصور في مجلد public/uploads داخل النظام المحلي، مما يعني أن Astro لا يمكنه الوصول لها في مرحلة بناء الموقع الثابت build على منصة Cloudflare.

الحل؟ Cloudflare R2

لا أخفي عليكم إعجابي بمنصة Cloudflare بالخدمات التي تقدمها ولحسن الحظ وجدت إضافة جاهزة تسمى Strapi Cloudflare R2 تقوم بتحميل الصور مباشرة إلى مستودع R2 Bucket في منصة Cloudflare، وتخزن رابط الصورة في Strapi.

قمت بإنشاء R2 Bucket وبرطتها بالنطاق media.wdalhaj.me وبهذا صارت الصور تُعرض من https://media.wdalhaj.me وتُسحب مباشرة من Cloudflare.

مشكلة بناء الموقع ونشره

ظهرت مشكلة أخرى عند محاولة نشر الموقع عبر Cloudflare Pages، لم يتمكن Astro من الوصول إلى Strapi API لسحب المحتوى النصي في مرحلة build، لأنه يعمل محليًا فقط على localhost:1337

الحل البسيط:

  • أقوم ببناء الموقع محليًا (astro build) حيث يقوم Astro بتحويل والصفحات ومحتواها إلى ملفات HTML ويحفظها في المجلد dist.
  • ثم أنسخ مجلد dist الناتج إلى مجلد آخر خارج مشروع Astro.
  • وأرفع المجلد إلى GitHub.
  • ثم يتم نشره تلقائيا على Cloudflare Pages باستخدام CI/CD.

قمت بإضافة الخطوات أعلاه إلى astro build command لتتم بصورة تلقائية، وهذا هو السكربت الذي ينفذ العملية كاملة في ملف package.json :

"build":  "
astro check &&
astro build &&
cp -Rf dist/* ../wdalhaj-static &&
cd ../wdalhaj-static &&
(git diff --quiet && echo 'No changes' || (git add . && git commit -m \"Deploy $(date +'%Y-%m-%d %H:%M:%S')\" && git push))
"

والنتيجة النهائية؟

workflow diagram
  • أصبح لدي موقع ثابت، سريع، ومبني بالكامل من محتوى ديناميكي يُدار من خلال لوحة تحكم مريحة.
  • لا حاجة لرفع ملفات يدوياً أو كتابة روابط الصور بنفسي.
  • المحتوى يظهر خلال ثوانٍ بعد أي تحديث.

الخلاصة

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

الخلاصة الثانية : انسى الخلاصة الأولى وابدأ بصورة صحيحة وقم بالبحث عن أفضل الممارسات وأساليب التطوير وخطط بصورة سليمة منذ البداية!