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

Astro, Tailwind, MDX, Pagefind, और बहुत कुछ!

हाल ही में, मैंने अपनी 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 तक सीमित कर दिया,

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

मैंने Astro को चुना क्योंकि मैं कितनी जल्दी अर्थपूर्ण काम कर सकता था।

उनका API डिज़ाइन ताज़ा करने वाला रूप से सरल है। यह लचीलेपन और अच्छे डिज़ाइन मतों का शानदार संतुलन है।

यह थोड़ा आश्वस्त करने वाला था कि Astro में कोई स्पष्ट क्लाउड पूर्वाग्रह या फ्रेमवर्क एजेंडा नहीं है।

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

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

Astro: लर्निंग कर्व और प्रमुख विशेषताएँ

Astro जल्दी ही मेरे अपग्रेड की आधारशिला बन गया।

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

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

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

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

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

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

Astro के .astro कंपोनेंट्स को समझने का सबसे अच्छा तरीका उन्हें क्लाइंट-साइड कंपोनेंट्स के साथ तुलना करना और अंतर देखना है। (React, Vue, Svelte, आदि।)

आधुनिक CSS: वाह

फ्रंटएंड डेवलपमेंट में वापस आते हुए, मैं मूल CSS में हुई प्रगति से प्रसन्न हुआ:

• CSS वेरिएबल्स: कुछ समय से उपलब्ध हैं, और 202* के बाद से ब्राउज़रों में काफी स्थिर हैं।
• नेस्टिंग: अंततः स्पेक में आ गया, और पहले के अजीब सिंटैक्स के बिना। अब यह Less या SCSS के समान है।
• नए सेलेक्टर्स: :is(), :where(), और :has() तत्वों के अधिक सटीक टारगेटिंग की पेशकश करते हैं।
• आधुनिक इकाइयाँ जैसे ch, vw, और clamp() जैसे फ़ंक्शन लेआउट और टाइपोग्राफ़ी पर बेहतर नियंत्रण प्रदान करते हैं।
• -inline और -block विशेषताओं के साथ स्पेसिंग को अधिक स्वाभाविक रूप से सेट करें। पैडिंग या मार्जिन को क्षैतिज या ऊर्ध्वाधर अक्ष पर सेट करें। margin: 0 1rem 0 1rem के बजाय → margin-inline: 1rem।
• उन्नत लेआउट: CSS ग्रिड को दोबारा सीखना। वाह, वहाँ बहुत कुछ है। यह अभिभूत करने वाला हो सकता है क्योंकि इसका उपयोग करने के seemingly अनंत तरीके प्रतीत होते हैं। ध्यान रखें, आप 1 या 2 तरीके सीखकर काम चला सकते हैं। इन शानदार संसाधनों ने मुझे ग्रिड के साथ ट्रिक्स करने में मदद की: Kevin Powell का वीडियो: Learn CSS Grid the easy way, मीडिया क्वेरी के बिना रेस्पॉन्सिव, CSS की एक लाइन में दस आधुनिक लेआउट।

खोज: Pagefind

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

Astro के कम्युनिटी इंटीग्रेशन को ब्राउज़ करते समय मैं एक शानदार टूल पर ठोकर खाया जिसके बारे में मैंने काश पहले जाना होता: Pagefind।

कुछ टूल किसी समस्या को उतनी अच्छी तरह हल करते हैं जितना Pagefind स्थानीय साइट खोज को हल करता है।

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

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

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

दुर्भाग्यवश, मुझे Disqus और वर्षों में जमा हुई अपनी टिप्पणियों को अलविदा कहना पड़ा।

मैं अपनी साइट पर तृतीय-पक्ष स्क्रिप्ट्स पर बेहतर नियंत्रण/दृश्यता चाहता था।

इसके अलावा, यह सरल और रखरखाव योग्य होना चाहिए।

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

Tailwind: पछतावे

केवल एक तकनीक है जिसका उपयोग करते हुए मुझे बढ़ता पछतावा हो रहा है: Tailwind।

समय के साथ, मैं लिखने बनाए रखने की लागत अंतर महसूस कर सकता हूँ। Tailwind लिखने में बहुत तेज़ है, हालाँकि एक बार यह काफी जटिल हो जाता है, इसे पढ़ना और बढ़ाना थकाऊ हो सकता है।

निष्कर्ष

Astro के इर्द-गिर्द बने आधुनिक स्टैक में अपने पुराने Gatsby v1 साइट को अपग्रेड करना एक मज़ेदार अनुभव था। 10/10, ज़रूर अनुशंसा करूँगा।

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