Jamstack Build faster, more efficient websites today

Jamstack Build faster, more efficient websites today

जैमस्टैक वेबसाइटों के निर्माण और सेवा की एक विधि है जिसे लोड करने के लिए न्यूनतम संख्या में सर्वर की आवश्यकता होती है। यह निर्माण प्रक्रिया में उपयोग की जाने वाली तकनीक से अपना नाम प्राप्त करता है, जावास्क्रिप्ट, एपीआई और मार्कअप पृष्ठ पूर्व-मार्कअप भाषा के साथ बनाए जाते हैं और उपयोगकर्ता द्वारा अनुरोध किए जाने पर स्थिर HTML फ़ाइलों के रूप में कार्य करते हैं।

एक साइट बनाने और इन तकनीकों को एक साथ रखने के लिए, आपको सही टूल की आवश्यकता है। यह सुनिश्चित करने में मदद करने के लिए कि आपके लिए कौन से विकास का माहौल सबसे अच्छा है, सर्वोत्तम कोड संपादकों के हमारे पोस्ट देखें।

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

कई चीजें हैं जो गलत हो सकती हैं, और भले ही वे ठीक काम करें। लेकिन यह उन उपयोगकर्ताओं के लिए धीमा है जो बिजली की तेजी से डिजिटल दुनिया की सराहना करते हैं।

लेकिन जैमस्टैक का उपयोग साइट को तेज और निर्दोष बनाता है। इस ट्यूटोरियल में, हम यह प्रदर्शित करेंगे कि अवधारणा के परिचय के रूप में जामस्टैक में एक ब्लॉग साइट कैसे स्थापित की जाए।

Hugo का उपयोग करने वाला उपकरण एक स्थिर साइट बिल्डर है, नेटलाइज़ एक बिल्ड टूल है, और Github मुफ्त फ़ाइल होस्टिंग है।

01. आवश्यक उपकरण डाउनलोड करें

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

02. एक कार्यशील निर्देशिका बनाएं और ह्यूगो स्थापित करें

एक निर्देशिका बनाएं और इसे जामस्टैक नाम दें। यह वह जगह है जहां हम अपने डेवलपर पर काम करेंगे। इस निर्देशिका में ह्यूगो के लिए डाउनलोड की गई फ़ाइल निकालें और इसे कमांड प्रॉम्प्ट में खोलें।

03.Start सर्वर

एक बार जब संदर्भ पूरा हो जाता है, तो npm शुरू करें। विकास सर्वर अब विक्टर होगो की एक स्थानीय प्रति चला रहा है, जो डिफ़ॉल्ट रूप से स्थानीय रूप से सुलभ है: 3000 – उस लिंक को खोलने पर सब कुछ सफल होने पर एक स्वागत योग्य स्क्रीन दिखाना चाहिए। एक बार परीक्षण करने के बाद, सर्वर को रोकने के लिए Ctrl + C दबाएं।

04.Add पृष्ठ और पोस्ट

निर्देशिका को साइट फ़ोल्डर में बदलें, फिर पेज-one.md और post-one.md को जोड़ने के लिए ह्यूगो नई कमांड का उपयोग करें।

विंडोज में काम करने वाले डेवलपर्स को एक hugo.exe फ़ाइल डाउनलोड करने और इसे काम करने के लिए एक रास्ता जोड़ने की आवश्यकता है। लेकिन ह्यूगो वेबसाइट पर आसानी से उपलब्ध प्रलेखन है।

पेज और पोस्ट के लिए 05.Add सामग्री

परीक्षण उद्देश्यों के लिए, कुछ सामग्री को नए पदों और पृष्ठों में जोड़ना होगा।

फ़ाइल ब्राउज़र में प्रोजेक्ट के लिए निर्देशिका खोलें और इस फ़ोल्डर के भीतर Jamstack / Site / Content पर जाएं। पृष्ठ-one.md फ़ाइल पहले से मौजूद होनी चाहिए। पोस्ट नाम का एक फ़ोल्डर भी है जिसमें पोस्ट-one.md शामिल है।

06. एक विषय को उप-मॉड्यूल के रूप में जोड़ें

पिछली फ़ाइल में दर्ज किया गया पाठ बिना थीम के नहीं देखा जा सकता है। उदाहरण के लिए, अद्वितीय थीम का उपयोग करने के लिए, वर्तमान साइट / लेआउट फ़ोल्डर की सामग्री को हटा दें, इसे खाली छोड़ दें।

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

07. विषय को कॉन्फ़िगर करें और सर्वर चलाएं

साइट / विषय / गोहुगो-थीम aanke / exampleSite / config.toml की सामग्री को साइट फ़ोल्डर में कॉपी करें।

पृष्ठ के शीर्ष पर, आधार URL को ‘/’ से बदलें और थीम = ‘../ ..’ लाइन को हटाएं, कॉन्फ़िगरेशन फ़ाइल सहेजें, टर्मिनल खोलें और npm स्टार्ट कमांड चलाएं। आप नाम मान बदलकर वेबसाइट का नाम (यदि वांछित हो) भी बदल सकते हैं

08. ब्राउज़र में टेस्ट करें

ओपन http: // लोकलहोस्ट: 3000 / पेज-वन / थीम को देखने के लिए जो पेज मार्कडाउन को पूरी तरह से स्टाइल पेज के रूप में प्रदर्शित करता है। जब आप होम पेज खोलेंगे, तो पहली पोस्ट दिखाई देगी। इसका मतलब है कि स्थैतिक साइट बिल्डर अब काम करता है।

09.Configure मेनू

वेबसाइट को देखते समय, आप देखेंगे कि पहले बनाया गया पृष्ठ नेविगेशन में प्रदर्शित नहीं है। सामग्री में वापस, ह्यूगो को कौन सा मेनू पृष्ठ प्रदर्शित करना है यह बताने के लिए अग्रभूमि विन्यास में एक पंक्ति जोड़ें।

10. फ़ाइल को GitHub पर पुश करें

फिर उपयोगकर्ता के क्लिक के जवाब में सर्कल को एक एनीमेशन दें। अब जब स्थैतिक साइट उपलब्ध है, यह विकास सर्वर पर उपलब्ध होना चाहिए।

पहला कदम GitHub को कोड भेजना, GitHub पर एक नया भंडार बनाना है, फिर अपने प्रोजेक्ट फ़ोल्डर या GitHub डेस्कटॉप ऐप से कोड को पुश करने के लिए कमांड लाइन का उपयोग करें।

11. Netlify से कनेक्ट करें

Netlify यह सब एक साथ लाता है, एक साइट बनाता है और इसे एक अस्थायी डोमेन पर कार्य करता है। Netlify पर एक खाता बनाने और इसे अपने GitHub खाते से लिंक करके शुरू करें। जब तक सब कुछ सेट न हो तब तक नई साइट पर क्लिक करें।

12. जीथुब के साथ जुड़ें

निरंतर तैनाती के लिए, जीथब पर क्लिक करें और फिर नेटलाइज़ ट्यूटोरियल में पहले से बनाए गए रिपोज का चयन करें। यह परियोजना के लिए सबसे अच्छा निर्माण विकल्पों का स्वचालित रूप से पता लगाना चाहिए। यदि सब कुछ ठीक है, तो एनपीएम रन बिल्ड को पढ़ा जाना चाहिए।

Leave a Comment

Your email address will not be published.