एक निजी वेबसाइट के रखरखाव के लिए आलसी प्रोग्रामर की मार्गदर्शिका

कई डेवलपर्स के पास या तो एक निजी वेबसाइट है या वे इसे रखना चाहेंगे।

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

वेबसाइट को कोड करना एक बात है, और आप इसे 1-2 दिनों में पूरा कर सकते हैं। लेकिन एक बार जब आपकी वेबसाइट लाइव हो जाती है, तो आपको यह सुनिश्चित करने के लिए इसे बनाए रखने की आवश्यकता होती है कि यह उपलब्ध, अद्यतित और सुरक्षित है।

निम्नलिखित में, इसलिए हम 10 आसान चरणों में न्यूनतम प्रयास के साथ एक व्यक्तिगत वेबसाइट बनाने और बनाए रखने के तरीके पर एक नज़र डालेंगे। क्योंकि, जबकि हम कोडिंग से प्यार करते हैं, हम कंप्यूटर से दूर समय भी पसंद करते हैं। 🌳🤸🍝

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

निम्नलिखित टिप्स और ट्रिक्स एक सुपर सरल, स्थिर वेबसाइट मानते हैं जिसमें केवल एक फ्रंट-एंड भाग होता है। हालाँकि, आप इन अवधारणाओं को बैकएंड, डेटाबेस, या बुनियादी ढांचे के अन्य टुकड़ों सहित अधिक जटिल परियोजनाओं तक आसानी से बढ़ा सकते हैं।

हम उल्लिखित किसी भी तकनीक के विस्तार में नहीं जाएंगे, बल्कि इसे प्रौद्योगिकी-अज्ञेय रखने के लिए एक उच्च-स्तरीय अवलोकन देंगे।

1. एक रिपॉजिटरी सेट अप करें

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

2. जेएस फ्रेमवर्क चुनें

अपनी वेबसाइट बनाने के लिए उपयोग करने के लिए JavaScript फ्रेमवर्क या लाइब्रेरी जैसे React, Vue, या Svelte चुनें। या नहीं, और वेनिला एचटीएमएल और जावास्क्रिप्ट के साथ जाएं यदि ऐसा कुछ है जिसे आप आज़माना चाहते हैं।

कौन सा ढांचा चुनना है, यह चुनते समय सबसे महत्वपूर्ण बात यह है कि यह कुछ ऐसा होना चाहिए जिसके साथ काम करने में आपको आनंद आता हो।

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

मैंने Vue.js में अपना पहला निजी होमपेज बनाया। लगभग एक साल बाद, मैंने इसे रिएक्ट में फिर से बनाया क्योंकि मैं रिएक्ट का अधिक व्यावहारिक अनुभव प्राप्त करना चाहता था और कुछ रिएक्ट लाइब्रेरी को आज़माना चाहता था।

कुछ बॉयलरप्लेट कोड उत्पन्न करने के लिए अपने JS फ्रेमवर्क के बिल्ड टूल्स का उपयोग करें, और लोकलहोस्ट पर परोसा जाने वाला एक सरल हैलो वर्ल्ड-स्टाइल उदाहरण प्राप्त करें।

3. एक UI घटक लाइब्रेरी चुनें

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

ये पुस्तकालय यूआई घटकों के साथ-साथ लेआउट और स्टाइल के लिए उपयोगिताओं के एक सेट के साथ आते हैं और आपको सुपर फास्ट बनाने की अनुमति देते हैं।

एक अच्छी तरह से प्रलेखित घटक लाइब्रेरी का चयन करना सुनिश्चित करें, जो आपको देखने में आकर्षक लगे, जिसमें कई घटक शामिल हों, और जिन्हें आसानी से अनुकूलित किया जा सके। अपनी वेबसाइट पर लाइब्रेरी के स्वरूप को अनुकूलित करने के लिए, फोंट और रंग योजनाओं के साथ खेलना मज़ेदार हो सकता है। 🎨

4. कुछ अत्यंत सरल बनाएँ

