تثبيت وتهيئة Statamic في بيئة ServBay

Statamic هو نظام إدارة محتوى حديث مبني على إطار عمل Laravel، ويشتهر بمرونته وقوته، مما يجعله مثاليًا لبناء أنواع مختلفة من المواقع. من أبرز ميزاته استخدامه الافتراضي لنظام الملفات لتخزين المحتوى والإعدادات، مع توفير خيار قواعد البيانات أيضًا.

في هذا الدليل ستتعلم خطوة بخطوة كيفية تثبيت وتهيئة Statamic باستخدام Composer في بيئة ServBay المتكاملة لتطوير الويب المحلي على macOS. توفر ServBay كل ما يحتاجه Statamic من بيئة PHP، ودعم Composer، وإدارة سهلة لإعدادات المواقع.

خطوات تثبيت Statamic

عملية تثبيت Statamic في ServBay سهلة وفعالة. يرجى اتباع الخطوات التالية:

الخطوة 1: إنشاء مجلد المشروع

في البداية، يجب إنشاء مجلد فرعي جديد لمشروع Statamic الخاص بك في جذر مواقع ServBay /Applications/ServBay/www. افتح الطرفية ونفذ الأوامر التالية:

cd /Applications/ServBay/www
mkdir servbay-statamic-app
cd servbay-statamic-app

ستنتقل بذلك إلى دليل جذر مواقع ServBay، تنشئ مجلدًا باسم servbay-statamic-app، وتدخل إليه.

الخطوة 2: إنشاء مشروع Statamic باستخدام Composer

يأتي ServBay مزودًا مسبقًا بأداة Composer لإدارة تبعيات PHP. لا حاجة لتثبيت Composer بشكل منفصل.

داخل مجلد servbay-statamic-app الذي أنشأته، شغّل الأمر التالي:

composer create-project statamic/statamic .

سيقوم Composer بتنزيل أحدث إصدار من Statamic مع جميع التبعيات الضرورية وتثبيتها في الدليل الحالي (.). يرجى الانتظار حتى تكتمل عملية التنزيل والتثبيت.

الخطوة 3: إعداد خادم الويب (إضافة موقع جديد في ServBay)

حتى تتمكن ServBay من استضافة مشروعك Statamic، يجب عليك إضافة موقع جديد في تطبيق ServBay.

1. افتح تطبيق ServBay: شغّل تطبيق سطح المكتب ServBay.

2. انتقل إلى علامة تبويب "المواقع": في واجهة ServBay، انقر على علامة التبويب "المواقع" في الأعلى (قد تظهر باسم "المضيف" في الإصدارات الأقدم).

3. أضف موقعًا جديدًا: اضغط على زر "+" في الزاوية السفلى اليسرى لإضافة إعداد جديد لموقع.

4. أدخل معلومات الموقع: في نافذة الإعدادات التي تظهر، أضف المعلومات التالية:

   • الاسم: اسم يسهل عليك تمييزه مثل My Statamic Site.
   • اسم النطاق: اسم نطاق تطوير محلي، يفضل استخدام اللاحقة .local مثل servbay-statamic.local. سيقوم ServBay تلقائيًا بإعداد تهيئة DNS المحلية.
   • نوع الموقع: اختر PHP.
   • إصدار PHP: حدد نسخة PHP المتوافقة مع مشروع Statamic (غالبًا يفضل استخدام الإصدارات المستقرة الحديثة).
   • جذر الموقع: انتبه لهذه الخطوة جيدًا؛ ملف الدخول index.php الخاص بـ Statamic يقع في مجلد public ضمن المشروع، لذا يجب أن تشير إلى جذر الموقع كالتالي: /Applications/ServBay/www/servbay-statamic-app/public.

5. احفظ وطبّق الإعدادات: بعد إدخال البيانات، اضغط على زر "حفظ". قد يُطلب منك إعادة تشغيل بعض الخدمات لتفعيل الإعدادات الجديدة. نفّذ التعليمات حتى يتولى خادم الويب (عادةً Caddy أو Nginx) تحميل التهيئة الجديدة.

