ServBay के साथ VitePress प्रोजेक्ट बनाएं और चलाएं

VitePress एक मॉडर्न स्टैटिक साइट जनरेटर है, जो Vue द्वारा संचालित है और जिसे फास्ट, आकर्षक और आसानी से मेंटेन की जा सकने वाली डॉक्युमेंटेशन वेबसाइट्स बनाने के लिए डिज़ाइन किया गया है। यह Vite पर आधारित है, जो शानदार डेवलपमेंट अनुभव और बेहतरीन बिल्ड परफॉरमेंस प्रदान करता है। अगर आप किसी प्रोजेक्ट, लाइब्रेरी या प्रोडक्ट के लिए प्रोफेशनल डॉक्युमेंटेशन बनाना चाहते हैं तो VitePress एक शानदार विकल्प है।

VitePress को लोकल मशीन पर डेवेलप व टेस्ट करने के लिए एक स्टेबल और आसानी से कॉन्फ़िगर किया जा सकने वाला लोकल वेब डेवलपमेंट एनवायरनमेंट जरूरी है। ServBay इसी उद्देश्य के लिए बनाया गया है—यह मल्टीपल Node.js वर्शन और पावरफुल वेब सर्वर्स (जैसे Caddy या Nginx) को इंटीग्रेट करता है, जिससे आपके VitePress प्रोजेक्ट को आसानी से सर्व किया जा सकता है।

यह लेख आपको यह सिखाएगा कि ServBay के इंटीग्रेटेड एनवायरनमेंट का उपयोग कर कैसे आप शुरू से लेकर चलाने तक, एक VitePress प्रोजेक्ट बनाएं, डेवेलप और डिप्लॉय करें, जिसमें डेवलपमेंट सर्वर के लिए रिवर्स प्रॉक्सी और प्रॉडक्शन बिल्ड के लिए स्टैटिक फाइल सेवा भी शामिल है।

VitePress क्या है?

VitePress Vite पर आधारित एक स्टैटिक साइट जनरेटर (SSG) है। यह Vue 3 की पॉवर और Vite की अल्ट्रा-फास्ट परफॉरमेंस का उपयोग करके विशेष रूप से तकनीकी डॉक्युमेंटेशन साइट्स बनाने में माहिर है।

VitePress की प्रमुख खूबियाँ और लाभ

• बिजली जैसी तेज़ डेवलपमेंट: Vite के हॉ्ट मॉड्यूल रिप्लेसमेंट (HMR) के कारण, आप अपने चेंजेज़ तुरंत ब्राउज़र में देख सकते हैं—डवलपमेंट सुपर फास्ट होता है।
• Vue पर बेस्ड: मार्कडाउन फाइल्स में डायरेक्ट Vue कंपोनेंट्स का यूज़ कर सकते हैं, जिससे डॉक्युमेंटेशन ज्यादा इंटरऐक्टिव और प्रभावशाली बनती है।
• सिंपल और यूजर-फ्रेंडली: मिनिमल कॉन्फ़िगरेशन के साथ तुरंत काम शुरू करें, फोकस सिर्फ कंटेंट क्रिएशन पर।
• हाई परफॉरमेंस: जेनरेटेड फाइल्स का साइज छोटा होता है, लोडिंग काफी तेज़—और क्लाइंट-साइड राउटिंग से सिंगल पेज एप्लिकेशन जैसा एक्सपीरियंस।
• SEO-फ्रेंडली: ऑटो-जेनरेटेड HTML सर्च इंजन के लिए उपयुक्त होता है, और कस्टम हेडर टैग्स लगाने का सपोर्ट भी है।
• एन्हांस्ड मार्कडाउन: CommonMark और GitHub Flavored Markdown (GFM) के साथ एक्स्ट्रा सिंटैक्स सपोर्ट।

VitePress के साथ, डेवेलपर्स आसानी से उच्च गुणवत्ता और तेज़ डॉक्युमेंटेशन वेबसाइट बना सकते हैं।

ServBay के साथ VitePress प्रोजेक्ट बनाना और चलाना