उन सूचनाओं के बारे में सोचें जिन्हें आप अपने मुखपृष्ठ पर प्रदर्शित करना चाहते हैं, और फिर बस आगे बढ़ें और अपने UI घटक लाइब्रेरी से घटकों का उपयोग करके कुछ बनाएं। ज्यादा मत सोचो।

मुख्य लक्ष्य अब कुछ जल्दी से जीना है, और जैसा कि वोल्टेयर पहले से ही जानता था, पूर्णता अच्छे की दुश्मन है।

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

लेकिन अगर आप मेरे जैसे कुछ हैं, तो आप अपने आप से पूछ सकते हैं, इस बिंदु पर, अपने मुखपृष्ठ पर क्या रखा जाए और आपको ऐसा क्यों बनाना चाहिए क्योंकि कौन परवाह करेगा?! 😳

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

इसे अत्यंत सरल रखें, और बस अपने बारे में कुछ चीज़ें साझा करें जिन्हें आप आगंतुकों के साथ साझा करने में सहज महसूस करते हैं (जो कि इंटरनेट तक पहुंच रखने वाला कोई भी व्यक्ति हो सकता है - इसे ध्यान में रखें)।

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

5. कुछ मज़ेदार जोड़ें

चरण 4 में, हमने कुछ अत्यंत सरल बनाया है, लेकिन सरल का अर्थ उबाऊ नहीं होना चाहिए। तो चलिए अब इंटरएक्टिव हो जाते हैं। 🚀

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

अगर आपको पता है कि क्या करना है, संभावना है कि पहले से ही एक एनपीएम पैकेज है जो ठीक यही करता है।

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

प्रतिक्रिया-कंफ़ेद्दी ।

और बस इतना ही, आपने अपने लिए एक वेबसाइट बना ली है! 🥳 आगे देखते हैं कि इसे कैसे परिनियोजित करना है और कैसे बनाए रखना है।

6. तैनात करें

अपनी वेबसाइट को पूरी तरह से मुफ्त में इंटरनेट पर कैसे तैनात किया जाए, इसके लिए कई विकल्प हैं, जैसे Netlify, Vercel, या GitHub Pages।

सटीक चरण आपके द्वारा चुने गए प्रदाता पर निर्भर करेंगे, इसलिए जब तक आपकी वेबसाइट किसी URL के तहत लाइव नहीं हो जाती, तब तक गाइड का पालन करें।

मैं Netlify के साथ गया और इसे स्थापित करना अविश्वसनीय रूप से आसान पाया।

एक वैकल्पिक कदम के रूप में, आप एक कस्टम डोमेन नाम खरीदने का निर्णय ले सकते हैं और इसे अपने प्रदाता के DNS से जोड़ सकते हैं ताकि आपको प्राप्त होने वाले मनमाने URL को बदल सकें। आपको ऐसा करने की आवश्यकता नहीं है, लेकिन मुझे एक कस्टम डोमेन नाम अच्छा लगता है, और एक डोमेन खरीदने की लागत 10$/वर्ष से अधिक नहीं होनी चाहिए।

7. सीआई/सीडी सेट अप करें

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

आपका विकास मंच पहले से ही CI / CD टूल के साथ आ सकता है, जैसे कि GitHub Actions या GitLab CI / CD।

मैं गिटहब क्रियाओं का उपयोग कर रहा हूं क्योंकि मेरा भंडार गिटहब पर रहता है।

निरंतर एकीकरण के लिए, आप प्रत्येक पुल अनुरोध और main शाखा में प्रत्येक विलय के लिए कुछ स्वचालित चेक सेट अप कर सकते हैं। इसमें लाइनिंग और फॉर्मेटिंग या यूनिट टेस्ट जैसे चेक शामिल हो सकते हैं।

कई टेम्प्लेट भी उपलब्ध हैं, उदाहरण के लिए, मैं कोडक्यूएल के साथ कमजोरियों का पता लगाने के लिए प्री-बिल्ट गिटहब एक्शन का उपयोग करता हूं।

