Free Web Hosting से मैंने कैसे बनाया अपना Portfolio Website

दोस्तों, मैंने आपको पहले ही बता दिया था कि आज के समय में एक Website सबके लिए ज़रूरी है| पेपर या डाक्यूमेंट्स के द्वारा अब लोगो को अपने बारे में बताना बहुत ही पुराने ख्याल का लगता है| मैंने बहुत से फोटोग्राफर और ग्राफ़िक डिज़ाइनर को देखा है कि जब तक वो अपना सारा डिटेल्स वेबसाइट के द्वारा किसी क्लाइंट को नहीं देते तब तक उनको नया काम नही मिलता| सिर्फ यहीं नहीं अब तो हर जगह इसकी डिमांड हो रही है| इसी को ध्यान में रखकर आज मैं आपके लिए एक ऐसा प्लेटफार्म लेकर आया हूँ जहाँ से आप Free Web Hosting लेकर अपना Portfolio Website या कोई और वेबसाइट बना सकते है|

इस लेख को आगे बढ़ाने से पहले बता दूँ कि मैंने भी अपना एक Portfolio + CV वेबसाइट बनायीं है, जो कि मैंने इसी फ्री वाले होस्टिंग पर रखा है| अगर आपको उसे देखना है तो निचे दिए गए बटन पर क्लिक कर देख सकते है| मैं ऐसा इस लिए कह रहा हूँ कि उसे देखने के बाद आपको ऐसे वेबसाइट का आईडिया  मील जायेगा और आप चाहे तो इससे बेहतर वेबसाइट भी बना सकते है|

Rahul Rao Freelance Portfolio

दोस्तों मैं इस वेबसाइट को प्रमोट नहीं कर रहा ये तो बस आपको दिखाने के लिए एक उदहारण है| अब मैं आपका ज्यादा समय ना लेते हुए सीधे पॉइंट पर आता हूँ कि आप अपना वेबसाइट Free Hosting पर कैसे होस्ट करेंगे| मैं जिस वेबसाइट का इस्तेमाल किया है वो है Firebase, ये गूगल का ही एक प्रोडक्ट है| जिसमे Free Web Hosting के अलावा भी बहुत सारे फीचर दिए गए हैं| आप चाहे तो सभी फीचर को देख सकते है|

Google Firebase क्या है? ये कौन-कौन सी सर्विसेज देता है?

Firebase Free Hosting के फायदे

Google का प्रोडक्ट होने से इसपर पूरा ट्रस्ट किया जा सकता है| ऐसा मैं इस लिए कह रहा हूँ कि ऐसे बहुत से फ्री वेब होस्टिंग प्रोवाइडर है जो कब बंद हो जाये कोई गारंटी नही है| अगर बंद हो गया तो सालो का मेहनत पर पानी फिर जायेगा| आईये अब जानते है कि Firebase Free Hosting मुख्य फायदे कौन-कौन से है-

• गूगल का ट्रस्ट
• Free SSL सर्विस
• फ़ास्ट लोडिंग बिना फालतू समय लिए
• 1 GB का स्टोरेज
• 10 GB/महिना तक डाटा ट्रान्सफर
• कस्टम डोमेन जोड़ने के फायदा
• एक प्रोजेक्ट में कई वेबसाइट को जोड़ सकते है

Firebase Free Hosting कुछ नुकसान

• Firebase पर आप कोई भी वेबसाइट फ्री में सिर्फ उसके सबडोमेन पर ही होस्ट कर सकते है, हालांकि आप उसमे कस्टम डोमेन खरीद कर भी जोड़ सकते है|
• इस पर आप केवल HTML के वेबसाइट ही होस्ट कर सकते है| इसपर php सपोर्ट नही करता क्यूँ कि यहाँ आपको डाटाबेस का फीचर नही मिलेगा|

Firebase पर वेबसाइट कैसे होस्ट करें?

Firebase पर Website Host करना थोड़ा ट्रिकी जरूर है पर उतना कठिन भी नही बस आपको हमारे स्टेप को एकदम ध्यान से follow करना होगा| अगर आप थोड़ा बहुत वेबसाइट बनाना जानते है तो आप इसे आसानी से कर लेंगे| इसके लिए आपको अपने लैपटॉप पर जिन-जिन चीजों को ज़रुरत होगी पहले उसे एक जगह रख ले|

