अपने ब्लॉग को अपग्रेड करते समय सीखे गए सबक

एस्ट्रो, टेलविंड, एमडीएक्स, पेजफाइंड, और अधिक!

हाल ही में, मैंने अपने 8+ साल पुराने Gatsby v1 साइट को अपग्रेड करने की यात्रा शुरू की।

इस ब्लॉग पोस्ट में मैं इस प्रक्रिया के दौरान सीखे गए कुछ अनुभव और अन्वेषित रोचक तकनीकों के बारे में साझा करूंगा।

सामग्री सूची

• परियोजना आवश्यकताएँ
• अपनी सही तकनीकी स्टैक का चयन करना
• Astro: शिक्षण वक्र और मुख्य विशेषताएँ
• आधुनिक CSS: ओह!
• खोज: Pagefind
• टिप्पणियाँ: Utterances
• Tailwind: दुःख
• निष्कर्ष

परियोजना आवश्यकताएँ

अपग्रेड करने से पहले, मैंने आवश्यकताओं का एक सेट स्थापित किया:

परियोजना आवश्यकताएँ (जारी)

चूँकि मेरे ब्लॉग पर दैनिक पेज व्यू की संख्या बेहद अस्थायी है, मुझे लगा कि एक स्थिर पूर्व-उत्पन्न साइट मुझे अतिरिक्त जटिलता के बिना वह प्रदर्शन देगी जिसकी मुझे आवश्यकता है।

इसके अलावा, मुझे इस साइट की वर्तमान सामग्री और विशेषताओं को बनाए रखने की आवश्यकता है, जिसमें शामिल हैं:

• कोड हाइलाइटिंग
• टिप्पणियाँ
• साइट खोज
• पहले से मौजूद React कम्पोनेंट: Quiz UI, Gist एम्बेड्स
• संपर्क फॉर्म
• प्रतिक्रियाशील चित्र
• 1 सेकंड से कम लोड टाइम
• ब्राउज़र संगतता: 2018+
• स्वचालित + PR-आधारित डेप्लॉयमेंट्स

अपनी सही तकनीकी स्टैक का चयन करना

वर्षों तक मैंने कई स्थिर साइट उपकरणों के साथ काम किया है, जैसे Jekyll, Hugo, Slate और Gatsby। यहाँ तक कि कई फ्रंट-एंड फ्रेमवर्क: Ember, Knockout, Angular, Vue और बेशक React।

इसलिए, मैंने बिल्कुल भी अधिक विकल्प हासिल कर लिए हैं, जिन्हें अंततः मैंने Remix, Next.js और Astro तक सीमित कर दिया,

मैंने अपनी मूल्यांकन प्रक्रिया पर एक पूरा ब्लॉग श्रृंखला लिख सकता हूँ, लेकि:न यहाँ इसका सारांश दे रहा हूँ:

मैंने एस्ट्रो का चयन किया क्योंकि मैंने जल्दी से महत्वपूर्ण काम करने की क्षमता पाई।

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

यह थोड़ा आश्वस्त करता है कि एस्ट्रो में कोई तारीख बायस या फ्रेमवर्क एजेंडा नहीं है।

एस्ट्रो एकमात्र तकनीक नहीं थी जिसका मैंने उपयोग किया, यहाँ स्टैक का पूरा विवरण है:

• एस्ट्रो: एक आधुनिक स्थिर साइट जनरेटर।
• ShadcnUI: पुनः प्रयोज्य घटकों का संग्रह।
• टेलविंड CSS: यूटिलिटी-फर्स्ट CSS फ्रेमवर्क।
• MDX: मार्कडाउन सामग्री + आंतरिक घटक।
• Pagefind: तेज़, स्थिर और ऑफलाइन साइट सर्च लाइब्रेरी। अल्गोलिया की आवश्यकता नहीं है!
• Utterances: गिटहब इश्यू पर आधारित टिप्पणियों की प्रणाली।
• Netlify: स्वचालित डेप्लॉयमेंट्स, कॉन्टैक्ट फॉर्म विद कैप्चा।

एस्ट्रो: सीखने की बाधा और मुख्य विशेषताएं

एस्ट्रो जल्दी से मेरे अपग्रेड का आधार बिंदु बन गया।

यहां कुछ मुख्य विशेषताएं हैं जिन्हें मैंने विशेष रूप से उपयोगी पाया:

• .astro फ़ाइलें: पहली नजर में, एस्ट्रो घटक रिएक्ट JSX घटकों जैसे लग सकते हैं, हालांकि वे बिल्कुल अलग हैं और अलग लक्ष्यों को पूरा करते हैं। (नीचे तुलना तालिका देखें।)
• अपने स्वयं के Golang बिल्ड टूल्स और Vite द्वारा संचालित: यह बस काम करता है। ESM/CJS, टाइपस्क्रिप्ट, कोड बंडलिंग, स्टाइल, इमेज आदि को बिना किसी अड़चन के संभालता है।
• कोई फ्रेमवर्क पक्षपात या क्लाउड पक्षपात नहीं। (खाँसी नेक्स्ट.जे, ओपननेक्स्ट)
• स्थैतिक बनाम हाइब्रिड रेंडरिंग: एस्ट्रो अधिकांश क्लाउड प्लेटफॉर्मों के लक्ष्य को निर्दिष्ट करने के लिए लचीलापन प्रदान करता है: AWS, GCP, Firebase, Netlify, Vercel, Cloudflare Pages, Azure, Fly.io, और अन्य कई।
• कंटेंट कलेक्शन: getCollection API कंटेंट फ़ाइलों को डेटा स्रोत के रूप में काम करने को सरल बनाता है।
• फ़ाइल-आधारित रूटिंग: एस्ट्रो की फ़ाइल-आधारित रूटिंग प्रणाली, getStaticPaths के संयोजन में, पृष्ठों को उत्पन्न करने में आसानी लाती है।
• एसईओ: एस्ट्रो आपके रास्ते में नहीं आता, और केवल आवश्यकता पर न्यूनतम मात्रा में कचरा बूटस्ट्रैपिंग (astro-island) उत्पन्न करता है।

