प्रोग्रामर के लिए वेबसाइट [Node.js पर]। बस। स्टाइलिश। मुफ्त में

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

मेरे पास एक VKontakte खाता है, और यहां तक ​​कि फेसबुक पर भी क्योंकि मेरी साइट सूट नहीं करती है। बहुत अधिक फालतू, थोपा हुआ प्रारूप और अन्य असुविधाएँ।

यदि मैं एक वेब डेवलपर नहीं होता, तो मुझे कैक्टस पर रोना और कुतरना पड़ता। सौभाग्य से, मैं उनमें से एक हूं, इसलिए मैंने अपने लिए एक वेबसाइट बनाने का फैसला किया। इस पर इस तरह के लेख पोस्ट करने के लिए, छोटे शौक परियोजनाएं, और ताकि हैबे पर प्रोफ़ाइल के "साइट" क्षेत्र में इंगित करने के लिए कुछ हो।

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

HTML और JS का कुछ ज्ञान काम आएगा। नोड.जेएस के साथ अनुभव वैकल्पिक है।


मेरा सुझाव है कि आप तुरंत लेख में वर्णित चरणों का पालन करें, और फिर इसे पढ़ने के बाद आपके पास पहले से ही इस तरह की एक तैयार साइट होगी।

तो चलिए शुरू करते हैं।

गितुब में एक भंडार बनाएँ

एक प्रोग्रामर जो पहले एक नई परियोजना शुरू करना चाहता है, वह क्या करता है कुछ संस्करण नियंत्रण प्रणाली में एक भंडार बनाता है। हम गितूब का उपयोग करेंगे क्योंकि:

• यह संस्करण नियंत्रण के लिए सबसे सुविधाजनक और कार्यात्मक सेवा है।
• एक नया प्रोजेक्ट बनाने में केवल कुछ मिनट लगेंगे, भले ही आप अभी तक पंजीकृत न हों।
• यह मुफ़्त है।

यदि आपके पास अभी तक कोई खाता नहीं है, तो GitHub पर पंजीकरण करें ।

हम सिस्टम में गिट को कॉन्फ़िगर करते हैं। जीथब के पास प्रत्येक प्रणाली के लिए एक अच्छा मैनुअल है: https://help.github.com/articles/set-up-git ।