सबसे पहले आप अपना वेबसाइट का html package जो बनाये है उसे अच्छे से देख ले कि वो लोकल पर अच्छे से चल रहा है या नहीं| अगर आप html website अभी तक नही बनाये है तो आप बना ले या नेट से कोई html का theme डाउनलोड कर उससे अपने अनुसार कस्टमाइज कर ले|

आपके लैपटॉप पर Firebase चलाने के लिए आपको node.js सॉफ्टवेयर कि ज़रुरत होगी, आप nodejs.org के वेबसाइट से डाउनलोड कर इंस्टाल कर ले| इंस्टाल होने के बाद इसे खोलने कि ज़रुरत नही है ये सिर्फ command prompt चलता है|

अब आईये उन स्टेप को follow करते है जिसमे वेबसाइट होस्ट करने के सभी सुझाव दिए गए है-

Step #1

सबसे पहले आप अपने ब्राउज़र पर जाये और firebase.google.com वेबसाइट को खोले, इसपर अपने gmail id से अकाउंट बना ले| अकाउंट बनने के बाद Get started बटन पर क्लिक कर आगे बढे|

Step #2 

अब आपको + sign के साथ Add project का आप्शन दिखेगा| ऊपर क्लिक कर एक नया प्रोजेक्ट बनाये, प्रोजेक्ट का नाम आप कुछ भी रख सकते है| एकदम इसी के निचे आपको प्रोजेक्ट Project ID मिलेगा यहाँ आप अपने वेबसाइट का url सेट कर सकते है| अगर आपका पसंदीदा यूआरएल अवेलेबल है तो add कर सेव कर दे| इसके बाद Continue बटन पर क्लिक कर आगे बढे|

Step #3

इस स्टेप में आपसे पूछेगा कि क्या आप गूगल analytics जोड़ना चाहते है, वह पहले से ही enable होगा बस आप Continue बटन पर क्लिक कर आगे बढे|

Step #4

यहाँ आपसे पूछेगा कि आप कौन सा analytics अकाउंट से जोड़ना चाहते है? आप create new account पर क्लिक का नया अकाउंट जोड़ ले फिर Create Project बटन पर क्लिक दे| थोड़ी देर लोडिंग होने के बाद आपका प्रोजेक्ट बन जायेगा| उसके बाद Continue कर दे|

• भारत का सबसे अच्छा वेब होस्टिंग और उनके बेहतर सर्विसेज
• Storage Devices क्या हैं? जाने इसकी पूरी जानकारी

Step #5

ऊपर के सभी प्रोसेस के बाद आपको आपके प्रोजेक्ट का Firebase Dashboard दिखेगा| यहाँ पर आपको तीन आइकॉन देखने को मिलेगा, जिसमे iOS, Android और Web आइकॉन होगा| आपको वेब आइकॉन पर क्लिक करना होगा जैसा निचे इमेज में दिखाई दे रहा है|

Step #6

जैसे ही आप वेब आइकॉन पर क्लिक करेंगे एक नया पेज आएगा जहाँ पर आपको App के कुछ डिटेल्स मांगेगा| मैंने इसके लिए निचे इमेज लगाया है जैसा सेटिंग इमेज में है वैसे ही रखियेगा, App nickname को आप अपने अनुसार बदल सकते है|

डिटेल भरने के बाद Register app बटन पर क्लिक कर आगे बढ़े| इसके बाद आपको एक script मिलेगा| इस script को कॉपी कर ले|

स्टेप आगे बढ़ाने से पहले बता दूँ कि Firebase Hosting के लिए कोई cpanel जैसा फीचर नहीं होता| इसमें कोड को आपके लैपटॉप पर लोकल फोल्डर से अपलोड होता है और वो भी cmd के द्वारा|

Step #7

अब अपने ब्राउज़र को मिनीमायिज कर अपने डेस्कटॉप पर अपने प्रोजेक्ट के नाम से एक फोल्डर बना ले| उस फोल्डर के अंदर एक index.html नाम से फाइल बनाये और Step #6 में मिला script कोड जिसे अपने कॉपी किया हुआ था इस index.html में रखकर सेव कर दे| फाइल के द्वारा ही firebase आपके फोल्डर से कनेक्ट हो पता है|

Step #8

