ServBay वातावरण में Statamic की इंस्टॉलेशन और कॉन्फ़िगरेशन

Statamic एक आधुनिक कंटेंट मैनेजमेंट सिस्टम (CMS) है, जो Laravel फ्रेमवर्क पर आधारित है। यह अपनी लचीलापन और शक्तिशाली फीचर्स के लिए जाना जाता है, और विभिन्न तरह की वेबसाइट्स बनाने के लिए खास तौर पर उपयुक्त है। Statamic की एक खासियत यह है कि यह डिफ़ॉल्ट रूप से कंटेंट और कॉन्फ़िगरेशन को फाइल सिस्टम में स्टोर करता है, लेकिन इसके साथ-साथ डेटाबेस का विकल्प भी देता है।

यह लेख आपको ServBay, जो एक पूर्णतः सुसज्जित लोकल वेब डेवलपमेंट वातावरण है, में Composer के जरिए Statamic को इंस्टॉल और सेटअप करने की विस्तृत गाइड देगा। ServBay Statamic के लिए आवश्यक PHP एनवायरनमेंट, Composer सपोर्ट और आसान वेबसाइट कॉन्फ़िगरेशन की सुविधा उपलब्ध कराता है।

Statamic की इंस्टॉलेशन के स्टेप्स

ServBay वातावरण में Statamic की इंस्टॉलेशन का तरीका सीधा और तेज़ है। कृपया निम्नलिखित चरणों का पालन करें:

चरण 1: प्रोजेक्ट डाइरेक्टरी बनाएं

सबसे पहले, आपको ServBay की वेबसाइट रूट डाइरेक्टरी /Applications/ServBay/www में अपने Statamic प्रोजेक्ट के लिए एक नया सब-डायरेक्टरी बनाना है। टर्मिनल खोलें और ये कमांड चलाएं:

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

इससे आप ServBay के डिफ़ॉल्ट वेबसाइट रूट में पहुंच जाएंगे, एक नया फोल्डर servbay-statamic-app बनाएंगे और उसमें प्रवेश करेंगे।

चरण 2: Composer से Statamic प्रोजेक्ट बनाएं

ServBay में Composer पहले से इंस्टॉल्ड है, जो PHP डिपेंडेंसी मैनेजमेंट टूल है। आपको अलग से Composer स्थापित करने की आवश्यकता नहीं है; आप सीधे इसका उपयोग कर सकते हैं।

अभी-अभी बनाई गई servbay-statamic-app डाइरेक्टरी में यह Composer कमांड चलाएं:

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 वर्शन: Statamic के साथ संगत वर्शन (आमतौर पर नवीनतम, स्थिर वर्शन अनुशंसित है)।
   • वेबसाइट रूट डाइरेक्टरी: यह महत्वपूर्ण है। Statamic का एंट्री फाइल index.php उसके public सब-डाइरेक्टरी में है, इसलिए रूट डाइरेक्टरी सेट करें: /Applications/ServBay/www/servbay-statamic-app/public।

5. सेटिंग्स सेव करें और लागू करें: सभी जानकारी भरने के बाद "सेव" पर क्लिक करें। संभव है ServBay आपसे सेवाएँ रीस्टार्ट करने को कहे; निर्देशानुसार रीस्टार्ट करके सुनिश्चित करें कि नया कॉन्फ़िगरेशन लोड हो गया है (डिफ़ॉल्ट रूप में Caddy या Nginx)।

चरण 4: Statamic पर्यावरण कॉन्फ़िगर करें

प्रोजेक्ट की रूट डाइरेक्टरी में Statamic पर्यावरण सेटिंग्स के लिए .env फाइल पर निर्भर करता है (जैसे ऐप की, डाटाबेस की जानकारी आदि)।

1. पर्यावरण फाइल कॉपी करें: Statamic प्रोजेक्ट में एक .env.example फाइल मिलती है। टर्मिनल में प्रोजेक्ट रूट (/Applications/ServBay/www/servbay-statamic-app) पर रहते हुए यह कमांड चलाएं:

   cp .env.example .env