कुछ चीजें थोड़ा अजीब लगीं, जैसे एस्ट्रो के इंजेक्टेड मार्कअप के आसपास स्टाइलिंग और display:contents का प्रभाव।

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>

.astro की तुलना क्लाइंट कॉम्पोनेंट्स से

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

एस्ट्रो के .astro कॉम्पोनेंट्स को समझने का सबसे अच्छा तरीका उन्हें क्लाइंट-साइड कॉम्पोनेंट्स (रिएक्ट, व्यू, स्वेलेट आदि) के साथ तुलना करना है।

आधुनिक CSS: वाह!

फ्रंटएंड विकास में वापस आकर, मैंने प्राकृतिक CSS में उन्नतियों से खुशी महसूर की:

• CSS चर: कुछ समय से उपलब्ध हैं और 202* से ब्राउज़रों में बहुत स्थिर हैं।
• नेस्टिंग: अंत में विनिर्देश में आया, और पहले की अस्वाभाविक सिंटैक्स के बिना। अब यह Less या SCSS के समान है।
• नए चयनकर्ता: :is(), :where(), और :has() तत्वों को अधिक सटीक रूप से लक्षित करने की अनुमति देते हैं।
• आधुनिक इकाइयाँ जैसे ch, vw, और फ़ंक्शन जैसे clamp() लेआउट और टाइपोग्राफ़ी पर बेहतर नियंत्रण प्रदान करते हैं।
• -inline और -block गुणों का उपयोग करके स्पेसिंग को अधिक प्राकृतिक रूप से सेट करें। क्षैतिज या ऊर्ध्वाधर अक्ष पर पैडिंग या मार्जिन सेट करें। margin: 0 1rem 0 1rem के बजाय margin-inline: 1rem का उपयोग करें।
• उन्नत लेआउट: CSS ग्रिड को फिर से सीख रहा हूँ। वाह, इसमें बहुत सारे जटिल चीजें हैं। इसका उपयोग करने के लगभग असीमित तरीके हैं, जो भयानक लग सकते हैं। ध्यान रखें, आपको 1 या 2 तरीकों को समझने से बचा जा सकता है। ग्रिड के साथ ट्रिक्स करने में मेरी मदद करने वाले शानदार संसाधनों की जाँच करें: केविन पावेल का वीडियो: Learn CSS Grid the easy way, Responsive w/o media queries, Ten modern layouts in one line of CSS।

खोज: Pagefind

किसी भी तीसरे पक्ष की सेवा या डेटाबेस होस्टिंग के बिना साइट खोज को लागू करना एक मज़ेदार चुनौती लग रहा था। वैसे तो मेरे पास 10,000 पोस्ट इंडेक्स करने के लिए नहीं हैं (अभी तक।)

Astro के समुदाय एकीकरणों की ब्राउज़ करते समय मुझे एक शानदार उपकरण मिला, जिसके बारे में मैंने पहले जल्दी से जानना चाहा होता: Pagefind।

कम उपकरणों में से कोई भी लोकल साइट खोज की समस्या को जितनी अच्छी तरह Pagefind हल करता है, उतना कोई नहीं है।

Pagefind के लागू करने की सरलता एक आनंद है। यह किसी भी स्थैतिक साइट कंटेंट के साथ एकीकृत किया जा सकता है, और आप चुन सकते हैं कि आपको डिफ़ॉल्ट UI चाहिए या आप अगर चाहें तो कुछ भी विशिष्ट बना सकते हैं।

यह सभी चीज़ों को जिन्हें मैं चाहता था, स्वच्छ रूप से हल कर दिया। इसके एकीकरण में केवल कुछ मिनट लगे, और अधिकांश काम <div id="search"></div> टैग जोड़ने और कुछ शैली जोड़ने में लगा!

टिप्पणियाँ: Utterances

दुर्भाग्य से, मुझे Disqus और मेरी बहुत सालों के टिप्पणियों को अलविदा कहना पड़ा।
मुझे अपनी साइट पर तीसरे पक्ष के स्क्रिप्टों पर बेहतर नियंत्रण/दृश्यता चाहिए थी।
इसके अलावा, यह सरल और रखरखाव योग्य होना चाहिए।

इसने मुझे Utterances सेवा का चयन करने के लिए प्रेरित किया। इसकी गिटहब (मुद्दों पर आधारित) टिप्पणियों की प्रणाली मेरे पाठकों के साथ अच्छी तरह से मेल खाती है। इसके अलावा, इसकी स्थापना आसान है और यह निःशुल्क है।

टेलविंड: पछतावा

एकमात्र तकनीक है जिसके उपयोग से मैं अब बढ़ते पछतावे का अनुभव कर रहा हूँ: टेलविंड।

समय के साथ, मैं लिखने की लागत के विपरीत रखरखाव की लागत में अंतर महसूस कर रहा हूँ। टेलविंड लिखने में इतना तेज है, हालाँकि जब यह पर्याप्त जटिल हो जाता है, तो इसे पढ़ना और विस्तारित करना ठीठी हो सकता है।

निष्कर्ष

अपने पुराने गैस्बी v1 साइट को एस्ट्रो के आधार पर एक आधुनिक स्टैक में अपग्रेड करना मेरे लिए एक मजेदार अनुभव रहा। 10/10 के साथ अनुशंसा करूंगा।

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