Netlify और GitHub का उपयोग करके एक एंगुलर वेबसाइट को कैसे होस्ट करें

एंगुलर वेबसाइट को ऑनलाइन होस्ट करते समय, आप कई उपलब्ध प्लेटफॉर्म के बीच चयन कर सकते हैं। इनमें से एक Netlify है जिसे आप फ्री में इस्तेमाल कर सकते हैं।

यदि आप अपनी वेबसाइट के स्रोत कोड की एक प्रति GitHub रिपॉजिटरी में संग्रहीत करते हैं, तो आप उस साइट को होस्ट करने के लिए Netlify का उपयोग कर सकते हैं।

जब आप रिपॉजिटरी शाखा में कोई नया परिवर्तन करते हैं जिसे आप होस्ट कर रहे हैं तो Netlify स्वचालित रूप से आपकी साइट को फिर से तैनात करता है।

एक बुनियादी उदाहरण एंगुलर ऐप कैसे बनाएं

आप विज़ुअल स्टूडियो कोड जैसे संपादक का उपयोग करके एक सरल कोणीय एप्लिकेशन बना सकते हैं। फिर आप Netlify का उपयोग करके इस वेबसाइट को होस्ट कर सकते हैं।

1. एक बनाने के नया कोणीय ऐप.
2. एक साधारण होम पेज बनाएं। कोड को में बदलें app.component.html
   instagram viewer
   निम्न लैंडिंग पृष्ठ सामग्री वाली फ़ाइल:

   <डिव क्लास ="कंटेनर-डार्क हेडर">
   <एच 2>हमारी व्यवसाय वेबसाइट</h2>
   </div>
   <डिव क्लास ="कंटेनर सफेद">
   <डिव क्लास ="संतुष्ट">
   <एच 2>हमारी व्यवसाय वेबसाइट</h2>
   <पी>कम समय में अपनी पेशेवर वेबसाइट को डिज़ाइन करना, विकसित करना और उसका रखरखाव करना सीखें।</पी>
   </div>
   </div>
   <डिव क्लास ="कंटेनर नारंगी">
   <डिव क्लास ="संतुष्ट">
   <एच 2>हम क्या करते हैं</h2>
   <पी>हम आपको अपने ग्राहकों के लिए वेबसाइट और अद्वितीय समाधान विकसित करने के लिए टूल प्रदान करते हैं। हम इसके लिए प्रशिक्षण भी देते हैं
    रखरखाव और अन्य वेबसाइट संबंधित विषय।</पी>
   </div>
   </div>
   <डिव क्लास ="कंटेनर सफेद">
   <डिव क्लास ="संतुष्ट">
   <एच 2>हमारे बारे में</h2>
   <पी>हम मेलबर्न, ऑस्ट्रेलिया से संचालित होने वाला एक छोटा व्यवसाय हैं। हमारे रिक्त स्थान विशिष्ट रूप से तैयार किए गए हैं ताकि ग्राहक भी कर सकें
    हमसे व्यक्तिगत रूप से मिलें।</पी>
   </div>
   </div>
   <डिव क्लास ="कंटेनर-डार्क फुटर">
   <पी>कॉपीराइट 2022</पी>
   </div>

3. एंगुलर ऐप में कुछ सीएसएस जोड़कर कुछ स्टाइलिंग जोड़ें app.component.css फ़ाइल:

   * {
    फुहारा परिवार: "एरियल", सान्स सेरिफ़;
   }
   .शीर्षक {
    पैडिंग: 30 पीएक्स 50 पीएक्स;
   }
   .पाद {
    पैडिंग: 5px 50px;
    पाठ-संरेखण: केंद्र;
   }
   .कंटेनर-डार्क {
    पृष्ठभूमि का रंग: #202C39;
    रंग सफेद;
    डिस्प्ले: फ्लेक्स;
    संरेखित-आइटम: केंद्र;
   }
   .कंटेनर-नारंगी {
    पृष्ठभूमि का रंग: #एफएफडी091;
    रंग: #202C39;
   }
   .कंटेनर-सफेद {
    पृष्ठभूमि-रंग: सफेद धुआँ;
    रंग: #202C39;
   }
   ।संतुष्ट {
    पैडिंग: 100px 25%;
    डिस्प्ले: फ्लेक्स;
    फ्लेक्स-दिशा: स्तंभ;
    रेखा-ऊँचाई: 2रेम;
   फ़ॉन्ट आकार: 1.2em;
    संरेखित-आइटम: केंद्र;
    पाठ-संरेखण: केंद्र;
   }

