ServBay एनवायरनमेंट में Jigsaw का इंस्टॉलेशन और कॉन्फ़िगरेशन

परिचय

यह दस्तावेज़ आपको ServBay, एक शक्तिशाली लोकल वेब डेवलपमेंट एनवायरनमेंट, में Jigsaw स्टैटिक साइट जनरेटर को इंस्टॉल और कॉन्फ़िगर करने के लिए गाइड प्रदान करता है। ServBay PHP, Node.js समेत कई तकनीकी स्टैक्स के लिए इंटीग्रेटेड एनवायरनमेंट उपलब्ध कराता है, जिससे Jigsaw प्रोजेक्ट बनाना बेहद आसान हो जाता है। ServBay की मदद से आप आसानी से Jigsaw प्रोजेक्ट का लोकल डोमेन, HTTPS और तेज़ वेब सर्वर सेट कर सकते हैं, जिससे आप वेबसाइट कंटेंट डेवेलपमेंट पर फोकस कर सकें।

Jigsaw क्या है?

Jigsaw एक स्टैटिक साइट जनरेटर है, जिसे Laravel के कंपोनेंट्स पर आधारित Tighten कंपनी ने विकसित किया है। यह Laravel Blade टेम्प्लेट इंजन की ताकत और लचीलापन लेता है और Markdown फाइल्स के साथ मिलकर पूरी तरह स्टैटिक HTML वेबसाइट जेनरेट करता है। Jigsaw डॉक्युमेंटेशन साइट्स, ब्लॉग्स, मार्केटिंग पेजेज़ या ऐसे किसी वेबसाइट के लिए शानदार है, जिसमें बैकएंड डेटाबेस या डायनामिक सर्वर-साइड प्रोसेसिंग की जरूरत नहीं। इसके मुख्य फायदे हैं:

• परिचित टूल्स का उपयोग: यदि आप Laravel या Blade टेम्प्लेट्स में अनुभवी हैं, तो Jigsaw सीखना बेहद आसान है।
• स्पीड और सुरक्षा: जेनरेटेड स्टैटिक वेबसाइट बहुत तेज़ लोड होती है, और सर्वर-साइड कोड न होने की वजह से सुरक्षा भी ज्यादा होती है।
• लचीले टेम्प्लेट्स: Blade टेम्प्लेट्स की मदद से जटिल लेआउट और कंपोनेंट्स बनाए जा सकते हैं।
• Markdown सपोर्ट: कंटेंट लिखना बेहद आसान।

कहां करें Jigsaw का इस्तेमाल

Jigsaw इन स्थितियों में उपयुक्त है:

• प्रोजेक्ट या API डॉक्युमेंटेशन वेबसाइट्स
• पर्सनल ब्लॉग या टेक्निकल शेयरिंग साइट्स
• कंपनी या उत्पाद की मार्केटिंग लैंडिंग पेजेज़
• छोटे प्रेजेंटेशन वेबसाइट्स
• वे वेबसाइट्स जो तेज़ी और सुरक्षा पर केंद्रित हों, और जिनमें कंटेंट अपेक्षाकृत स्थिर हो

आवश्यकताएँ

शुरू करने से पहले ये बातें सुनिश्चित करें:

1. ServBay इंस्टॉल और चालू हो: macOS पर ServBay इंस्टॉल और शुरू होना चाहिए। ServBay में PHP, Composer और Node.js/npm पहले से इंटीग्रेटेड हैं, जो Jigsaw के लिए जरूरी हैं।
2. बुनियादी कमांड लाइन ज्ञान: आपको टर्मिनल में कुछ कमांड चलानी होंगी।
3. Composer और npm की बेसिक समझ: Jigsaw Composer से इंस्टॉल होता है और फ्रंटएंड एसेट्स की बिल्डिंग के लिए npm का यूज़ होता है।

इंस्टॉलेशन और कॉन्फ़िगरेशन स्टेप्स

इस सेक्शन में ServBay में Jigsaw प्रोजेक्ट तैयार करने की पूरी प्रक्रिया दी गई है।

स्टेप 1: प्रोजेक्ट डायरेक्टरी बनाएं

अपने टर्मिनल ऐप में जाएं, ServBay की अनुशंसित वेबसाइट रूट डायरेक्टरी /Applications/ServBay/www पर जाएं, और अपने Jigsaw प्रोजेक्ट के लिए नया फोल्डर बनाएं।