निरंतर परिनियोजन के लिए, आप अपनी स्वयं की परिनियोजन स्क्रिप्ट सेट कर सकते हैं जो सभी जाँचों के पूर्ण होने के बाद प्रत्येक पुश से main पर चलती है। लेकिन आपके द्वारा चरण 6 में चुने गए होस्टिंग प्रदाता के आधार पर, आपको कुछ भी नहीं करना पड़ सकता है।

Netlify, उदाहरण के लिए, GitHub के साथ अच्छी तरह से एकीकृत करता है ताकि main शाखा स्वचालित रूप से तैनात हो जाए।

8. अपनी निर्भरताओं को अप-टू-डेट रखने के लिए डिपेंडाबॉट का उपयोग करें

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

हम यह सुनिश्चित करना चाहते हैं कि हमारे एप्लिकेशन को सुरक्षित रखने के लिए हमारी निर्भरताएं अद्यतित हैं, लेकिन एनपीएम निर्भरता प्रबंधन दर्दनाक हो सकता है, और हम निश्चित रूप से हर दिन अपडेट की जांच नहीं करना चाहते हैं।

सौभाग्य से, डिपेंडाबॉट नामक एक शानदार छोटा उपकरण है जो हमारे लिए इन सभी का ख्याल रख सकता है। 🤖 डिपेंडाबॉट स्वचालित निर्भरता अपडेट के लिए गिटहब द्वारा बनाया गया एक उपकरण है। अब GitLab का एक संस्करण भी उपलब्ध है।

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

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

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

9. अभिगम्यता संबंधी समस्याओं की जाँच करें

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

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

संभावित सुधारों का पता लगाने के लिए आप Chrome Dev Tools में Lighthouse जैसा टूल चला सकते हैं। लाइटहाउस आपके लिए एक रिपोर्ट तैयार करेगा और पहुंच में सुधार के लिए परिवर्तनों का सुझाव देगा।

इन सुझावों को आमतौर पर लागू करना आसान होता है, जैसे फ़ॉन्ट आकार बढ़ाना, पाठ और पृष्ठभूमि के बीच का अंतर बदलना, या DOM में HTML तत्वों के क्रम को पुनर्व्यवस्थित करना।

लाइटहाउस प्रदर्शन, सर्वोत्तम प्रथाओं और SEO के लिए रिपोर्ट भी तैयार कर सकता है। 🆒

10. अपनी वेबसाइट को पिंग करने के लिए क्रॉन जॉब चलाएं

अपनी वेबसाइट को लाइव करने के बाद, मुझे दिन में कम से कम एक बार यह देखने की इच्छा महसूस हुई कि क्या यह अभी भी है। 🕵️‍♀️

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

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

यदि आपकी परियोजना में एक बैकएंड और डीबी शामिल है, तो आप कुछ बुनियादी धूम्रपान परीक्षण भी सेट कर सकते हैं जो आपके एपीआई पर कुछ GET अनुरोधों को निष्पादित करते हैं।

मेरे मामले में, मैंने अभी एक और GitHub एक्शन सेट किया है जो दिन में एक बार चलता है और मेरे पेज को पिंग करता है। जैसा कि आप अपने होमपेज के लिए फिट देखते हैं और जिस तरह के ट्रैफ़िक की आप अपेक्षा कर रहे हैं, आवृत्ति बढ़ाएँ।

निष्कर्ष

और हम कर चुके हैं! अभी के लिए, कम से कम।

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

मुझे उम्मीद है कि इस गाइड ने आपको एक विचार दिया है कि एक व्यक्तिगत होमपेज बनाना और उसे बनाए रखना कितना आसान हो सकता है। आप शायद 1-2 दिनों में कुछ सरल बना सकते हैं (यदि आप मेरी तरह हैं, तो CSS लेआउट को ठीक करने के लिए दो और दिन जोड़ें 🙄)।

अपनी वेबसाइट परिनियोजित करना और रखरखाव को आसान बनाने के लिए कुछ ऑटोमेशन जोड़ना 2 घंटे के अंदर किया जा सकता है।

आपके द्वारा बनाई जाने वाली सभी अद्भुत वेबसाइटों को देखने के लिए उत्सुक हैं! 🤩