विकास और निर्माण करें

अब जब आपके पास एस्ट्रो प्रोजेक्ट है तो आप एस्ट्रो के साथ निर्माण के लिए तैयार हैं! 🚀

अपना प्रोजेक्ट संपादित (एडिट) करें

शीर्षक अपना प्रोजेक्ट संपादित (एडिट) करें

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

आप यह भी कर सकते हैं अपने विकास पर्यावरण के पहलुओं को अनुकूलित करें जैसे कि टाइपस्क्रिप्ट को कॉन्फ़िगर करना या आधिकारिक एस्ट्रो एडिटर एक्सटेंशन स्थापित करना।

एस्ट्रो डेव सर्वर शुरू करें

शीर्षक एस्ट्रो डेव सर्वर शुरू करें

एस्ट्रो एक बिल्ट-इन डेवलपमेंट सर्वर के साथ आता है जिसमें प्रोजेक्ट डेवलपमेंट के लिए आपकी ज़रूरत की हर वस्तु उपलब्ध है। astro dev CLI कमांड स्थानीय डेवलपमेंट सर्वर को शुरू कर देगा ताकि आप अपनी नई वेबसाइट को पहली बार एक्शन में देख सकें।

हर स्टार्टर टेम्पलेट एक पूर्व-कॉन्फ़िगर स्क्रिप्ट के साथ आता है जो आपके लिए astro dev चलाएगा। अपनी प्रोजेक्ट निर्देशिका में नेविगेट करने के बाद, इस कमांड को चलाने के लिए अपने पसंदीदा पैकेज मैनेजर का उपयोग करें और एस्ट्रो डेवलपमेंट सर्वर शुरू करें।

npm

npm run dev

pnpm

pnpm run dev

yarn

yarn run dev

अगर सब कुछ ठीक रहा, तो एस्ट्रो अब आपके प्रोजेक्ट को http://localhost:4321/ पर पेश करेगा। अपने ब्राउज़र में उस लिंक पर जाएँ और अपनी नई साइट देखें!

डेवलपमेंट मोड में कार्य करें

शीर्षक डेवलपमेंट मोड में कार्य करें

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

ब्राउज़र में अपनी साइट देखते समय, आपके पास एस्ट्रो डेव टूलबार (EN) तक पहुंच होगी। जैसे-जैसे आप निर्माण करेंगे, यह आपको अपने इसलैंड्स का निरीक्षण करने, पहुंच-योग्यता संबंधी समस्याओं का पता लगाने और बहुत कुछ करने में मदद करेगा।

यदि आप डेव सर्वर शुरू करने के बाद ब्राउज़र में अपना प्रोजेक्ट नहीं खोल पा रहे हैं, तो उस टर्मिनल पर वापस जाएँ जहाँ आपने dev कमांड चलाया था और प्रदर्शित संदेश की जाँच करें। यह आपको बताएगा कि क्या कोई त्रुटि हुई है, या क्या आपका प्रोजेक्ट http://localhost:4321/ के अलावा किसी अन्य URL पर प्रस्तुत किया जा रहा है।

अपनी साइट बनाएं और उसका पूर्वावलोकन करें

शीर्षक अपनी साइट बनाएं और उसका पूर्वावलोकन करें

बिल्ड समय पर बनाई जाने वाली आपकी साइट का वर्शन जांचने के लिए, डेव सर्वर से बाहर निकलें (Ctrl + C) और अपने टर्मिनल में अपने पैकेज मैनेजर के लिए उपयुक्त बिल्ड कमांड चलाएँ:

npm

npm run build

pnpm

pnpm build

yarn

yarn run build

एस्ट्रो एक अलग फ़ोल्डर (डिफ़ॉल्ट रूप से dist/) में आपकी साइट का एक डिप्लॉय-रेडी वर्शन बनाएगा और आप टर्मिनल में इसकी प्रगति देख सकते हैं। यह आपको उत्पादन में डिप्लॉय करने से पहले आपके प्रोजेक्ट में किसी भी बिल्ड एर्रोर्स के बारे में सचेत करेगा। यदि टाइपस्क्रिप्ट को strict या strictest पर कॉन्फ़िगर किया गया है, तो build स्क्रिप्ट आपके प्रोजेक्ट को टाइप त्रुटियों के लिए भी जाँचेगी।

जब बिल्ड समाप्त हो जाए, तो अपने टर्मिनल में उपयुक्त preview कमांड (जैसे npm run preview) चलाएं और आप अपनी साइट का निर्मित वर्शन उसी ब्राउज़र प्रीव्यू विंडो में स्थानीय रूप से देख सकते हैं।