cd /Applications/ServBay/www
mkdir servbay-jigsaw-demo
cd servbay-jigsaw-demo

हमने प्रोजेक्ट डायरेक्टरी का नाम servbay-jigsaw-demo रखा है; आपके सारे प्रोजेक्ट फाइल्स इसमें स्टोर होंगी।

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

ServBay में Composer पहले से इंस्टॉल और कॉन्फ़िगर है; टर्मिनल में composer कमांड डायरेक्टली चल सकती है। अपने बनाए प्रोजेक्ट फोल्डर (/Applications/ServBay/www/servbay-jigsaw-demo) में ये कमांड चलाएं:

composer create-project tightenco/jigsaw .

यह कमांड Jigsaw का लेटेस्ट वर्शन और सभी PHP डिपेंडेंसी अभी के फोल्डर (.) में डाउनलोड करेगी। नोट करें कि आखिरी . का मतलब प्रोजेक्ट इसी फोल्डर में बनेगा, नया सबफोल्डर नहीं बनेगा।

स्टेप 3: ServBay वेबसाइट कॉन्फ़िगर करें

वेब ब्राउज़र से Jigsaw साइट देखने के लिए, आपको ServBay में लोकल वेबसाइट कॉन्फ़िगर करनी होगी।

1. ServBay UI खोलें: ServBay आइकन डबल क्लिक करें या टॉप मेनू बार आइकन से कंट्रोल पैनल खोलें।
2. "वेबसाइट" टैब पर जाएँ: बाईं ओर के मेन्यू से "वेबसाइट" चुनें।
3. नई वेबसाइट जोड़ें: नीचे "+ " बटन क्लिक करें, "वेबसाइट ऐड करें" चुनें।
4. वेबसाइट डिटेल्स भरें:
   • नाम (Name): कोई आसानी से पहचानने वाला नाम डालें, जैसे ServBay Jigsaw Demo।
   • डोमेन (Domain): वो डोमेन डालें, जिससे आप साइट लोकली एक्सेस करना चाहें। सुझाव: .servbay.demo एक्सटेंशन इस्तेमाल करें, जैसे jigsaw-demo.servbay.demo। ServBay इसे खुद ब खुद लोकली रेसॉल्व कर देगा।
   • साइट टाइप (Site Type): PHP सिलेक्ट करें, क्योंकि Jigsaw PHP से बिल्ड होता है।
   • PHP वर्जन (PHP Version): कोई भी लेटेस्ट या स्थिर PHP वर्जन चुनें।
   • वेबसाइट रूट (Site Root): यह सबसे महत्वपूर्ण स्टेप है। Jigsaw डिफ़ॉल्ट रूप से जेनेरेटेड फाइल्स build_local फोल्डर में रखता है। अतः साइट रूट को इसी फोल्डर पर सेट करें: /Applications/ServBay/www/servbay-jigsaw-demo/build_local
5. सेव और अप्लाई करें: सारी जानकारी भरकर "सेव" पर क्लिक करें। ServBay आपसे परिवर्तन लागू करने को बोल सकता है—कन्फर्म करें। Web सर्वर कॉन्फ़िगरेशन (Caddy या Nginx) और HTTPS भी ऑटोमैटिकली सेट हो जाएगा।

स्टेप 4: फ्रंटएंड डिपेंडेंसी इंस्टॉल करें

Jigsaw प्रोजेक्ट अमूमन npm से फ्रंटएंड एसेट्स (जैसे SASS, JS) मैनेज करता है। ServBay में Node.js और npm दोनों पहले से इंस्टॉल और चालू हैं।

अपने प्रोजेक्ट फोल्डर (/Applications/ServBay/www/servbay-jigsaw-demo) में यह कमांड चलाएं:

npm install

यह प्रोजेक्ट के package.json को रीड कर जरूरी Node.js मॉड्यूल्स node_modules फोल्डर में इंस्टाल करेगा।

स्टेप 5: Jigsaw वेबसाइट बिल्ड करें

सारी डिपेंडेंसी इंस्टॉल होने के बाद Jigsaw बिल्ड कमांड चला कर स्टैटिक फाइल्स जेनेरेट करें।

यह कमांड प्रोजेक्ट फोल्डर में चलाएँ:

./vendor/bin/jigsaw build