2. एप्लीकेशन की (App Key) जनरेट करें: Laravel/Statamic के लिए सिक्योरिटी के लिहाज से यूनिक की ज़रूरी है (जैसे सेशन और संवेदनशील डेटा एनक्रिप्शन के लिए)। प्रोजेक्ट रूट में यह आर्टिसन कमांड चलाएं:

   php artisan key:generate

   यह कमांड .env फाइल में APP_KEY वैल्यू को स्वतः जनरेट और भर देगा।

चरण 5: Statamic चलाएं और खोलें

अब आपका Statamic वेबसाइट ServBay पर सेट और चलने के लिए तैयार है।

1. Statamic वेबसाइट देखें: वेब ब्राउज़र खोलें और एड्रेस बार में अपने चुने गए डोमेन जैसे https://servbay-statamic.local लिखें। ServBay आपके लोकल वेबसाइट के लिए SSL सर्टिफिकेट (ServBay User CA या ServBay Public CA) ऑटोमेटिकली सेट करता है, इसलिए HTTPS का उपयोग करें। अब आपको Statamic का स्वागत पेज दिखना चाहिए।

2. कंट्रोल पैनल खोलें: Statamic का एडमिन कंट्रोल पैनल आमतौर पर /cp पाथ से उपलब्ध होता है। ब्राउज़र में https://servbay-statamic.local/cp खोलें। यहां लॉगिन या सेटअप पेज दिखेगा।

3. एडमिन अकाउंट बनाएं: पहली बार कंट्रोल पैनल खोलने पर, आपको एडमिन अकाउंट बनाने के लिए गाइड किया जाएगा। स्क्रीन पर दिखाए गए निर्देशानुसार यूज़रनेम, पासवर्ड और ईमेल डालें, फिर "अकाउंट बनाएं" पर क्लिक करें। अब आप लॉगिन कर सकते हैं और अपनी Statamic वेबसाइट का प्रबंधन शुरू कर सकते हैं।

चरण 6: प्लगइन और थीम्स इंस्टॉल करना (ऑप्शनल)

Statamic के पास एक समृद्ध प्लगइन और थीम इकोसिस्टम है, जिससे इसकी कार्यक्षमता और डिज़ाइन बदले जा सकते हैं।

1. प्लगइन इंस्टॉल करें: कंट्रोल पैनल (बाईं साइड नेविगेशन में) से या फिर Composer कमांड के जरिए प्लगइन ऐड कर सकते हैं। कंट्रोल पैनल से इंस्टॉलेशन अधिक आसान है।
2. थीम इंस्टॉल करें: इसी तरह, कंट्रोल पैनल या थीम फाइल्स को निर्धारित डायरेक्टरी में रखकर थीम इंस्टॉल करें।

Statamic से वेबसाइट बनाएं

Statamic को सफलतापूर्वक इंस्टॉल और सेटअप करने के बाद, इसकी सुविधाओं का इस्तेमाल करते हुए आप वेबसाइट बना सकते हैं। नीचे कुछ बुनियादी कार्यविधियाँ दी गई हैं:

कंटेंट और कलेक्शंस बनाना

Statamic "कलेक्शंस" के ज़रिए कंटेंट का संगठन करता है, जो पारंपरिक CMS में लेख या पेज टाइप की तरह है।

1. कलेक्शन बनाएं: Statamic कंट्रोल पैनल में "कंटेंट" > "कलेक्शंस" पर जाएं और "कलेक्शन बनाएं" पर क्लिक करें। नाम (जैसे Posts, Pages) और अन्य सेटिंग्स जैसे रूटिंग, फील्ड ब्लूप्रिंट्स बताएं।
2. कंटेंट आइटम जोड़ें: बनाए गए कलेक्शन के अंदर "नया बनाएं" पर क्लिक कर कंटेंट (जैसे ब्लॉग पोस्ट या पेज) जोड़ें। तय किए गए फील्ड ब्लूप्रिंट के अनुसार डेटा डालें।