ServBay, Node.js वर्शन को मैनेज करने और आपके VitePress प्रोजेक्ट के लिए Web Server सैटअप करने का एक आसानीभरा तरीका देता है—चाहे आप उसे डेवेलपमेंट मोड में चलाएं या प्रॉडक्शन में स्टैटिक फाइल्स सर्व करें।

आवश्यकताएँ

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

1. ServBay इंस्टॉल करें: आपके macOS पर ServBay सुरक्षित रूप से इंस्टॉल्ड है। यदि अब तक इंस्टॉल नहीं किया, तो ServBay इंस्टॉलेशन गाइड देखें।
2. Node.js पैकेज इंस्टॉल करें: ServBay में अपनी ज़रूरत का Node.js वर्शन इंस्टॉल और सक्रिय करें। यह Node.js के उपयोग वाले डॉक्युमेंटेशन में बताया गया है।

VitePress प्रोजेक्ट बनाएं

1. प्रोजेक्ट डायरेक्टरी इनिशियलाइज़ करें

   सबसे पहले टर्मिनल खोलें। सलाह यही है कि आप ServBay के डिफ़ॉल्ट वेबसाइट रूट /Applications/ServBay/www में प्रोजेक्ट फोल्डर बनाएं, ताकि बाद में वेबसाइट को जोड़ना आसान रहे।

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

2. VitePress इंस्टॉल कर, कॉन्फ़िगुरेशन इनिशियलाइज़ करें

   प्रोजेक्ट फोल्डर servbay-vitepress-app के अंदर, npm या yarn से VitePress डेवलपमेंट डिपेंडेंसी के तौर पर जोड़ें और इनिशियलाइज करें।

   npm add -D vitepress
   npx vitepress init

   या Yarn से:

   yarn add -D vitepress
   yarn vitepress init

   इनिशियलाइजेशन कमांड आपको बेसिक सेटिंग्स (जैसे वेबसाइट टाइटल, डिस्क्रिप्शन आदि) के लिए गाइड करेगा। ऑनस्क्रीन निर्देश इसका उदाहरण हैं:

    ┌  Welcome to VitePress!
    │
    ◇  Where should VitePress initialize the config?
    │  ./docs  # डिफ़ॉल्ट डॉक्युमेंटेशन डायरेक्टरी, एंटर दबाएं
    │
    ◇  Site title:
    │  ServBay VitePress Demo # अपना वेबसाइट टाइटल डालें जैसे: ServBay VitePress Demo
    │
    ◇  Site description:
    │  A VitePress site running on ServBay # साइट डिस्क्रिप्शन लिखें
    │
    ◇  Theme:
    │  Default Theme # थीम सिलेक्ट करें, डिफ़ॉल्ट ही रहने दें
    │
    ◇  Use TypeScript for config and theme files?
    │  Yes # TypeScript का उपयोग करना है या नहीं, अपनी पसंद के अनुसार चुनें
    │
    ◇  Add VitePress npm scripts to package.json?
    │  Yes # package.json में स्क्रिप्ट्स जोड़ें, Yes चुनना बेहतर है
    │
    └  Done! Now run npm run docs:dev and start writing.

   इनिशियलाइज होते ही, VitePress आपके प्रोजेक्ट फोल्डर में docs सबडायरेक्टरी बना देगा, जिसमें डिफ़ॉल्ट सेटिंगss (.vitepress), सैंपल पेज (index.md, guide/index.md आदि) शामिल होंगे। package.json में docs:dev और docs:build जैसे स्क्रिप्ट्स भी जुड़ जाएंगे।

VitePress प्रोजेक्ट की सामग्री बदलना

1. होमपेज कंटेंट एडिट करें

   VitePress का डिफ़ॉल्ट होमपेज docs/index.md में रहता है। इसे किसी भी टेक्स्ट एडिटर से खोलें और जरूरत के मुताबिक बदलें, जैसे:

   # Hello ServBay!
   
   ServBay का इस्तेमाल कर, आप अपने VitePress डॉक्युमेंटेशन साइट को आसानी से चला सकते हैं।
   
   यह एक लोकल डेमो साइट है, जिसे VitePress और ServBay की मदद से तैयार किया गया है।