यह कमांड ये स्टेप्स फॉलो करेगी:

1. source फोल्डर के Markdown और Blade टेम्प्लेट्स प्रोसेस होंगे।
2. webpack.mix.js फाइल के अनुसार एसेट्स कंम्पाइल होंगी (अगर Laravel Mix शामिल है)।
3. फाइनल HTML, CSS, JS और अन्य फाइल्स build_local फोल्डर में आउटपुट होंगी।

स्टेप 6: वेबसाइट एक्सेस करें

अब Jigsaw साइट की स्टैटिक फाइल्स /Applications/ServBay/www/servbay-jigsaw-demo/build_local फोल्डर में बन चुकी हैं। आपने ServBay में वेबसाइट रूट इसी फोल्डर पर सेट किया है, तो अब ब्राउज़र में अपने चुने हुए लोकल डोमेन पर साइट देख सकते हैं।

Web ब्राउज़र खोलें और स्टेप 3 में चुना गया डोमेन खोलें, जैसे https://jigsaw-demo.servbay.demo। ServBay लोकल HTTPS सर्टिफिकेट (ServBay User CA) खुद डील कर लेगा; आपको Jigsaw का डिफॉल्ट वेलकम पेज दिखेगा।

कस्टमाइज़ेशन व डेवलपमेंट

अब आपने बेसिक सेटअप पूरा कर लिया है; अपनी Jigsaw साइट की सामग्री और डिज़ाइन को कस्टमाइज़ कर सकते हैं।

कंटेंट और टेम्प्लेट्स एडिट करें

• वेबसाइट का सोर्स कोड प्रोजेक्ट के source फोल्डर में होता है।
• HTML लेआउट्स और कंपोनेंट्स Blade टेम्प्लेट्स के रूप में source/_layouts और source/_partials में होते हैं।
• पेज कंटेंट सामान्यतः Markdown में लिखा जाता है, source या उसके सबफोल्डर्स (जैसे source/index.md, source/about.md) में।
• ब्लॉग पोस्ट्स आमतौर पर source/_posts में, नामकरण पैटर्न YYYY-MM-DD-slug.md के अनुसार होती हैं।

नया पेज/पोस्ट जोड़ें

नया पेज या ब्लॉग पोस्ट बनाने के लिए केवल source फोल्डर या सम्बंधित सबफोल्डर (जैसे source/_posts) में नई Markdown फाइल बनाएं।

उदाहरण, एक source/about.md फाइल बनाएं:

---
title: "हमारे बारे में"
description: "ServBay Jigsaw Demo के बारे में अधिक जानें"
---

# हमारे बारे में

यह Jigsaw से बनी एक 'हमारे बारे में' पेज है।

यहाँ आप कंपनी का परिचय, टीम जानकारी आदि जोड़ सकते हैं।

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

Jigsaw प्रोजेक्ट फ्रंटएंड एसेट्स को Laravel Mix (webpack.mix.js) से कंम्पाइल करता है।

• स्टाइल फाइल्स (अक्सर SASS/SCSS) source/_assets/sass फोल्डर में होती हैं।
• जावास्क्रिप्ट फाइल्स source/_assets/js में होती हैं।

npm scripts से इन एसेट्स की बिल्डिंग कर सकते हैं:

• npm run dev: डेवलपमेंट मोड (source maps, no minification) में कम्पाइल करता है।
• npm run watch: डेवलपमेंट मोड में फ़ाइल परिवर्तन ट्रैक कर ऑटोमेटिक दोबारा कम्पाइल करता है।
• npm run prod: प्रोडक्शन के लिए कम्पाइल करता है, जिससे फाइल्स minify और ऑप्टिमाइज़ हो जाती हैं।

जैसे, source/_assets/sass/main.scss बदलने के बाद, npm run dev या npm run watch से अपडेटेड CSS फाइल मिल जाएगी।

वेबसाइट फिर से बनाएं

महत्वपूर्ण: हर बार जब आप कंटेंट फाइल (Markdown) या टेम्प्लेट फाइल (Blade) में बदलाव करें, तो ./vendor/bin/jigsaw build कमांड फेर से चलाएं, ताकि Jigsaw ये बदलाव प्रोसेस करे और build_local फोल्डर में अपडेटेड स्टैटिक फाइल्स बने।

./vendor/bin/jigsaw build

