GitHub पेज के साथ एक रिएक्ट ऐप को मुफ्त में कैसे तैनात करें

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

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

एक प्रतिक्रिया ऐप बनाएं

प्रदर्शन उद्देश्यों के लिए, आपको करने की आवश्यकता है एक प्रतिक्रिया परियोजना बनाएँ रूटिंग के साथ जिसे आप बाद में परिनियोजित करेंगे। हालाँकि, यदि आपके पास मौजूदा प्रतिक्रिया परियोजना, इस चरण को छोड़ने के लिए स्वतंत्र महसूस करें।

टर्मिनल में, चलाएँ क्रिएट-रिएक्शन-ऐप एक प्रतिक्रिया परियोजना को जल्दी से मचान करने के लिए आदेश:

एनपीएक्स क्रिएट-रिएक्शन-ऐप रिएक्ट-घ

बनाए गए फ़ोल्डर में नेविगेट करें और अपना आवेदन शुरू करें।

एनपीएम रन स्टार्ट

इसके बाद, अपने पसंदीदा के साथ प्रोजेक्ट फ़ोल्डर खोलें

कोड संपादक. में एसआरसी फ़ोल्डर, छोड़कर सब कुछ हटा दें ऐप.जेएस और index.js. App.js में सामग्री को निम्नलिखित के साथ बदलें:

फ़ंक्शन ऐप () {
 वापसी (


जीथब पेज

गीथूब पर प्रतिक्रिया तैनात करना




 );
}
निर्यात डिफ़ॉल्ट ऐप;

रूटिंग जोड़ें

अपने एप्लिकेशन में रूटिंग जोड़ने के लिए, पहले, इंस्टॉल करें प्रतिक्रिया-राउटर-डोम:

npm प्रतिक्रिया-राउटर-डोम स्थापित करें

App.js में, पेज के बारे में लिंक जोड़ें:

"रिएक्ट-राउटर-डोम" से आयात {लिंक};
फ़ंक्शन ऐप () {
 वापसी (


लगभग
जीथब पेज

गीथूब पर प्रतिक्रिया तैनात करना




 );
}
निर्यात डिफ़ॉल्ट ऐप;

चूंकि App.js आपके होम पेज के रूप में कार्य करेगा, आपको केवल इसे बनाने की आवश्यकता है लगभग अवयव:

कॉन्स्ट के बारे में = () => {
 वापसी ( 


घर
पेज के बारे में




 );
}
निर्यात डिफ़ॉल्ट के बारे में;

अब, आपको मार्ग बनाने और एक रिएक्ट राउटर को कॉन्फ़िगर करने की आवश्यकता है।

URL को संबंधित घटकों से मिलाने के लिए index.js को संशोधित करें:

"प्रतिक्रिया" से आयात प्रतिक्रिया;
"रिएक्ट-डोम" से रिएक्टडॉम आयात करें;
"./App" से ऐप आयात करें;
"रिएक्शन-राउटर-डोम" से आयात {हैशरूटर, रूट, रूट};
आयात के बारे में "./अबाउट" से;
ReactDOM.render(



} />
}/>


,
 document.getElementById ("रूट")
);

ध्यान दें कि आपने कैसे उपयोग किया हैश राउटर के बजाय ब्राउज़र राउटर. का उपयोग करते हुए ब्राउज़र राउटर 404 त्रुटि उठाएगा। ऐसा इसलिए है क्योंकि गिटहब पृष्ठों में रूटिंग अलग तरह से काम करती है। हैशरूटर त्रुटि उत्पन्न नहीं करता है क्योंकि यह URL के साथ UI को समन्वयित करने के लिए URL के हैश भाग का उपयोग करता है।

अंतिम चरण Git में सभी नए परिवर्तन कर रहा है:

गिट जोड़ें।
गिट प्रतिबद्ध-एम "रिएक्ट ऐप बनाएं"

गिटहब रिपोजिटरी बनाएं

तब से गिटहब पेज रिपॉजिटरी को वेबसाइट में कनवर्ट करके आपके एप्लिकेशन को होस्ट करेगा, आपको एक गिटहब रिपोजिटरी बनाने की जरूरत है। अपने गिटहब खाते में जाएं और अपनी परियोजना के समान नाम के साथ एक नया भंडार बनाएं।

इसके बाद, GitHub रिपॉजिटरी को अपने स्थानीय रिपॉजिटरी में रिमोट के रूप में जोड़ें:

गिट रिमोट मूल जोड़ें /.गिट

अंत में, स्थानीय रिपॉजिटरी को GitHub पर धकेलें:

गिट शाखा-एम मुख्य
गिट पुश --सेट-अपस्ट्रीम मूल मुख्य

रिएक्ट ऐप को गिटहब पेज पर तैनात करें

GitHub पेज का उपयोग करने के लिए, आपको इसे पहले इंस्टॉल करना होगा:

एनपीएम जीएच-पेज स्थापित करें

gh-पृष्ठ आपको बनाने की अनुमति देगा gh-पृष्ठ शाखा जहां आप अपना कोड परिनियोजित करेंगे।

अगला, अपने पर जाएं पैकेज.जेसन फ़ाइल करें और होमपेज जोड़ें जो ऐप का होम यूआरएल होगा:

"होमपेज": "https://.github.io//",
"स्क्रिप्ट": {
 "प्रीडिप्लॉय": "एनपीएम रन बिल्ड",
 "तैनाती": "घ-पृष्ठ-डी बिल्ड", 
 "प्रारंभ": "प्रतिक्रिया-स्क्रिप्ट प्रारंभ",
 "बिल्ड": "रिएक्शन-स्क्रिप्ट्स बिल्ड",
 "परीक्षण": "प्रतिक्रिया-स्क्रिप्ट परीक्षण",
 "इजेक्ट": "रिएक्शन-स्क्रिप्ट्स इजेक्ट"
 }

परिनियोजन प्रक्रिया को पूरा करने के लिए निम्न आदेश चलाएँ:

npm रन परिनियोजन

आपका आवेदन अब गिटहब पर तैनात है और आप इसे यहां देख सकते हैं https://.github.io/.

GitHub पेज के साथ और अधिक करें

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

GitHub पेज का उपयोग करके मुफ्त में वेबसाइट कैसे होस्ट करें

आगे पढ़िए

लेखक के बारे में