الخطوة 4: إعداد بيئة Statamic

يعتمد Statamic على ملف .env في جذر المشروع لإدارة إعدادات البيئة مثل مفتاح التطبيق وبيانات الاتصال بقواعد البيانات.

1. انسخ ملف البيئة: يحتوي مشروع Statamic على ملف قالب باسم .env.example. في الطرفية، تأكد أنك في مسار المشروع /Applications/ServBay/www/servbay-statamic-app ثم نفّذ التالي:

   cp .env.example .env

2. أنشئ مفتاح التطبيق: يحتاج Laravel/Statamic لمفتاح فريد لأغراض الأمان مثل تشفير الجلسات والبيانات. أنشئ المفتاح عن طريق تنفيذ الأمر التالي:

   php artisan key:generate

   سيُضاف أو يُحدّث متغير APP_KEY في ملف .env تلقائيًا.

الخطوة 5: تشغيل والوصول إلى Statamic

الآن أصبح موقعك على Statamic مُجهزًا للعمل ضمن ServBay.

1. زر موقع Statamic: افتح متصفح الإنترنت، وأدخل اسم النطاق الذي خصصته في الخطوة 3 مثل https://servbay-statamic.local. يقوم ServBay افتراضيًا بإعداد شهادة SSL لموقعك المحلي، ويمكنك استخدام HTTPS دون مشاكل. من المفترض ظهور واجهة الترحيب الخاصة بـ Statamic.
2. زر لوحة التحكم: عادةً ما تكون لوحة إدارة Statamic متاحة عبر المسار /cp، مثل: https://servbay-statamic.local/cp. يجب أن تشاهد شاشة تسجيل دخول أو إعداد حساب جديد.
3. أنشئ حساب المسؤول: عند فتح لوحة التحكم لأول مرة، سيُطلب منك إنشاء حساب مسؤول بإدخال اسم مستخدم وكلمة مرور وبريد إلكتروني. بعد الإنتهاء، ستتمكن من الدخول وإدارة الموقع بحرية.

الخطوة 6: تثبيت الإضافات والقوالب (اختياري)

يوفر Statamic بيئة ثرية من الإضافات والقوالب لتعزيز الوظائف وتغيير التصميم حسب رغبتك.

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

تطوير المواقع باستخدام Statamic

بعد إتمام التثبيت والتهيئة، أصبح بإمكانك الاستفادة من جميع ميزات Statamic لبناء موقعك. إليك أساسيات البدء:

إنشاء المحتوى والمجموعات

يعتمد Statamic على مفهوم "المجموعات" (Collections) لتنظيم المحتوى بطريقة مشابهة لتصنيفات المقالات أو الصفحات في أنظمة إدارة المحتوى الأخرى.

1. إنشاء مجموعة: من لوحة تحكم Statamic، اذهب إلى "المحتوى" -> "المجموعات" ثم اختر "إنشاء مجموعة". حدّد اسم المجموعة مثل Posts أو Pages والإعدادات الأخرى حسب حاجتك (كالبنية، مخطط الحقول، إلخ).
2. إضافة محتوى: ضمن المجموعة التي أنشأتها، اضغط على "جديد" لإضافة عنصر محتوى (مثل مقال أو صفحة)، واملأ الحقول حسب المخطط المُحدد.

تكوين قائمة التصفح

يتيح لك Statamic بناء وإدارة قوائم التنقل بكل سهولة.

1. إنشاء قائمة تنقل: من لوحة التحكم، انتقل إلى "المحتوى" -> "التنقل"، ثم اختر "إنشاء قائمة". عيّن اسمًا مثل Main Navigation.
2. إضافة عناصر للقائمة: اسحب وأفلِت العناصر (من المجموعات أو الصفحات المنفصلة) إلى بنية القائمة، ونظّم التسلسل بسهولة.

