npx cms-create-site my-site आज आप क्या बनाना चाहेंगे?
देखिएVertex क्या है
एक कंटेंट साइट दरअसल एक कॉन्फ़िग फ़ाइल है। बाकी सब फ़्रेमवर्क की ज़िम्मेदारी है।
Vertex CMS, vite-ssg पर बना एक Vue 3 फ़्रेमवर्क है। आप JSON में लिखते हैं कि हर पृष्ठ पर क्या है; बदले में आपको एक प्री-रेंडर की गई स्टैटिक साइट मिलती है जिसमें रूटिंग, मेटाडेटा, थीमिंग और छवियाँ पहले से संभाली जा चुकी होती हैं। न कोई एप्लिकेशन कोड लिखना है, न कोई सर्वर चलाना है।
पृष्ठ कोड नहीं, डेटा हैं
एक पृष्ठ यानी कंपोनेंट्स की सूची और उन कंपोनेंट्स को चाहिए वह कंटेंट। कोई सेक्शन जोड़ना यानी एक पंक्ति जोड़ना। किसी शीर्षक को बदलने के लिए किसी को .vue फ़ाइल खोलनी नहीं पड़ती, और कंटेंट में किया गया संपादन बिल्ड को तोड़ नहीं सकता।
डिज़ाइन एक टोकन मैनिफ़ेस्ट है
थीम डिज़ाइन टोकन का एक ही JavaScript ऑब्जेक्ट है — पैलेट, टाइपोग्राफ़ी, सतहें, फ़ोकस रिंग, एलिवेशन। फ़्रेमवर्क इसे CSS कस्टम प्रॉपर्टीज़ में संकलित करता है, इसलिए पूरी साइट का रूप बदलना एक फ़ाइल का काम है, स्टाइलशीट की छानबीन का नहीं।
स्टैटिक आउटपुट, असली SEO
हर रूट अपने अलग HTML में प्री-रेंडर होता है — कैनोनिकल URL, hreflang विकल्प, JSON-LD, Open Graph टैग, एक साइटमैप और आपकी ड्राफ़्ट सेटिंग्स से बनी robots.txt के साथ। इस फ़ोल्डर को कहीं भी तैनात कीजिए, जहाँ फ़ाइलें परोसी जाती हों।
त्वरित शुरुआत
शून्य से तैनाती-योग्य साइट तक, चार कमांड में।
Vertex एक ही npm पैकेज और एक Vite प्लगइन के रूप में आता है। स्कैफ़ोल्डर एक चालू साइट लिख देता है जिसे आप तुरंत बिल्ड कर सकते हैं; उसके बाद आप बस JSON संपादित करते हैं।
एक साइट बनाइए
साइट डायरेक्टरी, एक शुरुआती थीम और एक होम पेज बनाता है जो पहले से ही बिल्ड हो जाता है।
टर्मिनल npx cms-create-site my-site cd my-site npm installएक पृष्ठ का विवरण दीजिए
ऐरे इंडेक्स के साथ डॉट-नोटेशन वाली सपाट कुंजियाँ। फ़्रेमवर्क इन्हें खोलकर वह नेस्टेड ऑब्जेक्ट बना देता है जिसे आपके कंपोनेंट रेंडर के समय पढ़ते हैं।
site/content/en/pages/home.json { "components[0]": "Header", "components[1]": "Hero", "components[2]": "Footer", "content.hero.headline": "Welcome", "content.hero.subhead": "Built with Vertex CMS.", "content.hero.cta.text": "Get in touch", "content.hero.cta.href": "/contact", "path": "/" }पूर्वावलोकन कीजिए
हॉट रीलोड के साथ Vite डेवलपमेंट सर्वर। कंटेंट में किए बदलाव तुरंत दिखते हैं; छवि और थीम के बदलाव भी।
टर्मिनल npm run devस्टैटिक साइट बिल्ड कीजिए
हर रूट को dist/ में उसकी अपनी HTML फ़ाइल में प्री-रेंडर करता है, रिस्पॉन्सिव छवि वेरिएंट बनाता है, और sitemap.xml, robots.txt, manifest.json तथा एक 404 पृष्ठ लिखता है।
टर्मिनल npm run build:ssg
पूरी प्रक्रिया बस इतनी ही है। सम्पूर्ण कंटेंट मॉडल, थीमिंग टोकन और तैनाती के विकल्पों के लिए पढ़िए दस्तावेज़ →
क्या-क्या शामिल है
हर कंटेंट साइट को जिन हिस्सों की ज़रूरत होती है, वे पहले से बने हैं।
ये कोई प्लगइन नहीं हैं जिन्हें ढूँढ़ने जाना पड़े। ये फ़्रेमवर्क में ही हैं, डिफ़ॉल्ट रूप से चालू हैं, और उसी JSON से कॉन्फ़िगर होते हैं जिससे बाकी सब कुछ।
प्री-रेंडर की गई रूटिंग
रूट आपकी पृष्ठ फ़ाइलों से बनते हैं। हर एक बिल्ड के समय अपने अलग HTML में रेंडर होता है — न कोई SPA रीराइट, न असली कंटेंट URL के लिए होमपेज का खोल परोसा जाना।
बहुभाषी कंटेंट
हर भाषा के लिए अलग डायरेक्टरी, जो एक-दूसरे का प्रतिबिंब होती हैं। आधार भाषा पहले लोड होती है और हर भाषा केवल उन्हीं कुंजियों को अधिलेखित करती है जो उसने परिभाषित की हैं — यानी आंशिक अनुवाद भी एक वैध अनुवाद है।
रिस्पॉन्सिव छवियाँ
मूल छवि को site/assets/img/ में रख दीजिए। बिल्ड छह चौड़ाइयों में AVIF, WebP और JPEG बनाता है, उन्हें आपके रिपॉज़िटरी के बाहर कैश करता है, और <picture> के भीतर srcset के ज़रिए परोसता है।
SEO मेटाडेटा
कैनोनिकल URL, hreflang विकल्प, Open Graph और Twitter कार्ड, JSON-LD, स्वतः बने ब्रेडक्रम्ब, sitemap.xml, robots.txt और एक वेब ऐप मैनिफ़ेस्ट — सब कुछ अपने आप बनता है, हाथ से कुछ भी संभालना नहीं पड़ता।
ड्राफ़्ट पर ताला
किसी एक पृष्ठ, किसी पथ-उपसर्ग, या पूरी साइट को पासवर्ड के पीछे रखिए। बंद पृष्ठ noindex के साथ प्रकाशित होते हैं, साइटमैप से बाहर रहते हैं, और खुलने तक कोई सामग्री रेंडर नहीं करते।
थीम और एक्सटेंशन
थीम टोकन मैनिफ़ेस्ट हैं। एक्सटेंशन सत्यापित कंपोनेंट बंडल हैं। दोनों आपके रिपॉज़िटरी के भीतर रह सकते हैं या npm पर प्रकाशित होकर कई साइटों में साझा किए जा सकते हैं।
तीन-स्तरीय कंपोनेंट
साइट के अपने कंपोनेंट एक्सटेंशन कंपोनेंट पर भारी पड़ते हैं, और वे अंतर्निहित सेट पर। जो अधिक विशिष्ट है वही जीतता है, और नाम टकराने पर स्रोत-सहित नाम अंतर स्पष्ट कर देते हैं।
एक असली 404
फ़्रेमवर्क /404.html को आपकी अपनी साइट के ढाँचे के साथ प्री-रेंडर करता है, ताकि बेमेल URL को खाली रिस्पॉन्स बॉडी के बजाय noindex वाला ब्रांडेड पृष्ठ मिले।
शुरू कीजिए
तो — आज आप क्या बनाना चाहेंगे?
Vertex CMS MIT लाइसेंस के तहत है और npm पर प्रकाशित है। एक साइट बनाइए, दस्तावेज़ पढ़िए, या सोर्स कोड पढ़िए।
npx cms-create-site my-site