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

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

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

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

VitePress क्या है?

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

VitePress के मुख्य फीचर्स और फायदे

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

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

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

ServBay आपको Node.js के वर्शन को मैनेज करने और Web सर्वर को कॉन्फ़िगर कर VitePress प्रोजेक्ट को सर्व करने की सुविधा देता है, चाहे वो डेवेलपमेंट मोड में लोकल सर्वर हो या प्रोडक्शन मोड में स्टैटिक फाइल सर्विस।

आवश्यकताएं

शुरू करने से पहले, निम्नलिखित तैयारियों को सुनिश्चित करें:

ServBay इंस्टॉल करें: आपके सिस्टम पर ServBay सफलतापूर्वक इंस्टॉल होना चाहिए। अगर इंस्टॉल नहीं किया, तो ServBay इंस्टॉलेशन गाइड देखें।
Node.js पैकेज इंस्टॉल करें: ServBay में आवश्यक Node.js पैकेज वर्शन इंस्टॉल व एक्टिवेट करें। ServBay के कण्ट्रोल पैनल की "पैकेज" पेज पर जाकर मैनेज करें। देखें Node.js का उपयोग。

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

प्रोजेक्ट डायरेक्टरी इनिशियालाइज करें
सबसे पहले, अपना टर्मिनल एप्लिकेशन खोलें। सलाह दी जाती है कि ServBay की डिफॉल्ट वेबसाइट रूट डायरेक्टरी में ही प्रोजेक्ट फोल्डर बनाएं, ताकि बाद में ServBay की वेबसाइट सेटअप आसान हो।
macOS:
bash
```
cd /Applications/ServBay/www
mkdir servbay-vitepress-app
cd servbay-vitepress-app
```
1
2
3
Windows:
cmd
```
cd C:\ServBay\www
mkdir servbay-vitepress-app
cd servbay-vitepress-app
```
1
2
3
VitePress इंस्टॉल करे और इनिशियल कॉन्फ़िगरेशन करें
प्रोजेक्ट डायरेक्टरी servbay-vitepress-app में npm या yarn से VitePress को डेवेलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करें और प्रारम्भिक कमांड चलाएं।
bash
```
npm add -D vitepress
npx vitepress init
```
1
2
या Yarn का प्रयोग करें:
bash
```
yarn add -D vitepress
yarn vitepress init
```
1
2
इनिशियलाइज़ कमांड आपको बेसिक सेटिंग्स जैसे वेबसाइट टाइटल, डिस्क्रिप्शन आदि के लिए निर्देशित करेगा। जानकारी भरें:
```
 ┌  Welcome to VitePress!
 │
 ◇  Where should VitePress initialize the config?
 │  ./docs  # डिफॉल्ट डॉक्युमेंट्स डायरेक्टरी, सिर्फ Enter दबाएं
 │
 ◇  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 # स्क्रिप्ट जोड़ना है या नहीं, हां चुनें
 │
 └  Done! Now run npm run docs:dev and start writing.
```
इनिशियलाइज़ेशन के बाद, VitePress आपके servbay-vitepress-app फोल्डर में docs सबडायरेक्टरी बनाएगा, जिसमें डिफॉल्ट कॉन्फ़िगरेशन फाइल्स (.vitepress) और सैंपल पेज (जैसे index.md, guide/index.md) आ जाएंगे। साथ में, package.json में docs:dev व docs:build जैसे स्क्रिप्ट जुड़ जाएंगे।

VitePress प्रोजेक्ट में बदलाव करें

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

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

markdown

# Hello ServBay!

ServBay का उपयोग कर अपने VitePress डॉक्युमेंटेशन वेबसाइट को चलाने में आपका स्वागत है।

यह VitePress से बना एक लोकल डेमो साइट है, जिसे ServBay प्रोवाइड करता है।

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

VitePress वेबसाइट के डेवेलपमेंट के दौरान बिल्ट-इन डेवेलपमेंट सर्वर (Hot Reload के साथ) इस्तेमाल होता है, जिससे बदलाव तुरंत दिखाई देता है। ServBay के रिवर्स प्रॉक्सी सिस्टम का उपयोग कर कस्टम डोमेन और SSL के साथ लोकल डेवेलपमेंट सर्वर को एक्सेस कर सकते हैं।

