Up next in 10
Creating a Blog Page _ Portfolio Website + Blog Using Sanity.io #8
40 views
Feb 21, 2024
In "Creating a Blog Page _ Portfolio Website + Blog Using Sanity.io #8," viewers are guided through the process of establishing a dedicated blog page within a portfolio website using Sanity.io. The tutorial covers step-by-step instructions for setting up the blog page structure, configuring routes, and integrating Sanity.io's content management system to populate the page with dynamic blog posts. Viewers can expect to learn how to design and customize the layout of the blog page, implement features such as post previews or categories, and optimize the page for search engine visibility. By following along, viewers can enhance their understanding of building a robust and user-friendly blog section within their portfolio website, leveraging the capabilities of Sanity.io and Next.js.
View Video Transcript
0:00
जो फार हम लोगों ने पेज़ेस बनाया उसमें कोई भी एक ऐसा पेज़ नहीं था जहाँ पर सारे के सारे ब्लॉग्स लिस्ट हो जाए�
0:05
यानि कि अगर हम अपनी Next.js प्लस Sanity application में एक ऐसा page देखना चाहते हैं जिसमें सारे blogs हो तो वो अभी हमारे पास बिलकुल भी नहीं ह�
0:13
इस वीडियो के हंदर हम लोग एक page बनाने वाले हैं जिसके अंदर हमारे सारे blogs list किये जाएंग�
0:18
चलते हैं computer screen मैं आप लोगों को दिखाऊंगा कि इस तरह का page कैसे बनाया जाता ह�
0:22
let's get started so guys बिछले वीडियो में हम लोगों ने देखा था कि किस तरह से हम लोग जो blog post हैं उनको यहाँ पर दिखाएंग�
0:29
सैनिटी की प्लेलिस्ट को जरूर एक्सेस कर लेना आप लोग और बहुत सारे लोग पता नहीं क्या क्या लिख रहे हैं कमेंट में किया नेक्स्�
0:34
प्लेस क्यों नहीं सिखाया यह क्यों नहीं सिखाया पहले जवास्क्रिप्ट सिखा देते इस प्लेलिस में जवास्क्रिप्�
0:40
में मतलब देखो आप नीचे देखो एक बट मैं था चालेस डिग्री हो रहा है ठीक है मेरा दिमाग सची मोद गर्म हो रह�
0:46
और उसे के साथ साथ आपको बताना चाहूंगा कि एसी एसी भी कह रहा है भाई मैं नहीं खिल ला एसी कह रह�
0:50
मैं हुई नहीं भाई मैं मैं हुई नहीं और लाइट भी नहीं आती कभी-कभी तो मेरे चेहरे पर और पसीना आ जात�
0:55
तो वो भी कमेंट करते हैं कुछ लोग तो बता दूं मैंने सोचा ठीक है चलो सैनिटी की बात करते हैं यहां पर ठीक है तो यहां पर आप लोग देख सकते हो कि हमारी जो टेपिट यह बहुत अच्छी तरह से काम कर रही थी यहां पर हमने सब कुछ कर लिया अभी मुझे यह�
1:25
तो यहां गए तुम अब आउट यह रहा ठीक है उसको इन पर बोट वन करके देखता हूं जस्ट टू बी शूर कि यह वाल�
1:31
बोट हाई वाला ब scholars तो मैं यह चाहता हूं कि इस पर वह भी क्लिक करें अगर तो क्या होना चाहिए य�
1:38
लिंक की तरह काम करें सबसे पहले तो और यहां पर मैं ए लिख देता हूं ठीक है और यहां लिखोंगा एचरफ इज इक्व�
1:45
टू हैश अब आउट ठीक है एचरफ इज इक्वल टू हैश अब आउट ठीक है और मैं यहां पर जो है स्क्रीन कास मोड को भ�
1:56
कर लेता हूं यहां पर है शुबह हो गया ठीक है और यह करने के बाद अगर मैं अब पक्कर करूंगा देखो मै�
2:02
नीचे आ गया लेकिन स्मूथ स्क्रॉल जो है इस बूस्ट करने के लिए एक सिंपल सी चीज होती है ठीक है और वह ची�
2:11
होती है भी मैं आप लोगों को बताता हूं स्मूध स्क्रॉल करने के लिए आपको एक चीज डालनी होती है तो यह ह�
2:16
डाल देंगे अपने लोबल डॉट सीएसस के अंदर ठीक है तो कहा गए तुम लोग डॉट सीएसस लोग डॉट सीएसस के अंदर हम य�
2:24
जाएंगे और जब यह चीज हम डालेंगे तो क्या होगा वह हमारी यहां पर मैं जरा सर्वर भी रिस्टार्ट कर लू�
2:33
है और यहां पर हम लोग अगर अब पर भी क्लिक करेंगे तो यह देखो इधर स्पूज स्क्रॉल होगा ठीक है तो य�
2:40
स्क्रॉलिंग ने अपने ऑन कर ली ठीक है यह बढ़िया चल रहा है बाखी सारों के लिए भी मैं कर दूंगा सर्विसे�
2:46
में हैस्टेक सर्विसेस कर दूंगा और यह सारे काम तो आप लोग कर लेना यार ठीक है मैं अब इन लिए सर ब्लॉग मे�
2:52
रहा हूं ठीक है यह फिर मैं काम करता हूं जल्दी-जल्दी कर लेता हूं सारे उसमें ठीक है वन आप लोगों क�
2:56
करके भी नहीं दिखाया ठीक है तो कर देता हूं ठीक है तो यहां पर मैं सारे स्पैन से पहले यहां पर मै�
3:04
ऐसे कर देता हूं ठीक है तो यहां पर मैं लिख दूंगा स्टेट एस टिक्स ठीक है और यहां पर ब्लॉग और सीम गोस फॉर वर्क ठीक है तो यहां पर मैं ऐसे कर दूंगा और यहां पर मैं लिख दूंगा हैस्टैक वर्क फिर हैस्टैक क्लाइंस कर दूंग�
3:26
ठीक है और इसके बाद पोर्टफोलियों पर भी किया जाए क्या है पोर्टफोलियों पर भी करना पड़ेगा पोर्टफोलियो�
3:43
कितना बोरिंग का में यह तभी मैं गहरा था आप खुद कर लेना चलो कोई नहीं अब कोई रह भी गया ना कर सब्सक्राइ�
3:49
वह कर लेना यार ठीक है बहुत बड़ा काम नहीं और मैं भी कर लूंगा ठीक है आपको कोड जो दिखेगा उसमें होक�
3:54
मिलेंगे सारी चीज है तो यह ब्लॉक पर आप लोग क्लिक करोगे तो सीधे नीचे आ जाएगा ऐसे ठीक है तो काफी बढ़िय�
3:59
बड़ी चीज है तीक है काफी बड़ी चीज मजा आ रहा है ठीक है बायर आपको बताना चाहता हूं कि मैंने कमें�
4:04
मार दिया है साथ वीडियो तक अब अगला कमेंट मारूंगा यह वीडियो चल रहा आठवा उसका ठीक है तो जस्ट बता रह�
4:10
लोग अब मैं चाहता हूं कोई भी यहां पर क्लिक करें रिड मोर पर तो हम लोग इस पेज पर चले जाए लेकिन य�
4:15
पेज अभी तक अपने डिजाइन नहीं किया ठीक है तो यह पेज डिजाइन करेंगे उससे पहले भी मैं क्या करूंगा क�
4:54
नहीं चाहिए और यहां पर इसको save किया और यहां पर नीच�
5:05
copy किया इसको एक अच्छे copy paster बनो दिल से copy paster बनो ठीक ह�
5:14
तो यहां पर यह कर दिया मैंने export async function get server side props ठीक ह�
5:18
बढ़िया जी बढ़िया अच्छे इस function का नाम capital होता है इसको कैपिटल कर देते हैं ठीक है ब्लॉग्स और यहां पर आई ऑल सफ्ट लाइक टू राइट जो लिखा हुआ है इसको शायद मे�
5:29
चेंज करूं पर अभी मैं यहां पर सिर्फ ब्लॉग्स अरे क्रियर क्लाइन्ट नोट डिफाइन यह कैसा मजाक है अच्छा मैंने ऊप�
5:37
इसके जो यह सारी चीजें यह मैंने � phase इंपोर्ट नहीं करी तो यह सारी की सारी चीजें इंपोर्ट करूंगा उसक�
5:45
बटा दूंगा जो चीज नहीं चाहिए जैसे कि यह सारी चीज शायद नहीं चाहिए अब इन पोर्ट रहने देता हू�
5:49
फाइनलाइज करूंगा अपनी एप्लीकेशन को तब अटा दूंगा ठीक है तो ब्लॉक्स नो डिफाइन क्या मैंने ब्लॉक्स क�
5:56
यहां पर लिया नहीं ए बिल्डर इस नॉट डिफाइन ओके हां तो बिल्डर इस नॉट डिफाइन इसलिए आ रहा है क्योंक�
6:04
मैंने यूज एफेक्ट के अंदर मुझे एक्ट्रली क्या करना पड़ेगा यह पूरा का पूरा कॉपी करना पड़ेगा यहां स�
6:11
यहां तक और उसको यहां डालना पड़ेगा और अभी चल जाना चाहिए यार कम और यार हां चल गया लेकिन इसमें ए�
6:18
चीज मुझे दिखाई पड़ रही है कि एक तो इसका जो नवारे वह नहीं आया और दूसरी चीज यह कि यहां पर य�
6:25
नहीं हुआ ठीक है तो इसको सेंटर भी करना पड़ेगा तो मैं काम करता हूं अभी के लिए इसको ना सेंटर कर देत�
6:30
हूं कुछ इस तरह से वैसे रिस्पॉन्सिव तो है यह उससे तो मैं खुश हूं वहां मुझे कोई शिकायत नहीं है लेकि�
6:35
अगर मैं यहां पर आऊंगी बात करो जो कंटेनर हमारा इसकी बात करो तो यह चीजों को सेंटर नहीं कर रह�
6:42
है जो कि बहुत ही चिंता का विषय है तो अगर हम लोग यहां पर मार्जिन ऑटो करें तो बहुत अच्छी तरह स�
6:50
एंटर हो जाएगा ठीक है तो जो मेरा यहां पर कंटेनर है इसमें मैं सिंपली क्या करूंगा एम एक्स ऑटो कर दूंग�
6:58
ठीक है और बस इतना ही करना है एड ऑफिसली यार मैं अपना जो यह चीज है इसको भी लेकर आऊंगा नेव बार को भी अग�
7:09
लें तो अच्छा रहेगा ठीक है तो नेवर को मैं कैसे लाऊं मैं वसी सोच रहा हूं एक्शनली मैं देखना चाहूंग�
7:14
कि मेरी जो पोस्ट वाली टेंपलेट ही कैसी दिख रही है यहां पर नेवर है तो अगर मैं कहीं कुछ ना कुछ करक�
7:20
नेव बार लेकर आ गया ऊपर तो मेरे असाब से काफी बढ़िया रहेगा तो मैं इसके नवार को लाने की कोशिश करत�
7:26
हूं तो यह नवार इसका कहां पर है शायद यह वाले डेव है तो यह वाला जो डिव है बिसीकली हमें क्या करना ह�
7:33
इसी को मैं सबसे पहले यह फॉरमेंट डॉक्यूमेंट करूंगा पता नहीं क्या हो रखा है और यह वाला जो डेव ह�
7:40
यहां से लेकर यहां तक इसको पेस्ट करूंगा फिलाल के लिए ठीक है इन दो को पेस्ट करता हूं और इसको यहां प�
7:46
कराऊंगा ठीक है मैं नया कंपोनेंट बनाना चाहूंगा नेक्स्ट फ्रेंड के अंदर एक फोल्डर बनाऊंगा कंपोनेंट्�
7:51
और इसके अंदर एक फाइल बनाऊंगा नेव पार्ट टॉट जस ठीक है और यहां पर लिखूंगा आरेफ सीधी नेव बार और यहां प�
8:03
इसको पेज कर दूंगा उसी के साथ साथ क्विक फिक्स व्यू फिक्स ऑल ऑटो फिक्सेबल प्रॉब्लम्स करके आता है बट य�
8:12
चीज हटानी पड़ेगी यहां से यह यह हटाना पड़ेगा अभी सब कुछ ठीक हो गया क्लास इस इकल्टू को क्लास नेम इ�
8:20
लोटो से रिप्लेस करना है गुड बढ़िया ठीक है तो यहां पर आप देख सकते हो पोस्ट टॉट एस्टीअमिल ऐसी दिखत�
8:27
है और हमारी जो ब्लॉग टॉट एस्टीअमिल है वह कैसी दिख रही है भी देख लेते रेलोड करके मैंने नवर लगाया नही�
8:33
तो मैं लगाना होगा ब्लॉग में ठीक है तो मैं यहां पर लगा दूंगा नेव बार बेटा लग जाओ जल्दी नेव बार डोट जैस मे�
8:42
भी एरर्स है तो वह फिक्स कर लेते हैं पहले फिर ही कुछ कर पाएंगे तो यहां पर शायद कि दो एक्स्ट्रा लगी हु�
9:14
रिलोड पर इसके बारा लिखकर ने इंपोर्ट नहीं हुआ यह क्या हो गया बाइब्लॉक्स में अच्छ�
9:29
क내 बार कंपनेंट्स नेव पर अब देखता हूं इसको मैंने रिफ्रेश किया यह लेकिन नहीं आया लगता है जो नही�
9:39
यहां पर इसमें मैंने हिड़न लगाया हुआ कहीं पर अब इफेंड नॉट रॉन हां तो यह इधर यहां से अटाना होग�
9:50
है और इसको रिलोड भी कर दिया है लेकिन यह दिखा नहीं अभी तक यह फोन वर्ल नेवबार एक्चुली तो यह भ�
9:59
hidden है तो यार मुझे ना यह नहीं चाहिए था मुझे यह भी नहीं चाहिए था मुझे इसके नीचे वाला चाहिए था य�
10:07
जो एलजी हिडन है मैं मुझे कौन सा वाला चाहिए था यार मैंने नवबार के अंदर गलत चीज डाल दिए शायद तो मै�
10:14
काम करते हैं यारी आपने ढूंढता हूं पहले कि मुझे क्या चीज डालनी चाहिए इन डेक्स्ट से कौन सी चीज कॉपी करनी थी मैंन�
10:20
इस गलत चीज कॉपी कर लिए मैंने यह जिसमें मैंने एचर अफ लगाया था मैं यहां पर लिखता हूं एचर ऐप इज एकॉल ट�
10:29
है यह जहां मैंने लगाया था यह कैसे हो सकता है प्रेचिड एफ इज एक्वल टू सिंगल कोटे कि यह राध मुझे यह वाल�
10:41
चाहिए अच्छी नेव बार में यह वाला डिप चाहिए होगा ना कि वह वाला डिप तो मैं यहां पर आऊंगा और नेव बार क�
10:48
अंदर यह वाला डिप लेकर आऊंगा तो मैं सबसे पहले तो नेव बार को क्लीन करता हूं देखो यह थोड़ा बहु�
10:54
पर करना पड़ता है ठीक है मैं आपको याद करके नहीं मिलता हूं सबसे पहली बात तो और दूसरी बात यह कि यहा�
11:01
पर अगर मैं आपको लेकर जाऊं तो इस तरह से ना कटा दी मेरी किसी मजा के ओके तो एक चीज और करूंगा यहां प�
11:08
थोड़ी बात स्टाइलिंग मुझे खुद करनी पड़े, मैं इसका जो बीजी है उसको ब्लू कर दूँगा, ठीक है, इसके बैकग्राउंड को मैं एकदम डाक ब्लू कर देता हूँ, तो ये मुझे दिख रहा है भी, ठीक है, तो इसके बैकग्राउंड को थोड़ा सा ब्ल�
11:38
वाला कलर ठीक है तो एक काम करता हूं इसका लग मुझे कैसे मिलेगा बताता हूं आपको मैं वालों यहां प�
11:43
लिखता हूं कलर ठीक है वह वालों यहां पर लिखता हूं ब्लू ठीक है अब मैं यह क्लिक करूंगा अगर मैं य�
11:50
चाहता हूं और मैं इस तरह से इसको सेलेक्ट कर सकता हूं आप ल touches अब यह कलर मुझे मिल गया है ठीक ह�
11:54
अमेज़ी कलर को कॉपी करके यहां पर यूज कर सकता हूं ठीक है कहां यूज कर सकता हूं यहां पर यूज कर सकता हू�
12:01
बीजी और मैं यहां पर दे दूंगा कलर ठीक है जो भी कलर मुझे चाहिए बीजी में मैं कुछ इस तरह से टेलविंड स�
12:08
कलर दे सकता हूं ठीक है तो अगर मैं आप लोगों दिखा हूं यहां पर तो यह देखो यह कलर यहां पर आ गया ठीक ह�
12:14
अब मैं एक चीज और कर सकता हूं थोड़ा बहुत शायद मुझे मैनुअल स्टाइलिंग करनी पड़े फोन में देखो ऐसा दिख रहा है भी ठीक है शायद मुझे थोड़ी बहुत मैनुअल स्टाइलिंग करनी पड़े मैं क्या करूंगा एटम जो लिखा हुआ है यहां पर �
12:44
एम वाइट लगा दूंगा ठीक है एम वाइट लगाऊंगा थोड़ी बदली बना रहा है यहां से जो कि थोड़ा बढ़िया लग रह�
12:49
है ठीक है तो चेक आउट ऑल मैं लेटेस्ट पोस्ट यहां पर सारे पोस्ट देखने को हमें मिल जाएंगे ठीक है जैसे क�
12:55
देख सकते हो अच्छा एक चीज और हम जो कर सकते हैं वह यह है कि जो रिड मोर है अगर हम इसके कलर को ब्लै�
13:01
कर दें ठीक है और बॉडर को भी टू पिक्सर सॉलिड ब्लैक कर दें तो यह कलर ब्लैक से आ जाएगा या फिर अग�
13:08
तो पर पर लिए तो कैसा रहें यह कर देने तो कैसा रहें वह भी बुरा नहीं लगेगा ठीक है तो रिडमो अगर ह�
13:15
इस तरह से दे दें और इसका जो बैकरांड है वह भी अगर हम पाइट दे दें तो यह मुझे थोड़ा बेटर डिजाइ�
13:36
चलो यह तीनों काम करते हैं ठीक है किसकी बात हो रही है स्पैन की बात हो रही है ठीक है कहां तुम स्पै�
13:42
स्पैन तो बहुत सारे हैं यहां पर हम उस स्पैन की बात कर रहे हैं जो कि हमारा नवबार नहीं ब्लॉग के अंदर है ठीक ह�
13:51
हम बात कर रहे हैं यहाँ पर जो blocks.map के अंदर span है जिसके अंदर read mode लिखा हुआ ह�
13:58
हम basically क्या करना चाहते हैं इसका text जो है वो हम purple रखना चाहते हैं बहुती light वाला ठीक ह�
14:05
जो इसका border है वो हम रखना चाहते हैं black ठीक है यहाँ फिर purple ही रखेंग�
14:09
थोड़ा dark वाला, ठीक है, purple 700, और उसी के साथ साथ इसका जो bg है, वो भी हम रखेंगे, purple 700, ठीक है, let's see, कि कैसा दिख रहा है, अरे ये तो और भी बढ़िया बन गया यार, ये तो और भी बढ़िया बन गया, देख रहो आप लोग, देख रहो आप लोग तुक्के में क्या �
14:39
नहीं लगाए नहीं कर्सर पॉइंटर यहां भी लगा देता हूं तो यहां पर लगा दें अब आ रहे हैं दोस्तो�
14:49
मजा अब आ रहा है मजा अब आ रहा है मजा ठीक है अब बहुत मजा रहा है एक ब्लॉक और ऐड करके देखते हैं औ�
14:54
देखते हैं क्या रहता है तो इस ब्लॉक का नाम है अब आ रहा है मजा स्लग का नाम जनरेट कर लेंगे कंटें�
15:03
में लिख देंगे मजा आ रहा है डिस्क्रिप्शन में लिख देंगे क्या मजा आ रहा है ठीक है और बागी चीज पब्लि�
15:11
देंगे यार ठीक है ज्यादा हम टेंचन नहीं लेंगे कि रेड ऑफिमेंट वॉस पब्लिश्च अब मैं इसको रिलोड करूंग�
15:17
यहां पर इसको नहीं इसको रिलोड करूंगा तो यहां पर मुझे देखने को मिलना चाहिए एक और ब्लॉक एंड य�
15:23
देखने को मिल रहा है अगर मैं इसी ब्लॉग में इमेज लगा हूं तो वह इमेज मुझे देखने को मिलनी चाहिए जो अ�
15:29
आ रहा है मजा में अगर मैं ब्लॉग इमेज अपलोड कर दूं मान लोग मैं बग अपलोड कर दूं पब्लिश करूं रिलोड करू�
15:36
यहां पर इस चीज को इस चीज को नहीं यार मैं भी कैरी लोड करता हूं क्या यार अब आ रहा है मजा यहां प�
15:44
आ गया देखो यह बग आ गया ठीक है तो काम कर रही है चीज यहां पर आय फॉर कि आप लोग को आनंद आ रहा है अग�
15:50
आनंद आ रहा है तो नीचे कमेंट में लिख दो आनंद आ रहा है मुझे क्या लिखोगे आनंद आ रहा है मुझे यह लिख द�
15:56
जल्दी से नीचे और यार इसको रिस्पॉन्सिव करने की जिम्मेदारी मैं आपको देता हूं यार इसको आप अपने हिसाब स�
16:00
सब्सक्राइब करना ठीक है क्योंकि मैंने जो चीज यहां पर करी हुई अच्छा मैंने वाय में इसको मार्जिन द�
16:06
रखी है मुझे टॉप से मार्जिन नहीं देनी थी यार तो एक चीज में फिक्स करूंगा जाने से पहले कि जो मार्जि�
16:12
दे रखे हैं इसको एमवाइट दे रखे हैं उसको एमबीएट दूंगा मैं सिर्फ बॉटम से चीज मार्जिन टॉप से नही�
16:17
चाहिए और यहां पर जो आई ऑल सो लाइक टू राइट है यह जो इसके नीचे कंटीनर यह ब्लॉक्स वाला जिसके ऊप�
16:26
बार है यहां पर मैं क्या करूंगा m y 12 ताकि यह कंटेक्ट थोड़ा नीचे चला जाए अभी तो बेटर लग रहा है मुझे ठीक है और यहां पर हमारे सारे ब्लॉग पोस्ट आएंगे अगर आपके बहुत सारे ब्लॉग पोस्ट हैं आप इनफानेट स्क्रॉल भी लगा सकत�
16:56
ब्यूटिफुल हो जाएगा, बट मुझे इसके सर्वर साइड एक्सपेक्ट बताने थे, वो मैंने बता दिये, अब हमारा अगला टार्केट होने वाला है
17:01
कि कोई भी इंसान रीड मोर पर क्लिक करे, तो यहाँ पर ब्लॉग आ जाए, अगर आपने sanity का boosted plan अभी तक access नहीं करा ह�
17:07
तो यार देखो कर लो ठीक है और मेरी बात आपको याद आईगी अगर आपने नहीं करी ह�
17:12
कि यार मैं इतना कह रहा था कर लो कर लो फिर जब आप click करोगे link पे और आपको boosted plan नहीं मिलेग�
17:16
तब वहाँ पर आपको बता चलेगा कि यार Boosted plan तो मिला ही नहीं ठीक है त�
17:20
बस मैं चाहता हूँ दिल से कि सबको Boosted plan मिल जाए sanity का और कोई बात नहीं ह�
17:24
Limited time तक है ये कब तक रहें मुझे भी नहीं पता है ठीक है तो आप लो�
17:28
Sanity का Boosted plan यार free access कर सकते हो ठीक है और playlist जरूर access कर लेन�
17:32
अगर समझना चाहते हो step by step चीज़ों को तो अभी के लिए इस वीडियो में इतना है guys
17:36
thank you so much guys for watching this video and I will see you next time