Up next in 10
Introduction to Sanity.io _ Portfolio Website + Blog Using Sanity.io #1
15 views
Feb 21, 2024
The video titled "Introduction to Sanity.io _ Portfolio Website + Blog Using Sanity.io #1" is the first installment in a tutorial series aimed at web developers interested in building a portfolio website with integrated blogging functionality using Sanity.io. Sanity.io is a headless CMS (Content Management System) that provides developers with a flexible and customizable platform for managing content. In this introductory video, viewers are introduced to Sanity.io and its features. The video likely covers topics such as: 1. Overview of Sanity.io and its benefits for building dynamic websites. 2. Setting up a new project in Sanity.io and configuring the content schema. 3. Explaining the concepts of schemas, documents, and datasets within Sanity.io. 4. Integration of Sanity.io with frontend frameworks like React or Vue.js. 5. Previewing the basic structure of the portfolio website and blog that will be built throughout the tutorial series. Overall, this video serves as a starting point for developers interested in learning how to leverage Sanity.io to create dynamic and content-rich websites, setting the stage for the subsequent tutorials in the series.
View Video Transcript
0:00
एक personal portfolio website और एक blog मेरे हिसाब से सारे developers के पास होना चाहि��
0:04
इसलिए आज की इस video series से हम लोग start करने पाले हैं sanity.io के थूँ किस तरह से blog build करना है और किस तरह स��
0:11
blog के विदेर एक portfolio website हम लोग build करेंगे ताकि overall एक website में हमारे पास एक blog होग��
0:17
और हमारे पास अपना personal portfolio भी होगा अब आप में से के लोग कहेंगे यार कि Sanity.io क्या ह��
0:21
हम इसको इस्तेमाल क्यों कर रहे हैं यह सब आप लोगों को मालूम चलेगा क्योंकि Sanity.io एक बहुती अच्छ��
0:27
structured content का platform है इसलिए हम लोग इसको इस्तेमाल करेंगे structured content क्या होता ह��
0:32
क्यों हम लोग sanity IO इस्तेमाल करें कुल मिला के आप लोग का सारा का सारा content
0:36
एक जगा पर रहता है and also we can use power of javascript
0:40
power of next.js और कोई सा भी frontend हम लोग इस्तेमाल करना चाहते हैं वो हम लो��
0:44
इस्तेमाल कर सकते हैं मैं इस series में इस्तेमाल करने वाला हूं नेक्स जेस का जिसको मैं कनेक्ट करूंगा सैनिटी के साथ आप लोग देखन��
0:50
ये सारा का सारा सेटअप मैं आप लोगों के लिए बहुत आसान बनाने वाला हूं इसलिए हम उनको स्टार्ट करेंग��
0:54
step by step, हम लोग सबसे पहले Sanity IO को समझेंगे, यह देखेंगे क��
0:58
यह structured content क्या होता है, क्यों Sanity को हम लोग इस्तेमाल करें
1:02
इसके बाद हम आगे चलते हुए अपनी पहली Sanity app बनाएंगे, किस तरह से GitHub के दू��
1:07
sign up करना है Sanity पर, फिर उसके बाद हम लोग ये देखेंगे कि sanity data का पर store करता ह��
1:12
हमारा sanity studio क्या होता है and eventually हम लोग nextest application को बना क��
1:16
अपने इस data store से connect करेंगे तो यार मैं तो इस project के लिए बहुत ज़ाधा excited हू��
1:21
अगर आप भी हो तो नीचे comment में लिख दो या जदी से I am excited आप मेंसे कई लोग सोचेंगे कि यार हम लोग ये क्यों नहीं use कर लेत��
1:27
वो क्यों नहीं use कर लेते sanity क्यों use करते है because of powers of sanity
1:31
sanity is amazing modern technology है powerful है सीखना बहुत ज़दा आसान है आप लोग बने रह��
1:37
इस video series में मेरे साथ चलता है computer screen में चीजों को install करेंगे right from
1:41
node.js npm sanity लेट्स टाट बिल्डिंग दिस पोर्टफोलियो वेबसाइट नाओ सो गैस जैसे कि आप लोग देख सकते होग��
1:47
मैं आ चुका हूँ अपनी कंप्यूटर स्क्रीन के अंदर और मैंने एक फोल्डर बना रखा है सैनिटी कोर्स के नाम स��
1:52
इस folder के अंदर मैं आप लोग को बताऊंगा कि किस तरह से हम लोग अपनी sanity app को बनाएंग��
1:57
लेकिन उससे भी पहले समझाना चाहूँगा आप लोगों को यार यह sanity की ज़रूरत क्या ह��
2:01
जब हमारे पास databases हैं जब हमारे पास mongoose है अगर मैं javascript की बात करूँ हमारे पा��
2:06
और भी बहुत सारी चीज़े हैं जिसमें हम content को save कर सकते हैं खुद से चीज़ों को बना सकते है��
2:11
तो sanity की जरूरत कहाँ पर पड़ गई और क्यों इस्तेमाल करना चाहिए तो देखो यार बात simple सी ये ह��
2:16
कि जब हम sanity IO का इस्तेमाल करते हैं तो हम structured content को out of the box use कर सकते हैं
2:22
यानि कि हमको बिल्कुल भी tension लेने की ज़रूरत नहीं है, database बनाने की
2:27
database को maintain करना अपने आपने एक बहुत बड़ी जिम्मिदारी होती है, अगर आप एक instance spin करके देखो
2:33
digital ocean MongoDB Atlas postgres data deployment deployment front application deploy pain as a developer
3:03
इंवायरमेंट वेरीबल्स बनाओ, सैनिटी आयो क्या करता है, कि आपको एक जगा पर पूरा को पूरा content दिता है
3:08
अगर अपने वर्डप्रेस की बात करें, तो वर्डप्रेस फेमस क्यों हुआ था, वर्डप्रेस फेमस इसलिए हुआ था
3:12
लोग जो करने के लिए आए थे वो कर पा रहे थे ये नहीं कि लोगों को deployment में जो है एक एक हफ्ता उलजना पड़ रहा है तो अकुल मिला कर structured content का फाइदा ये है कि आप एक sanity app बनाओगे sanity पर sign up करोगे sanity app बनाओगे अपने content को आप लोग इस्तेमाल करोगे and that's about it यार आप अ��
3:42
आपको किस तरह की क्या क्या चीजें कौन सा मॉडल बनाना है ये सब बहुत बड़ा काम होता है त��
3:47
Sanity IO एक ऐसी चीज़ है कि आप उसके कोड को भी देख सकते हो आप उसमें बहुत ही मैं कहूंग��
3:53
अब माइक्रो लेवल ऑफटिमिजेशन भी कर सकते हो आप देख सकते हो कि किस तरह के कोड से यह सारी की सारी चीजे��
3:59
हो रही है सिंपली जावास्क्रिप्ट आप लोग लिखकर अपने कंटेंट को बहुत हसानी से मैनेज कर सकते हो तो इसलि��
4:05
use करते है sanity io को और यही है structured content basically on the cloud आपका content
4:10
आ जाता है तो description में एक link है sanity के boosted plan का जो की sanity ने हम लोगों क��
4:15
दिया है आप लोग अगर उसमें जाओगे तो आप लोगों को बहुत सारी चीजे out of the box free में मिलेंग��
4:20
की जो नॉमल प्लैन होता है सैनिटी का उससे कई ज्यादा हम लोगों को यहां पर देखने को मिलता ह��
4:24
दोस्तों के पीए रिक्वेस्ट विल लेटिज टीप बीजी बीट बैंडविट तो इसी लिंक का इस्तेमाल करके आप लोग ज��
4:29
यहां पर साइन अप करना यह बहुत ज्यादा इंपोर्टेंट है लेकिन उससे पहले कुछ प्रेरेक्विसिट की बात करेंग��
4:33
और बीच में सेनिटी के बारे में आपको बताता रहूंगा जैसे हम एक यूज केस को हिट करेंगे बताऊंगा यहां प��
4:38
इस तरह की बातें आप लोगों को बताता रहूंगा उससे होगा यह कि आप लोगों को आईडिया लगेगा कि सैनिटी आपक��
4:45
इतना टाइम बचा रहा है ठीक है तो यहां पर एक बहुत ही बेसिक रिक्वारमेंट है नोट जेस और एंट्रीट इंस्टॉ��
4:49
नहीं कि वह तो आप लोगों को पता हुआ अगर मैं नोट जेस टॉट डेव यह एक्सडेंट जो पेज खुला है वह बहु��
4:54
ज्यादा इंपोर्टेंट है नोट जेस टॉट डेव जो है इसके अंदर आपके पास कुछ लर्निंग की रिसोर्स नोट जेस क��
5:01
यह मुद्दा नहीं है इस वीडियो का तो मैं सिंपली नोट जेस स्टॉल लिखूंगा और यहां पर आप लोग नोट जेस को डाउनलोड कर लेन��
5:07
और install कर लेना है इसके बाद ठीक है next next next next install node install computer simply shift right click open partial window here click simply note minus minus version note install npm minus
5:26
minus version लिखकर देखना है कि भाई npm install लेगी नहीं तो आपकी सारे के सारे जो वर्ज��
5:32
से वो लिखकर आ जाएँगे ठीक है बढ़िया बहुत अच्छी बात है इसके बाद आपने simply क्या करना ह��
5:36
टीज एंट्रीम इंस्टॉल माइनस जी सेनिटी स्लाइट इनको एक करके आप लोग रन करना यह आपने रन कर दिया ठीक ह��
5:44
तो सेनिटी का सिलाई इंस्टॉल हो जाएगा ठीक है तो यह पैकेज मैंने स्टॉल कर लिया दूसरा चीज जो आ��
5:50
को करना है वह यह कूपन को आप इस्तेमाल करना ठीक है सैनिटी इन एड माइनस माइनस कूपन कोड विद रिक्ल��
5:56
से क्या हो आपको इन बूस्टेड प्लान मिल जाएगा ठीक है तो यह मेरे पास ऑलरेडी से अकाउंट है आप लोगों को इ��
6:01
नहीं दिखाएगा मुझे दिखा रहा है लुक्स लाइक यू ऑलरेडी है वास्ट एनिटी अकाउंट एक बार इस चीज हमन��
6:05
पेस्ट कर दी तो आपको यह दिखाएगा कि क्रिएट ��
6:18
लिख दिया अब यहां पर एंटर मानने के बाद थोड़ा सा टाइम ले रहा है तो इसको मैं थोड़ा सा टाइम दूंगा तो यहां पर लिखकर आ रहा ह��
6:24
चैनल क्रिएटिंग डाइटा सेट इसके बाद मुझसे बता रहा है प्रोजेक्ट कहां पर बनाना है तो मैं एंट��
6:28
मारूंगा इसको बाद मुझसे कह रहा है यार एक प्रोजेक्ट टेंपलेट जो है वह सेलेक्ट कर लो आइडली हम लो��
6:33
लॉग सेलेक्ट करेंगे लेकिन मैं क्लीन प्रोजेक्ट विद नो प्रीडिफाइंड स्कीमास को सेलेक्ट करूंगा ताकि मैं आपको स्टार्टिंग से बता सकूं कि चीजें किस तरह से करनी है तो यह हमारा जो सेनिटी प्रोजेक्ट है वो बन गया है रिजॉल्विंग डे��
7:03
दोनों को आप sanity के content लेकर, यानि कि जो sanity का content होता है, उससे connect कर सकते हैं, ठीक है
7:08
तो सबसे बड़ी चीज़ यहाँ पर यह होती है, कि structured content आप लोगों को बड़े आराम से मिल जाता है
7:12
यानि कि आपको खुछ से models बनाने की जरूरत नहीं है, आपको खुद से models को define करने की जरूरत नहीं ह��
7:17
और सबसे बड़ी चीज़ यह है कि sanity के पास already CDN है CDN का मतलब content delivery network यानि कि आपका data cached हो जाएग��
7:25
जिससे कि आपकी site की speed बहुत fast हो जाएगी अगर आप यह सारा का सारा काम scratch से करना चाहते है��
7:30
तो scratch से भी कर सकते हैं फिर बात वही आ जाती है कि क्या आप अपने बहुत सारे दिन स्पेंड करके content का structure बनाओगे या फिर अपनी application पर focus करोग��
7:38
sanity के अंदर apis built in है यानि कि आप लोग बड़े अच्छी apis और query करके content को बड़े आराम से pull कर सकते ह��
7:45
sanity UI sanity editing amazing community
8:03
पर बहुत हेल्पुल लोग बैठे हुए हैं और से निगवस फुल टाइम इंप्लॉइज जो कि सिर्फ आपकी क्वेरी को आंस��
8:08
मेरे हिसाब से यार this is amazing ठीक है और सबसे बड़ी चीज़ यह कि यार sanity ने दिया है हम लोगों को एक boosted plan
8:15
तो मेरे हिसाब से nothing can be better than that for us हम लोग अराम से इस boosted plan को इस्तेमाल करके अपनी पोर्टफॉलियो वेबसाइट्स बना सकते है��
8:22
और इससे अच्छी चीज क्या हो सकती है तो इस वीडियो को स्टार्ट करने से पहले डेफिनेटली सेनिटी आयो का तो थेंक यू बोलने ही चाहूँगा यार कि हम सब लोगों को एक बूस्टेड फ्री प्लान दिया और यहाँ पर अब क्या करेंगे जो कोड है हमारा हम लोग ��
8:52
यह एक node.js project है यानि कि आपके पाकेज.json है जिस पर सारी dependencies आपको देखने को मिलती ह��
8:58
आप react को देखकर चौकना मत क्योंकि एक react application ही है इसके बाद हम लोग यहाँ पर आएंग��
9:03
बाकी files को छोड़ो या unlock को छोड़ो tsconfig को भी छोड़ो यह सारी की सारी चीज़े छोड़��
9:22
यहीं पर हम लोग अपने schema को import करेंगे, कौन कौन से types हमे��
9:26
बनाने हैं, वो यहीं पर हम लोग बताएंगे, तो आने वाले videos में यह सब मैं आप लोग को बताने वाला हूँ
9:30
but, just आप लोग को inform करना चाहूँगा, कि जब भी हम लोग अपन��
9:34
content को बनाएंगे हम लोग यहाँ पर एक file बनाएंगे schemas folder के अंदर और फिर उसक��
9:39
finally import करेंगे schema.js के अंदर तो जो भी schemas folder के अंदर हमारे schemas बनेंग��
9:45
जैसे मारलों मैं blog का एक schema बनाओंगा उसको हम import कर पाएंगे schema.js के अंद��
9:50
I hope that you got a quick overview of sanity You have signed up, the link is in the description, you must sign up
9:58
And use the link from the description so that you get a boosted plan
10:01
I will make a playlist of sanity, access it, bookmark it So that you get to see all the content
10:07
That's all for now in this video Thank you so much guys for watching this video
10:11
And I will see you next time कर द��
#Blogging Resources & Services
#Online Journals & Personal Sites
#Social Network Apps & Add-Ons