تخصيص القوالب والتصميم

يعتمد Statamic على Laravel، ويمكنك استخدام محرك القوالب Blade للتحكم بتصميم وعرض المحتوى.

1. تعديل القوالب: توجد ملفات القوالب عادةً في المجلد resources/views بجذر المشروع. يمكنك تعديل أو إضافة ملفات Blade (.blade.php) تبعًا للهيكل التنظيمي لـ Statamic (مثل layouts, partials, collections). لتعديل إطار الصفحات العام، حرر الملف التالي كمثال:

   <!-- resources/views/layouts/default.blade.php -->
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>{{ $title ?? 'My Statamic Site' }}</title>
       {{-- إدراج ملف CSS بعد التحويل --}}
       <link rel="stylesheet" href="{{ mix('css/app.css') }}">
   </head>
   <body>
       <header>
           {{-- مثال: إظهار قائمة "main_navigation" --}}
           @inject('nav', 'Statamic\View\ViewServiceProvider')
           @if ($main_navigation = $nav->navigation('main_navigation'))
               <nav>
                   <ul>
                       @foreach ($main_navigation->tree() as $item)
                           <li><a href="{{ $item->url() }}">{{ $item->title() }}</a></li>
                       @endforeach
                   </ul>
               </nav>
           @endif
       </header>
       <main>
           {{-- عرض محتوى الصفحة الحالية --}}
           @yield('content')
       </main>
       {{-- إدراج ملف JavaScript بعد التحويل --}}
       <script src="{{ mix('js/app.js') }}"></script>
   </body>
   </html>

2. إضافة أنماط وبرمجيات frontend: غالبًا ما يستخدم مشروع Statamic أدوات مثل Laravel Mix أو Vite. ستجد ملفات CSS وجافاسكريبت الأصلية غالبًا تحت الأدلة resources/css و resources/js.

   لمس وتخصيص CSS في الملف resources/css/app.css:

   /* resources/css/app.css */
   body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.6;
       color: #333;
       margin: 0;
       padding: 20px;
   }
   nav ul {
       list-style: none;
       padding: 0;
   }
   nav ul li {
       display: inline;
       margin-right: 15px;
   }

   ودع جافاسكريبت الخاص بك في الملف resources/js/app.js:

   // resources/js/app.js
   console.log('تم تحميل موارد واجهة Statamic!');
   
   // مثال: إضافة تفاعل بسيط
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`التمرير على: ${item.textContent}`);
           });
       });
   });

3. تجميع موارد الواجهة الأمامية: لتحويل هذه الملفات إلى ملفات CSS وJS قابلة للاستخدام في المتصفح، نفذ أوامر التجميع التالية. يحتوي مشروع Statamic عادةً على ملف package.json، ويمكنك استخدام npm أو yarn لتثبيت التبعيات وتجميع الموارد. مرتبطة ServBay بدعم Node.js، لذا استخدم الأوامر التالية:

   npm install
   npm run dev

   يقوم npm install بتثبيت كل التبعيات frontend بناءً على package.json مثل Laravel Mix/Vite وTailwind CSS وVue/React. بينما npm run dev يشغّل التجميع في وضع التطوير ويُنتج ملفات غير مضغوطة بقابلية التصحيح. في بيئة الإنتاج، استخدم npm run prod أو npm run build لتجميع نهائي.

الخلاصة

باتباعك هذه الخطوات تكون قد نجحت في تثبيت، تهيئة، والبدء في استخدام نظام إدارة المحتوى Statamic ضمن بيئة التطوير المحلية المتكاملة ServBay. يُسهم التكامل الذي توفره ServBay (PHP, Composer, خادم الويب، إدارة المواقع، ودعم Node.js) في تبسيط مسار تطوير المواقع على Statamic محليًا. الآن أصبح بإمكانك الاستفادة من مرونة هيكل الملفات وقوة Statamic في بناء وتطوير مواقعك بسرعة وكفاءة.