अब आप अपने ब्राउज़र पर जाएँ जहाँ से आपको Step #6 में कोड मिला था| अब वह Next बटन पर क्लिक कर दे| करने के बाद आपको वह कुछ स्टेप होंगे| जैसे- Register app जो अपने Step #6 में ही कर लिया था, Add Firebase SDK ये script सेव करने के लिए है जिसे अपने Step #7 में ही कर दिए थे| इसके बाद आता है Install Firebase CLI अब ये आपको करना है|

Step #9 

Install Firebase CLI के स्टेप में आपको एक छोटा सा कोड मिला होगा, इस कोड कि हेल्प से आप Firebase को अपने लोकल फोल्डर में इंस्टाल कर सकते है ताकि लोकल से ऑनलाइन कम्युनिकेशन बना रहे| इसे इंस्टाल करने के लिए आपको जाना होगा अपने लैपटॉप के command prompt पर पर इसे खोलने के लिए विंडोज यूजर रन कमांड चलाकर cmd टाइप कर रन करा दे इसका विंडोज खुल जायेगा|

cmd पर cd से आप अपने उस फोल्डर पर जाये जो Step #7 डेस्कटॉप पर आपने बनाया था| मैंने अपने डेस्कटॉप पर techactive नाम का फोल्डर बनाया है तो मुझे cmd पर टाइप करना होगा –

cd C:\Users\RR\Desktop\techactive जैसा निचे इमेज में दिखाई दे रहा है| जब आप techactive फोल्डर पर आ जायेंगे तो वहाँ जो firebase के डैशबोर्ड पर जो कोड दिया है उससे टाइप कर एन्टर मार दे|

npm install -g firebase-tools   जैसा निचे इमेज में दिखाई दे रहा है| जैसे ही आप एन्टर करोगे यहाँ firebase install होने लगेगा| थोड़ा देर इन्तेजार कर ले|

Step #10

ब्राउज़र पर जाए अब आपका firebase इंस्टाल हो गया है| वहाँ Next बटन दबा दे| अब आप उसके दुसरे कोड पर आ जायंगे और आपको मिलेगा –

firebase login

सेम यही कोड आप आप cmd पर टाइप कर दे, ध्यान दे जब तक सारा प्रोसेस हो नही जाता आपको कोई भी विंडोज क्लोज नही करना है| जैसे ही आप firebase login टाइप कर एन्टर करेंगे आपसे Allow करने के लिए पूछेगा आप Y दबा कर एन्टर मार दे एक न्यू विंडोज ओपन होगा जहाँ आपको allow access पर क्लिक करना होगा|

अब आपके ब्राउज़र पर firebase लॉग इन और allow मांगेगा आप वहां allow कर दे| अब आपका cmd आपके firebase अकाउंट से लॉग इन हो गया है| आपको लॉग इन सक्सेसफुल का मेसेज भी दिखाई देगा|

Step #11

अब firebase अकाउंट पर तीसरा कोड मिलेगा-

firebase init

इसकी मदद से आप अपने लोकल फोल्डर पर एक पब्लिक फोल्डर बन जायेगा जहा आप अपना कोड रख सकते है| इसे करने के लिए आपको बस firebase init को टाइप कर एन्टर मरना है| जैसे ही आप ये करेंगे आपसे पूछेगा कि Are you ready to proceed? आपको Y टाइप कर एन्टर मरना है|

Step #12

इसके बाद आपसे firebase cmd पर पूछेगा कि आपको हमारा कौन सा फीचर चाहिए| आप arrow कीय निचे दबा कर hosting पर जायें, सेलेक्ट करने के लिए spacebar दबाये और एन्टर मार दे, अब आपका firebase होस्टिंग सेट हो गया है|

Step #13

इस स्टेप में पूछेगा कि आपको नया प्रोजेक्ट बनाना है या जो बनाया है उसी पर करना चाहेंगे? हमने सब कुछ तो पहले ही बना लिया है नया प्रोजेक्ट बनाने कि जरूरत ही नही है| आप arrow कीय से Use an existing project पर सेलेक्ट कर एन्टर कर दे| जैसा निचे इमेज में दिखाई दे रहा है|

इसके बाद आपको अपने जो भी प्रोजेक्ट firebase पर बनाये है दिखने लगेगा| आप वही को सेलेक्ट करे जिस पर आप काम कर रहे है जैसे मैंने techactiveblog को सेलेक्ट किया है| select करने के बाद आप एन्टर कर दे|