डेवेलपमेंट मोड में चलाएं

वेबसाइट डेवेलप करने के दौरान, VitePress का इनबिल्ट डेवलपमेंट सर्वर यूज़ करें—यह हॉट रीलोडिंग देता है ताकि हर बदलाव रियल-टाइम दिखे। फिर, ServBay की रिवर्स प्रॉक्सी से किसी कस्टम डोमेन पर इसे ब्राउज़ करें (SSL के साथ!)

1. VitePress डेवलपमेंट सर्वर चलाएं

   टर्मिनल में प्रोजेक्ट फोल्डर /Applications/ServBay/www/servbay-vitepress-app पर जाएँ। फिर डेवलपमेंट सर्वर लगाने के लिए यह कमांड दें:

   npm run docs:dev -- --port 8585

   या Yarn से:

   yarn docs:dev --port 8585

   सर्वर लोकल पर चुने हुए पोर्ट (जैसे 8585) पर चलेगा। आपको टर्मिनल में आमतौर पर http://localhost:8585 जैसा ऐड्रेस मिलेगा।

2. ServBay वेबसाइट कॉन्फ़िगर करें (रिवर्स प्रॉक्सी)

   ServBay कंट्रोल पैनल के "वेबसाइट्स" सेक्शन में जाएँ और नई साईट जोड़ें:

   • नाम: जैसे- VitePress डेवेलपमेंट साइट
   • डोमेन: ऐसा नाम डालें जैसे vitepress-dev.servbay.demo (ब्रांडिंग के लिए servbay.demo इस्तेमाल करें)
   • साइट टाइप: रिवर्स प्रॉक्सी चुने
   • IP: 127.0.0.1
   • पोर्ट: 8585

   सेव करें और बदलाब लागू करें—ServBay वेब सर्वर को सेट कर देगा, जिससे https://vitepress-dev.servbay.demo वाली रिक्वेस्ट सीधे http://127.0.0.1:8585 पर जाएगी।

3. डेवलपमेंट साइट ब्राउज़ करें

   अब ब्राउज़र में https://vitepress-dev.servbay.demo खोलें—आपको VitePress साइट दिखेगी। ServBay ने खुद-ब-खुद कस्टम डोमेन और SSL सर्टिफिकेट (ServBay User CA द्वारा) लागू कर दिया है—यानि अब आप सिक्योर HTTPS पर टेस्टिंग कर सकते हैं।

प्रॉडक्शन वर्जन बनाएं

जब आपकी VitePress साइट पूरी हे जाए और लाइव चाहिए, तो आपको स्टैटिक वर्जन बिल्ड करना होगा।

1. प्रॉडक्शन साइट बिल्ड करें

   टर्मिनल में /Applications/ServBay/www/servbay-vitepress-app पर जाएँ और यह कमांड दें:

   npm run docs:build

   या Yarn से:

   yarn docs:build

   बिल्ड पूरा होने पर, सारे मार्कडाउन/व्यू/आदि कन्‍टेंट एक ऑप्टिमाइज्ड स्टैटिक HTML, CSS, JS में बदल जाएगा—ये फाइल्स docs/.vitepress/dist डायरेक्टरी में रहेंगी।

2. ServBay वेबसाइट सेटअप करें (स्टैटिक फाइल सर्विंग)

   प्रॉडक्शन वर्शन पूरी तरह स्टैटिक फाइल्स है, इसलिए ServBay की "स्टैटिक" वेबसाइट टाइप यूज करें।

   कंट्रोल पैनल में "वेबसाइट्स" पर जाएँ व नई साइट जोड़ें:

   • नाम: जैसे- VitePress प्रॉडक्शन साइट
   • डोमेन: जैसे- vitepress-prod.servbay.demo
   • साइट टाइप: स्टैटिक
   • रूट डायरेक्टरी: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

   सेव करें एवं बदलाब लागू करें—ServBay आपके चुने हुए डायरेक्टरी से ही स्टैटिक वेबसाइट सर्व कर देगा।