4. समग्र Angular ऐप के लिए कुछ स्टाइलिंग जोड़ें Styles.css:

   शरीर {
    मार्जिन: 0;
    गद्दी: 0;
   }

5. ऐप का परीक्षण करने के लिए, टर्मिनल या कमांड लाइन का उपयोग करके इसके रूट फ़ोल्डर में नेविगेट करें। लिखें एनजी सेवा आज्ञा:

   एनजी सेवा

6. अपने कोड को संकलित करने और देखने के लिए प्रतीक्षा करें http://localhost: 4200/ अपने ऐप को देखने के लिए वेब ब्राउज़र में।
7. में .browserslistrc फ़ाइल, आईओएस सफारी संस्करण 15.2-15.3 को हटा दें। जब आप प्रोजेक्ट बनाते हैं तो यह संगतता त्रुटियों को कंसोल में दिखने से रोकेगा।

   अंतिम 1 क्रोम संस्करण
   अंतिम 1 फ़ायरफ़ॉक्स संस्करण
   पिछले 2 एज प्रमुख संस्करण
   पिछले 2 सफारी प्रमुख संस्करण
   पिछले 2 iOS प्रमुख संस्करण
   फ़ायरफ़ॉक्स ईएसआर
   नहींios_saf 15.2-15.3
   नहींसफारी 15.2-15.3

8. का उपयोग करके अपना कोड बनाएं एनजी निर्माण टर्मिनल में कमांड:

   एनजी निर्माण

9. में .gitignore फ़ाइल, निकालें या बाहर टिप्पणी करें /dist पंक्ति। इसे हटाने से यह सुनिश्चित होगा जिला फ़ोल्डर उन फ़ाइलों के सेट में है जिन्हें आप अपने GitHub रिपॉजिटरी में धकेलते हैं।

   # / जिला

कैसे अपने कोणीय कोड को GitHub पर पुश करें

Netlify के सोर्स कोड तक पहुंचने के लिए आपको अपने कोड को एक रिमोट रिपॉजिटरी में स्टोर करना होगा।

आप GitHub पर एक नया रिपॉजिटरी बना सकते हैं, और अपनी वेबसाइट के कोड को उस रिपॉजिटरी में पुश कर सकते हैं। यदि आप GitHub से परिचित नहीं हैं, तो इनमें से कुछ को समझना उपयोगी हो सकता है गिटहब की बुनियादी विशेषताएं पहला।

1. GitHub पर एक नया रिपॉजिटरी बनाएं. आप इसे GitHub में लॉग इन करके और पर क्लिक करके कर सकते हैं नया.
2. अपने नए भंडार के लिए विवरण दर्ज करें। इसे "netlify-app" जैसा नाम और विवरण दें। रीडमी फ़ाइल, .gitignore फ़ाइल या लाइसेंस के साथ रिपॉजिटरी को इनिशियलाइज़ न करें।
3. अपने कंप्यूटर पर एक टर्मिनल में, उस डायरेक्टरी पर जाएँ जहाँ आपने अपना Angular ऐप स्टोर किया था। अपने फ़ोल्डर को git रिपॉजिटरी के रूप में इनिशियलाइज़ करने के लिए निम्नलिखित कमांड चलाएँ:

   git init
   गिट ऐड।
   git वादा करना -एम "पहले वादा करना"

4. इस फ़ोल्डर के अंदर कोड को आपके द्वारा GitHub पर बनाए गए नए रिमोट रिपॉजिटरी में पुश करें। का पीछा करो गिट रिमोट मूल जोड़ें, गिट शाखा, और गिट पुश आपके रिमोट रिपॉजिटरी पेज पर GitHub द्वारा दिए गए आदेश:

   गिट रिमोट मूल जोड़ें <आपका गिटहब रेपो लिंक>
   गिट शाखा-एम मुख्य
   गिट पुश-यू मूल मुख्य

5. GitHub रिपॉजिटरी पेज को रिफ्रेश करके आप पुष्टि कर सकते हैं कि आपका Angular ऐप कोड अब आपके दूरस्थ GitHub रिपॉजिटरी में है।

अपने कोड को होस्ट करने के लिए Netlify का उपयोग कैसे करें