अब आपसे पूछेगा कि What do you want to use as your public directory? (public) आपको यहाँ कुछ भी टाइप करने कि ज़रुरत नही है बस आपको एन्टर मरना है|

अब आपसे पूछेगा Configure as a single-page app (rewrite all urls to /index.html)? (y/N) यहाँ Y दबाकर एन्टर कर दे|

अब आप अपने फोल्डर को देखें जो अपने डेस्कटॉप पर बनाया था| उसके अंदर एक और public नाम का फोल्डर बन गया होगा| उसके अन्दर एक index.html नाम कि फाइल होगी आप उसे delete कर दे वो कोई काम का नही है|

Step #14

अब आप अपना जो भी html का फाइल्स है जैसे आपका CV, Portfolio, या फिर कोई सर्विस वेबसाइट टेम्पलेट है| उसके सभी सपोर्टिंग फाइल के साथ कॉपी कर ..Desktop\techactive\public फोल्डर के अंदर रख दे|

अब समय आ गया है आपके फाइल को firebase के सर्वर पर अपलोड करने का इसे करने के लिए आप वापस cmd पर जाये और वहाँ टाइप करे –

firebase deploy

जैसा firebase डैशबोर्ड पर दिया गया है| इस कोड का काम आपके लोकल फाइल को सर्वर पर अपलोड करना होता है| जैसे ही आप cmd पर firebase deploy लिखकर एन्टर करेंगे तो आपका लोकल फाइल अपलोड होने लगेगा| थोड़ी देर अपलोड होने के बाद आपको cmd पर ही एक पब्लिक URL मिलेगा|

जैसा ऊपर इमेज में Hosting URL दिखाई दे रहा है यही है आपको पब्लिक URL जिसे आप किसी के भी साथ शेयर कर सकते है|

आप चाहे तो इस वेबसाइट को SEO के लिए Webmaster tool में भी add कर सकते है| किसी भी दुसरे लिंक और firebase लिंक का SEO में कोई भी फर्क नही पड़ता ये वैसे ही काम करेगा जैसे आप कोई नया वेबसाइट रैंक करा रहे है|

Firebase Hosting का इस्तेमाल कहाँ-कहाँ हो सकता है?

वैसे तो यह फ्री है इसका इस्तेमाल आप कही भी और किसी भी प्रोजेक्ट पर कर सकते है| अगर फिर भी आप जानना चाहते है तो मैं कुछ ऐसे जगह बता देता हूँ, जिसका इस्तेमाल आप अच्छे से कर सकते है|

• CV या Resume के लिए
• Portfolio दिखाने के लिए
• किसी इवेंट के लिए लैंडिंग पेज
• कई सारे लिंक को एक जगह रखकर उस पेज को दिखाने के लिए
• Freelancer के लिए अपना प्रोफाइल, इत्यादी

ये प्लेटफार्म फ्री है तो आप इसे अपने ज़रुरत के अनुसार ही बनाये| आप username के चक्कर में ज्यादा प्रोजेक्ट मत रजिस्टर करियेगा| मैं ऐसा इस लिए कह रहा हूँ कि दुसरो को भी उसके  username मील सके| वैसे भी आप इसपर 10 प्रोजेक्ट से ज्यादा नही बना सकते|

अब तो दोस्तों आप firebase के Free Web Hosting के बारे में समझ ही गए होंगे| मुझे लगता है आप इसे आसानी से कर लेंगे बस आपको ऊपर के सभी स्टेप एकदम ध्यान से पढ़ना और follow करना होगा| अगर आप कोई भी स्टेप छोड़ेंगे तो आपसे गलती हो सकती है| यदि आप मेरे स्टेप हो दो बार भी पढ़ लेंगे तो आप आसानी से कोई भी वेबसाइट होस्ट कर सकते है|

अगर आप इस पोस्ट से कुछ सीखते है तो प्लीज इसी और तक भी पहुँचाने का कष्ट करे| मैं चाहता हूँ कि हमारे देश में इस चीज को सभी लोग जाने और इसका इस्तेमाल करे| तो फिर देर किस बात कि इस पोस्ट को शेयर करे और यदि कोई समस्या आती है तो निचे कमेंट खुला है आप वहां मुझसे पूंछ सकते है|