ध्यान दें कि यह आपके कोड का प्रीव्यू अर्थात पूर्वावलोकन करता है जैसा कि बिल्ड कमांड को अंतिम बार चलाने पर मौजूद था। इसका उद्देश्य आपको यह प्रीव्यू देना है कि वेब पर तैनात होने पर आपकी साइट कैसी दिखाई देगी। निर्माण के बाद आपके द्वारा अपने कोड में किए गए कोई भी बाद के परिवर्तन तब तक आपकी साइट का प्रीव्यू करते समय दिखाई नहीं देंगे जब तक कि आप बिल्ड कमांड को फिर से नहीं चलाते।

प्रीव्यू से बाहर निकलने के लिए (Ctrl + C) का उपयोग करें और एक अन्य टर्मिनल कमांड चलाएं, जैसे कि डेव सर्वर को पुनः आरंभ करके डेवलपमेंट मोड में कार्य करना पर वापस जाएं, जो आपके संपादन के साथ अपडेट होता है और आपके कोड परिवर्तनों का लाइव पूर्वावलोकन दिखाता है।

एस्ट्रो सीएलआई (EN) और टर्मिनल कमांड के बारे में अधिक पढ़ें, जिनका उपयोग आप एस्ट्रो के साथ निर्माण करते समय करेंगे।

संकेत

आप बहुत ज़्यादा कोड जोड़ने या बदलने से पहले अपनी नई साइट को तुरंत तैनात करना (EN) चाह सकते हैं। यह आपकी साइट का न्यूनतम, कार्यशील संस्करण प्रकाशित करने में सहायक है और बाद में अपनी तैनाती के समस्या निवारण में आपका अतिरिक्त समय और प्रयास बचा सकता है।

अगले कदम

शीर्षक अगले कदम

सफलता! अब आप एस्ट्रो के साथ निर्माण शुरू करने के लिए तैयार हैं! 🥳

यहाँ कुछ चीजें हैं जिन्हें हम आगे पढ़ने की सलाह देते हैं। आप उन्हें किसी भी क्रम में पढ़ सकते हैं। आप हमारे दस्तावेज़ों को थोड़ी देर के लिए छोड़ सकते हैं और अपने नए एस्ट्रो प्रोजेक्ट कोडबेस में खेल सकते हैं, जब भी आपको कोई परेशानी हो या कोई सवाल हो तो यहाँ वापस आएँ।

अपना डेव एनवायरनमेंट कॉन्फ़िगर करें

शीर्षक अपना डेव एनवायरनमेंट कॉन्फ़िगर करें

अपने डेवलपमेंट अनुभव को अनुकूलित करने के लिए नीचे दिए गए मार्गदर्शिकाओं का अन्वेषण करें।

एडिटर सेटअप एस्ट्रो डेवलपर अनुभव को बेहतर बनाने और नई सुविधाओं को अनलॉक करने के लिए अपने कोड संपादक को अनुकूलित करें।

डेव टूलबार डेव टूलबार की उपयोगी विशेषताओं का अन्वेषण करें.

टाइपस्क्रिप्ट कॉन्फ़िगरेशन टाइप-चेकिंग, इंटेलिसेंस, आदि के लिए विकल्प कॉन्फ़िगर करें।

एस्ट्रो की विशेषताएं जानें

शीर्षक एस्ट्रो की विशेषताएं जानें

अपने कोडबेस को समझें हमारी प्रोजेक्ट संरचना मार्गदर्शिका में एस्ट्रो की फ़ाइल संरचना के बारे में जानें।

कंटेंट कलेक्शन बनाएँ अपनी नई साइट पर फ्रंटमैटर सत्यापन और स्वचालित प्रकार-सुरक्षा के साथ कंटेंट जोड़ें।

व्यू संक्रमण जोड़ें निर्बाध पृष्ठ संक्रमण और एनिमेशन बनाएं.

आइलैंड के बारे में जानें ास्त्रो के द्वीप वास्तुकला के बारे में पढ़ें।

परिचयात्मक ट्यूटोरियल लें

शीर्षक परिचयात्मक ट्यूटोरियल लें

हमारे परिचयात्मक ट्यूटोरियल (EN) में एक खाली पृष्ठ से शुरू करके एक पूरी तरह कार्यात्मक एस्ट्रो ब्लॉग बनाएं।

यह देखने का एक शानदार तरीका है कि एस्ट्रो कैसे काम करता है और आपको पेज, लेआउट, कंपोनेंट्स, रूटिंग, आइलैंड और बहुत कुछ की मूल बातें बताता है। इसमें सामान्य रूप से वेब डेवलपमेंट अवधारणाओं के लिए नए लोगों के लिए एक वैकल्पिक, शुरुआती-अनुकूल इकाई भी शामिल है, जो आपको अपने कंप्यूटर पर आवश्यक एप्लिकेशन इंस्टॉल करने, GitHub खाता बनाने और अपनी साइट को तैनात करने के माध्यम से मार्गदर्शन करेगी।