हम साइट ( http://github.com/daeq/programmer-site ) के साथ बनाए गए भंडार में जाते हैं और ऊपरी बाएँ कोने में "कांटा" बटन पर क्लिक करते हैं।



कोड की आपकी प्रति http://github.com/<your नाम> / प्रोग्रामर-साइट पर उपलब्ध हो गई है। यदि आप नाम पसंद नहीं करते हैं, तो आप इसे "व्यवस्थापक" अनुभाग में नाम बदल सकते हैं।

अब हमारे पास एक भंडार है, और यह पहले से ही एक भविष्य की साइट का एक प्रोटोटाइप है। चलिए आगे बढ़ते हैं।

Heroku पर एक एप्लिकेशन बनाएं

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

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

Heroku.com पर रजिस्टर करें , यदि पहले से नहीं।

पंजीकरण के बाद, आप इस तरह एक संकेत देखेंगे:


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

हरोकू पर साइट भरें

एक होस्टिंग सेवा है - यह उस पर एक वेबसाइट डालने का समय है।

कंसोल खोलें, उस डिस्क पर डायरेक्टरी पर जाएं जहां आपके पास कोड होगा, और कंसोल में टाइप करें:

  git clone git@github.com: <अपने github लॉगिन> / प्रोग्रामर-साइट
 सीडी प्रोग्रामर-साइट
 heroku apps: बनाएं <अपना ऐप नाम> 

सभी हेरोकू अनुप्रयोगों में नाम अद्वितीय होना चाहिए। आप, उदाहरण के लिए, अपने भविष्य की साइट का उपयोग कर सकते हैं।

जवाब में, आप कुछ इस तरह देखेंगे:

  अपने हरोकू क्रेडेंशियल दर्ज करें।
 ईमेल: bratchenko@gmail.com
 पासवर्ड (टाइपिंग छिपी होगी): 
 प्रमाणीकरण सफल।
 प्रोग्रामर-साइट बनाना ... किया, ढेर देवदार है
 http://programmer-site.herokuapp.com/ |  git@heroku.com: प्रोग्रामर-साईट.जीट
 Git Remote heroku को जोड़ा गया 

हरोकू एक साइट को बस अपने गिट रिपॉजिटरी में धकेल कर बाहर बिछाने का समर्थन करता है। हम कंसोल में टाइप करते हैं:

  git धक्का heroku मास्टर 

यदि कोई त्रुटि नहीं हुई, तो आपने सब कुछ ठीक किया और आपकी साइट <आपके आवेदन नाम> .herokuapp.com (उदाहरण के लिए, http://programmer-site.herokuapp.com/ ) पर उपलब्ध है।

अपना डोमेन सेट करें

यह संभावना नहीं है कि herokuapp.com पर पता आपकी व्यक्तिगत साइट के लिए उपयुक्त है। हम अपने स्वयं के डोमेन को बांधेंगे।

यदि आपके पास अभी तक अपना डोमेन नहीं है, तो आप इसे मुफ्त में पंजीकृत कर सकते हैं, उदाहरण के लिए, .tk ज़ोन।

Http://dot.tk पर जाएं

अपने भविष्य के डोमेन का नाम दर्ज करें



आईपी ​​इनपुट क्षेत्र में, हरको द्वारा प्रदान किए गए आईपी ​​में से एक को निर्दिष्ट करें। उदाहरण के लिए, 75.101.145.87 ।



हो गया



हम हरोकू पर एप्लिकेशन सेटिंग्स में जाते हैं , बनाए गए एप्लिकेशन, "सेटिंग" अनुभाग पर जाएं, "डोमेन" फ़ील्ड में अपना भविष्य का डोमेन दर्ज करें, "ऐड" पर क्लिक करें। हो गया।



आपकी साइट आधे घंटे के भीतर पंजीकृत डोमेन पर उपलब्ध होनी चाहिए।

हम साइट का रूप बनाते हैं

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

साइट के दृश्य के लिए, मैं ट्विटर बूटस्ट्रैप का उपयोग करने की सलाह देता हूं क्योंकि:

• यह एक बहुत ही सरल, स्टाइलिश दिखने वाला फ्रंट-एंड फ्रेमवर्क है।
• क्षमताओं में अपनी तरह का सबसे अच्छा: तत्वों की संख्या, मानक और अतिरिक्त विगेट्स के संदर्भ में।
• बहुत सारे लोग इसका उपयोग करते हैं और इसे विकसित करते हैं। यदि आपको किसी प्रकार के संशोधन या गैर-मानक तत्व की आवश्यकता है, तो सबसे अधिक संभावना किसी ने पहले ही की है।

यदि आप साइट के प्रत्येक मामूली शोधन के साथ डिजाइनर से संपर्क नहीं करना चाहते हैं - ट्विटर बूटस्ट्रैप का उपयोग करें।

डिजाइन को आपके लिए उपयुक्त बनाने के तीन तरीके हैं:

• PSD प्रारूप में ट्विटर बूटस्ट्रैप तत्वों का उपयोग करके डिजाइनर को साइट लेआउट बनाने के लिए कहें, और फिर इसे तैयार तत्वों (या, फिर से, किसी को करने के लिए कहें) से तैयार करें।
• उदाहरण के लिए, यहां तैयार थीम खरीदें: https://wrapbootstrap.com/
• उपलब्ध तत्वों से एक डिजाइन खुद बनाएं।

तीसरे पैराग्राफ के लिए, निम्नलिखित लिंक सहायक हो सकते हैं:

• http://twitter.github.com/bootstrap/ - ट्विटर बूटस्ट्रैप वेबसाइट। इसके साथ रूपरेखा का अध्ययन शुरू करना बेहतर है।
• http://bootswatch.com/ - निःशुल्क ट्विटर बूटस्ट्रैप थीम। यदि आप तत्वों के मानक रूप को पसंद नहीं करते हैं, तो बस सीएसएस फ़ाइल को प्रतिस्थापित करके एक और चुनें।
• http://stylebootstrap.info/ - अपने स्वाद के लिए बूटस्ट्रैप रंग
• http://www.google.com/webfonts - Google से निःशुल्क फोंट का संग्रह। मानक फ़ॉन्ट पसंद नहीं है - दूसरा चुनें
• http://google.com/search?q=Twitter+Bootstrap ट्विटर बूटस्ट्रैप लिंक का एक अच्छा सेट है। निश्चित रूप से आपको कुछ दिलचस्प मिलेगा।

मेरे उदाहरण में, पूरा लेआउट tpl फ़ोल्डर में है, और css, js और अन्य फाइलें सार्वजनिक फ़ोल्डर में हैं।

परिवर्तन सहेजना और पोस्ट करना

आपके द्वारा साइट में आवश्यक परिवर्तन किए जाने के बाद, आपको उन्हें सहेजना चाहिए और नए संस्करण को होस्टिंग पर रखना चाहिए।

कंसोल में साइट की रूट डायरेक्टरी में, करें:

  git प्रतिबद्ध -a -m "परिवर्तनों का विवरण"
 git धक्का heroku मास्टर
 git पुश ओरिजिनल मास्टर

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

यदि यह लेख काफी दिलचस्प निकला (कम से कम एक दर्जन से अधिक जोड़े उठाता है), तो एक अगली कड़ी होगी।

दूसरे भाग में, मैं यह वर्णन करने की योजना बना रहा हूं कि एक ही गिथब पर भंडारण के साथ एक सरल, लेकिन लचीले और कार्यात्मक प्रोग्रामर के ब्लॉग को कैसे जोड़ा जाए, मार्कडाउन, टिप्पणियों, सामाजिक नेटवर्क पर साझा करने और महत्वपूर्ण विशेषताओं के एक जोड़े का उपयोग करके :)

टिप्पणियों में लिखें कि आप अपनी साइट पर क्या विशेषताएं देखना चाहते हैं जो दुर्गम हैं या तैयार इंजन में अच्छी तरह से काम नहीं करते हैं?