नेविगेशन मेनू सेटअप करना

आप अपनी वेबसाइट के नेविगेशन मेनूज़ बना और प्रबंधित कर सकते हैं।

1. नेविगेशन बनाएं: Statamic कंट्रोल पैनल में "कंटेंट" > "नेविगेशन" में जाएं और "नेविगेशन बनाएं" पर क्लिक करें। जैसे Main Navigation नाम रखें।
2. नेविगेशन आइटम जोड़ें: आपके बनाए कंटेंट (कलेक्शन या पेज) को ड्रैग-ड्रॉप कर मेनू स्ट्रक्चर बनाएं।

टेम्पलेट और स्टाइल कस्टमाइज़ करना

Statamic, Laravel के Blade टेम्पलेट इंजन का उपयोग करता है, जिससे वेबसाइट के लेआउट और कंटेंट की पूर्ण कस्टमाइजेशन संभव है।

1. टेम्पलेट एडिट करें: साइट व्यू फ़ाइलें आमतौर पर प्रोजेक्ट के resources/views डाइरेक्टरी में होती हैं। इसमें Statamic टेम्पलेट स्ट्रक्चर (layouts, partials, collections आदि) के तहत Blade फाइलों (.blade.php) को एडिट या नया बना सकते हैं। जैसे, resources/views/layouts/default.blade.php में साइट लेआउट बदल सकते हैं।

   <!-- 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. स्टाइल और स्क्रिप्ट्स जोड़ें: Statamic प्रोजेक्ट आमतौर पर Laravel Mix या Vite जैसा फ्रंटएंड कंपाइलर इस्तेमाल करता है। मूल CSS और JavaScript फाइलें आमतौर पर resources/css और resources/js डाइरेक्टरी में होती हैं।

   जैसे, 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 में JavaScript कोड लिखें:

   // resources/js/app.js
   console.log('Statamic frontend assets loaded!');
   
   // उदाहरण: छोटा इंटरैक्शन
   document.addEventListener('DOMContentLoaded', function() {
       const navItems = document.querySelectorAll('nav li a');
       navItems.forEach(item => {
           item.addEventListener('mouseover', () => {
               console.log(`Hovering over: ${item.textContent}`);
           });
       });
   });

3. फ्रंटेंड संसाधनों को बनाएं: ओरिजिनल फाइलों को ब्राउज़र के लिए उपयुक्त CSS/JS में बदलने के लिए फ्रंटेंड कंपाइल कमांड चलाएं। Statamic प्रोजेक्ट में आमतौर पर package.json होता है, जिससे npm या yarn से डिपेंडेंसी इंस्टॉल और बिल्ड रन कर सकते हैं। ServBay में Node.js सपोर्ट है, इसलिए:

   npm install
   npm run dev

   npm install सभी डिपेंडेंसी (Laravel Mix/Vite, Tailwind, Vue/React आदि) इंस्टॉल करेगा। npm run dev डेवलपमेंट के लिए बिल्ड करेगा (अनकंप्रेस्ड फ़ाइलें और सोर्समैप्स)। प्रोडक्शन के लिए npm run prod या npm run build चला सकते हैं।

निष्कर्ष

इन स्टेप्स के जरिए, आपने ServBay के शक्तिशाली स्थानीय विकास पर्यावरण में Statamic CMS को सफलतापूर्वक इंस्टॉल, कॉन्फ़िगर और उसकी मूलभूत कार्यप्रणाली को समझ लिया है। ServBay द्वारा उपलब्ध PHP, Composer, वेब सर्वर, आसान वेबसाइट मैनेजमेंट और Node.js सपोर्ट Statamic के लोकल डेवलपमेंट को बहुत आसान और तेज़ बनाता है। अब आप Statamic के लचीले फाइल स्ट्रक्चर और शानदार फीचर्स का लाभ उठाकर अपनी वेबसाइट को तेज़ी से डेवेलप और लॉन्च कर सकते हैं।