VitePress डेवेलपमेंट सर्वर शुरू करें
टर्मिनल में प्रोजेक्ट रूट डायरेक्टरी में जाएं (macOS: /Applications/ServBay/www/servbay-vitepress-app, Windows: C:\ServBay\www\servbay-vitepress-app)। सर्वर शुरू करने के लिए:
bash
```
npm run docs:dev -- --port 8585
```
1
या Yarn से:
bash
```
yarn docs:dev --port 8585
```
1
सर्वर तय पोर्ट (जैसे 8585) पर चालू हो जाएगा। टर्मिनल में लोकल एड्रेस (जैसे http://localhost:8585) दिखेगा।
ServBay वेबसाइट (रिवर्स प्रॉक्सी) कॉन्फ़िगर करें
ServBay कंट्रोल पैनल खोलें और "वेबसाइट" टैब में जाएं, नई वेबसाइट जोड़ें।
- नाम: पहचानने योग्य नाम डालें, जैसे VitePress डेवेलपमेंट साइट।
- डोमेन: लोकल डेवेलपमेंट के लिए वांछित डोमेन डालें, सुझाए गए अंत में .servbay.demo लगाएं जैसे vitepress-dev.servbay.demo।
- वेबसाइट प्रकार: चुनें रिवर्स प्रॉक्सी।
- IP: 127.0.0.1 भरें (लोकलहोस्ट)।
- पोर्ट: वही पोर्ट डालें, जैसे 8585।
सेव करें और बदलाव लागू करें। ServBay वेब सर्वर (Caddy/Nginx) को अपने-आप कॉन्फ़िगर करता है ताकि https://vitepress-dev.servbay.demo का ट्रैफिक http://127.0.0.1:8585 को फॉरवर्ड हो।
डेवेलपमेंट साइट एक्सेस करें
ब्राउज़र में अपने डोमेन (https://vitepress-dev.servbay.demo) को खोलें। आपको VitePress डेव सर्वर का कंटेंट दिखाई देगा। ServBay की सेटिंग के कारण, आपके कस्टम डोमेन व SSL सर्टिफिकेट (ServBay User CA से) अपने-आप मिल जाते हैं।

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

VitePress डॉक्युमेंट तैयार होने पर, आपको बेस्ट-ऑप्टिमाइज़्ड स्टैटिक वर्शन बनाना होता है।

प्रोडक्शन वर्शन तैयार करें
प्रोजेक्ट रूट डायरेक्टरी में जाएं—macOS: /Applications/ServBay/www/servbay-vitepress-app, Windows: C:\ServBay\www\servbay-vitepress-app—और बिल्‍ड करें:
bash
```
npm run docs:build
```
1
या Yarn:
bash
```
yarn docs:build
```
1
Markdown, Vue components आदि को वायरलाएज्ड स्टैटिक HTML, CSS, JS फाइल्स में बदल दिया जाएगा। यह docs/.vitepress/dist फोल्डर में सेव होती हैं।
ServBay वेबसाइट (स्टैटिक फाइल सर्विस) सेटअप करें
प्रोडक्शन वेबसाइट सिर्फ स्टैटिक फाइल्स का सेट है, इसे ServBay की स्टैटिक फ़ाइल सर्विस से डायरेक्ट सर्व करें।
ServBay कंट्रोल पैनल में "वेबसाइट" सेक्शन में नई वेबसाइट जोड़ें।
- नाम: पहचानने योग्य दर्ज करें, जैसे VitePress प्रोडक्शन साइट।
- डोमेन: वांछित डोमेन डालें, जैसे vitepress-prod.servbay.demo।
- वेबसाइट प्रकार: चुनें स्टैटिक।
- वेबसाइट रूट डायरेक्टरी: अपनी स्टैटिक फाइल्स का फोल्डर भरें:
  - macOS: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
  - Windows: C:\ServBay\www\servbay-vitepress-app\docs\.vitepress\dist
सेव करें व चेंजेस अप्लाई करें। ServBay वेब सर्वर को डायरेक्ट इस डायरेक्टरी से कंटेंट सर्व करने को सेट कर देगा।
प्रोडक्शन साइट एक्सेस करें
अब अपने डोमेन (https://vitepress-prod.servbay.demo) से VitePress प्रोडक्शन साइट देखें। फिर से, ServBay आपको कस्टम डोमेन और SSL दोनों प्रदान करता है।

साफ सुथरे URL मोड में चलाना (`cleanUrls: true`)

VitePress cleanUrls: true का सपोर्ट देता है, जिससे URL में .html एक्सटेंशन नहीं आता (जैसे /guide/, /about आदि)। Web सर्वर को ऐसी रिक्वेस्ट हैंडल करने के लिए अतिरिक्त सेटअप चाहिए।

ServBay Caddy या Nginx का उपयोग करता है। नीचे Caddy के लिए सेटअप उदाहरण है; इसमें try_files का उपयोग किया गया है जिससे फाइल ढूंढी जाती है (.html या डायरेक्टरी के index.html)।

VitePress कॉन्‍फिगरेशन में cleanUrls एनेबल करें
अपनी VitePress सेटिंग फाइल (docs/.vitepress/config.mts या docs/.vitepress/config.ts) खोलकर siteConfig में cleanUrls शामिल करें:
typescript
```
// docs/.vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  // ... अन्य सेटिंग्स
  cleanUrls: true, // साफ URL एनेबल करें
  // ... अन्य सेटिंग्स
})
```
1
2
3
4
5
6
7
8
दोबारा npm run docs:build चलाकर प्रोडक्शन साइट बनाएं।

ServBay वेबसाइट में कस्टम Caddy कॉन्फिग सेट करें

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

एडिट बटन क्लिक करें।
कस्टम कॉन्फिगरेशन ऑप्शन टिक करें।
Caddy कॉन्फिगरेशन में नीचे दिया सेटअप पेस्ट करें। ध्यान दें, servbay-vitepress-test.prod को अपने असली डोमेन से और रूट डायरेक्टरी अपने अनुसार बदलें:
- macOS: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
- Windows: C:\ServBay\www\servbay-vitepress-app\docs\.vitepress\dist

bash

# अपने डोमेन, जैसे vitepress-cleanurl.servbay.demo, से बदलें
vitepress-cleanurl.servbay.demo {
    # Brotli (zstd) और Gzip कंपरेशन एनेबल, स्पीड बढ़ाने के लिए
    encode zstd gzip

    # ServBay का डिफॉल्ट लॉगिंग आयात करें, डिबग के लिए
    import set-log vitepress-cleanurl.servbay.demo

    # ServBay के इंटरनल SSL सर्टिफिकेट हैंडल करें
    tls internal

    # मुख्य सेटअप: फाइल ढूंढें
    # 1. सीधे पाथ पर देखें (जैसे /about के लिए /about)
    # 2. पाथ में index.html देखें (जैसे /guide/ के लिए /guide/index.html)
    # 3. पाथ.html पर देखें (जैसे /about के लिए /about.html)
    try_files {path} {path}/index.html {path}.html

    # वेबसाइट रूट डायरेक्टरी सेट करें
    # macOS: root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
    # Windows: root * C:\ServBay\www\servbay-vitepress-app\docs\.vitepress\dist
    root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

    # स्टैटिक फाइल सर्विस एनेबल करें
    file_server
}

सेव करें व चेंजेस लागू करें।

साफ URL मोड वाली साइट एक्सेस करें
अब आपने जो डोमेन सेट किया है (जैसे https://vitepress-cleanurl.servbay.demo) खोलें। cleanUrls ओप्शन वाले पेज (.html एक्सटेंशन बिना) ऐक्सेस किए जा सकते हैं—जैसे https://vitepress-cleanurl.servbay.demo/about के लिए सीधे /about URL पर जाएं।

निष्कर्ष

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

ServBay और VitePress के शक्तिशाली संयोजन से, आप उच्च गुणवत्ता, अच्छी तरह संरचित और तेज तकनीकी डॉक्युमेंट निर्माण तथा प्रबंधन बहुत जल्दी कर सकते हैं।

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

VitePress क्या है? ​

VitePress के मुख्य फीचर्स और फायदे ​

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

आवश्यकताएं ​

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

VitePress प्रोजेक्ट में बदलाव करें ​

डेवेलपमेंट मोड में जाएं ​

प्रोडक्शन वर्शन बनाएं ​

साफ सुथरे URL मोड में चलाना (cleanUrls: true) ​

निष्कर्ष ​