Netlify का उपयोग करके अपने कोड को होस्ट करने के लिए, आपको इसे अपने GitHub स्रोत कोड तक पहुँच प्रदान करने की आवश्यकता होगी। Netlify तब उपयोग करेगा जिला आपके कोड के निर्मित संस्करण को प्रकाशित करने के लिए आपके कोणीय प्रोजेक्ट का फ़ोल्डर।

आप नई साइट बनाते समय कॉन्फ़िगरेशन चरणों का पालन करके इन सभी सेटिंग्स को कॉन्फ़िगर कर सकते हैं:

1. लॉग इन या साइन अप करें नेटलाइज़ करें. आप अपने GitHub क्रेडेंशियल्स का उपयोग करके ऐसा कर सकते हैं।
2. मुख्य डैशबोर्ड और साइट सूची पृष्ठ से विस्तृत करें नई साइट जोड़ें, और चुनें एक मौजूदा परियोजना आयात करें.
3. चुनना GitHub.
4. पर क्लिक करें GitHub पर Netlify को कॉन्फ़िगर करें.
5. पर क्लिक करें स्थापित करना.
6. Netlify आपके GitHub रिपॉजिटरी की एक सूची प्रदर्शित करेगा। वह चुनें जिसे आप होस्ट करना चाहते हैं। उदाहरण के लिए, यदि आपने अपनी रिपॉजिटरी का नाम "netlify-app" रखा है, तो सूची से "netlify-app" चुनें।
7. कॉन्फ़िगरेशन स्क्रीन में, छोड़ दें मालिक, तैनात करने के लिए शाखा, और आधार निर्देशिका फ़ील्ड उनके डिफ़ॉल्ट मानों पर। यदि आप एक विशिष्ट शाखा प्रकाशित कर रहे थे, जैसे एक अलग "उत्पादन" शाखा, तो आप उसे इसमें जोड़ सकते हैं तैनात करने के लिए शाखा मैदान। को बदलें बिल्ड कमांड फ़ील्ड "एनजी बिल्ड" के लिए। के लिए निर्देशिका प्रकाशित करें फ़ील्ड, प्रकार जिला/. यदि आप नहीं जानते कि प्रोजेक्ट का नाम क्या है, तो आप इसे खोजने के लिए अपने प्रोजेक्ट के डिस्टर्ब फोल्डर में नेविगेट कर सकते हैं। उदाहरण के लिए, "dist/netlify-app"।
8. पर क्लिक करें साइट तैनात करें.
9. परिनियोजन पूरा होने की प्रतीक्षा करें। इसमें कुछ मिनट लग सकते हैं और आपको पेज को रीफ्रेश करने की आवश्यकता हो सकती है। यदि सब ठीक रहा, तो आप परिनियोजन सूची में सफल परिनियोजन देख पाएंगे। अपने प्रकाशित परिनियोजन पर क्लिक करें, उदाहरण के लिए, प्रोडक्शन: main@HEAD.
10. पर क्लिक करें उत्पादन परिनियोजन खोलें बटन।
11. अब आप के प्रारूप में URL का उपयोग करके अपनी वेबसाइट को दूसरे टैब में देख सकते हैं .netlify.app। यदि आप एकाधिक रीडायरेक्ट वाली वेबसाइट होस्ट कर रहे हैं, तो हो सकता है कि आप अन्य पृष्ठों पर रीडायरेक्ट न कर पाएं. इस मामले में एक तरीका है Netlify पर असफल पुनर्निर्देशन को ठीक करें. आप चाहें तो आप भी कर सकते हैं अपने मुफ़्त डोमेन नाम को संशोधित करें.

GitHub और Netlify का उपयोग करके अपनी वेबसाइट को होस्ट करना

उम्मीद है, अब आप GitHub और Netlify का उपयोग करके किसी वेबसाइट को सफलतापूर्वक होस्ट कर सकते हैं। आप GitHub रिपॉजिटरी की कुछ शाखाओं में स्वचालित परिनियोजन सेट कर सकते हैं। इस तरह, आप अपनी वेबसाइट के परिनियोजन को स्वचालित और सुव्यवस्थित कर सकते हैं।

लेकिन Netlify एकमात्र तरीका नहीं है जिससे आप किसी Angular ऐप को ऑनलाइन परिनियोजित कर सकते हैं। आप गिटहब पेज जैसे अन्य प्लेटफॉर्म का भी उपयोग कर सकते हैं।