3. प्रॉडक्शन साइट ब्राउज़ करें

   ब्राउज़र में https://vitepress-prod.servbay.demo खोलें—आपकी पब्लिश्ड VitePress साइट दिखेगी। आपको डोमेन व SSL दोनों ही ऑटोमेटिक तरीके से मिल जाते हैं।

क्लीन URLs मोड में चलाएँ (cleanUrls: true)

VitePress cleanUrls: true सेटिंग सपोर्ट करता है—मतलब, लिंक में .html एक्सटेंशन नहीं होगा (जैसे /guide/ या /about)। ऐसे URLs को वेब सर्वर द्वारा सही से सर्व करने के लिए एक्स्ट्रा कॉन्फ़िगरेशन लगेगा।

ServBay में Caddy या Nginx वेब सर्वर उपलब्ध है। नीचे दिए गए Caddy के लिए सेटअप का उदाहरण है—यह try_files से फाइल ढूंढता है।

1. VitePress में cleanUrls इनेबल करें

   अपने VitePress कॉन्फ़िग फाइल (docs/.vitepress/config.mts या config.ts) को एडिट करें—siteConfig में cleanUrls: true जोड़ें:

   // docs/.vitepress/config.mts
   import { defineConfig } from 'vitepress'
   
   export default defineConfig({
     // ... अन्य सेटिंग्स
     cleanUrls: true, // क्लीन URLs को सक्षम करें
     // ... अन्य सेटिंग्स
   })

   इसके बाद npm run docs:build दोबारा चलाएँ।

2. ServBay साइट में कस्टम Caddy कॉन्फ़िगरेशन जोड़ें

   ServBay कंट्रोल पैनल में "वेबसाइट्स" में जाएँ—अपनी प्रॉडक्शन साइट (जैसे vitepress-prod.servbay.demo) को एडिट करें:

   • कस्टम कॉन्फिगरेशन का विकल्प चुनें।
   • Caddy कॉन्फ़िग विंडो में नीचे दिया गया कॉन्फ़िग पेस्ट करें—डोमेन व रूट अपने अनुसार बदलें।

   # अपने डोमेन से रिप्लेस करें, जैसे vitepress-cleanurl.servbay.demo
   vitepress-cleanurl.servbay.demo {
       # Brotli (zstd) और Gzip कम्प्रेशन ऑन करें
       encode zstd gzip
   
       # ServBay की डिफ़ॉल्ट लॉग सेटिंग्स दर्ज करें
       import set-log vitepress-cleanurl.servbay.demo
   
       # Interal SSL सर्टिफिकेट सेट करें
       tls internal
   
       # मुख्य सेटिंग: फाइल सर्च ऑर्डर
       # 1. पाथ जैसा है, वैसे खोजो
       # 2. इंडेक्स.html के लिए खोजो
       # 3. .html फाइल के लिए खोजो
       try_files {path} {path}/index.html {path}.html
   
       # वेबसाइट रूट डायरेक्टरी सेट करें
       root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
   
       # स्टैटिक फाइल सर्व करें
       file_server
   }

   सेव & अप्लाई करें।

3. क्लीन URL साइट खोलें

   अब अपने डोमेन (जैसे https://vitepress-cleanurl.servbay.demo) पर जाएँ। जिन पेजेज़ के URLs में .html बचा नहीं, वे भी सही चलेंगे (जैसे https://vitepress-cleanurl.servbay.demo/about)।

निष्कर्ष

इस गाइड के जरिए, आपने जाना कि कैसे ServBay के साथ VitePress डॉक्युमेंटेशन साइट बनाई, डेवेलप और डिप्लॉय की जाती है। ServBay के साथ Node.js प्रबंधन और लोकल वेब सर्वर का सेटअप बेहद आसान है—चाहे आपको डेवेलपमेंट के लिए रिवर्स प्रॉक्सी चाहिए या प्रॉडक्शन के लिए स्टैटिक सर्वर—साथ ही साथ कस्टम डोमेन और SSL सर्टिफिकेट भी ऑटोमेटिक मिल जाता है।

ServBay और VitePress की ताकत के साथ, तकनीकी डॉक्युमेंटेशन साइट्स का निर्माण और रख-रखाव पहले से कहीं ज्यादा आसान और असरदार हो जाता है।