यदि फ्रंटएंड एसेट्स (SASS, JS) में बदलाव किया है, तो npm कमांड (npm run dev या npm run watch) चलाएं। अधिकतर मामलों में Jigsaw के build कमांड से Mix की प्रक्रिया भी रन होती है, फिर भी दोनों को अलग-अलग समझना डिबगिंग में मदद करता है।

ध्यान देने योग्य बातें

• बिल्ड फोल्डर: Jigsaw डिफॉल्ट रूप से build_local (डेवलपमेंट) और build_production (प्रोडक्शन) डायरेक्टरेट्स में आउटपुट करता है। सुनिश्चित करें की ServBay की साइट रूट सही फोल्डर (आमतौर पर build_local) पर सेट है।
• वेब सर्वर: ServBay Caddy या Nginx वेब सर्वर का उपयोग करता है, वे डायरेक्ट ही build_local में बने स्टैटिक फाइल्स सर्व करते हैं—ये तेज़ और प्रभावशाली है। Jigsaw का jigsaw serve कमांड लोकल प्रीव्यू के लिए है, लेकिन ServBay का वेब सर्वर ज्यादा फ़ीचर्स देता है।
• HTTPS: ServBay .servbay.demo डोमेन के लिए HTTPS सर्टिफिकेट्स ऑटो सेट करता है और ServBay User CA सर्टिफिकेट यूज़ करता है। आपको अपने सिस्टम में ServBay User CA को ट्रस्टेड CA के रूप में एड करना पड़ सकता है, ताकि ब्राउज़र वॉर्निंग न दें।
• क्लीन बिल्ड: यदि बिल्ड में कोई असामान्य समस्या आए, तो ./vendor/bin/jigsaw build --clean कमांड क्लीन बिल्ड के लिए आज़माएं।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

प्रश्न: Markdown फाइल बदली, लेकिन ब्राउज़र में अपडेट क्यों नहीं दिख रहा?

उत्तर: कंटेंट या टेम्प्लेट बदलने के बाद टर्मिनल में ./vendor/bin/jigsaw build चलाकर वेबसाइट को रीबिल्ड करें।

प्रश्न: SCSS फाइल बदली, लेकिन स्टाइल्स दिख नहीं रहे?

उत्तर: फ्रंटएंड फाइल्स बदलने के बाद प्रोजेक्ट फोल्डर में npm run dev या npm run watch से एसेट्स री-कंपाइल करें।

प्रश्न: लोकल डोमेन एक्सेस करते समय 'पेज उपलब्ध नहीं' या 'फाइल नहीं मिली' दिखता है?

उत्तर: ये बातें जांचें:

1. सुनिश्चित करें कि ServBay चल रहा है।
2. ServBay कॉन्फ़िगरेशन जांचें: डोमेन और साइट रूट सही है क्या? साइट रूट /Applications/ServBay/www/servbay-jigsaw-demo/build_local होना चाहिए।
3. ./vendor/bin/jigsaw build सफलतापूर्वक चला है और build_local में स्टैटिक फाइल्स (जैसे index.html) बनी हैं।

प्रश्न: Jigsaw साइट को डिप्लॉय कैसे करें?

उत्तर: Jigsaw पूरी तरह स्टैटिक फाइल्स बनाता है। सामान्य प्रक्रिया:

1. ./vendor/bin/jigsaw build production से प्रोडक्शन फाइल्स बनाएं (आमतौर पर ज्यादा ऑप्टिमाइज़्ड होती हैं)।
2. सभी फाइल्स build_production फोल्डर से लेकर Netlify, Vercel, GitHub Pages या किसी भी स्टैटिक साइट होस्टिंग सर्विस पर अपलोड करें।

निष्कर्ष

ServBay की मदद से macOS पर Jigsaw स्टैटिक साइट जनरेटर का इंस्टॉलेशन और कॉन्फ़िगरेशन बेहद तेज़, आसान और भरोसेमंद हो जाता है। ServBay सारे ज़रूरी सॉफ़्टवेयर (PHP, Composer, Node.js, npm) और पावरफुल लोकल वेब सर्वर सेटअप के साथ आता है। इस गाइड के स्टेप्स फॉलो कर, आप मिनटों में Jigsaw प्रोजेक्ट शुरू कर सकते हैं और ServBay की खूबियों के साथ अपने लोकल डेवेलपमेंट को अगले स्तर तक पहुंचा सकते हैं।