Jamstack: Build faster, more efficient websites today

Sep 16, 2025
कैसे करना है
JAMstack main
(छवि क्रेडिट: भविष्य / जोसेफ फोर्ड) [1 9]

जामस्टैक सर्वर द्वारा आवश्यक न्यूनतम लोड वाली वेबसाइट बनाने और सेवा करने का एक तरीका है। यह निर्माण प्रक्रिया, जावास्क्रिप्ट, एपीआई और मार्कअप में उपयोग की जाने वाली प्रौद्योगिकियों से इसका नाम प्राप्त करता है। पृष्ठ समय से पहले मार्कअप भाषा में बनाए जाते हैं और उपयोगकर्ता के अनुरोध के रूप में स्थैतिक एचटीएमएल फाइलों के रूप में कार्य करते हैं। एक साइट बनाने और इन तकनीकों को एक साथ लाने के लिए आपको सही उपकरण की आवश्यकता है। सुनिश्चित करें कि आप हमारी जांच करें सर्वश्रेष्ठ कोड संपादक आपके लिए सर्वोत्तम विकास वातावरण का फैसला करने में मदद करने के लिए पोस्ट करें।

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

लेकिन जामस्टैक का उपयोग करना मतलब है कि अधिक कुशल साइटें और गलत होने के लिए कम है। इस ट्यूटोरियल में हम दर्शाते हैं कि अवधारणाओं के परिचय के रूप में सेवा करने के लिए जामस्टैक में ब्लॉग वेबसाइट कैसे स्थापित करें। इस्तेमाल किए गए उपकरण होंगे ह्यूगो एक स्थिर साइट जनरेटर के रूप में, संक्षेप में निर्माण उपकरण के रूप में और Github फ़ाइलों के लिए मुफ्त होस्टिंग के रूप में।

- यह जमीन से जल्दी से चीजों को पाने के लिए कई स्टार्टर किटों में से एक है। यह भी सुनिश्चित करें कि आपके पास है नोड आपके विकास पर्यावरण पर स्थापित। 
https://github.com/netlify-templates/victor-hugo

02. एक वर्किंग डायरेक्टरी बनाएं और ह्यूगो इंस्टॉल करें

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

npm install

03. सर्वर प्रारंभ करें

JAMstack03

(छवि क्रेडिट: जोसेफ फोर्ड) [1 9]

एक बार निर्भरता समाप्त हो जाने के बाद, एनपीएम शुरू करें। विकास सर्वर अब विक्टर ह्यूगो की स्थानीय प्रति चला रहा है, जो स्थानीयहोस्ट में डिफ़ॉल्ट रूप से सुलभ है: 3000 - उस लिंक को खोलना जो सब कुछ सफल होने पर स्वागत स्क्रीन दिखाना चाहिए। एक बार परीक्षण किया, दबाएँ सीटीआरएल + सी सर्वर को रोकने के लिए।

04. एक पृष्ठ और एक पोस्ट जोड़ें

JAMstack04

(छवि क्रेडिट: जोसेफ फोर्ड) [1 9]

साइट फ़ोल्डर में निर्देशिका बदलें, फिर, का उपयोग करके ह्यूगो नया कमांड, एक जोड़ें पृष्ठ- one.md और ए पोस्ट- one.md । विंडोज़ में काम करने वाले डेवलपर को hugo.exe फ़ाइल डाउनलोड करने की आवश्यकता होगी और इसे काम करने के लिए एक रास्ता जोड़ने की आवश्यकता होगी, लेकिन दस्तावेज का पालन करने में आसान है ह्यूगो वेबसाइट। 

 ह्यूगो न्यू पेज- one.md
ह्यूगो न्यू पोस्ट / पोस्ट- one.md

05. पृष्ठ और पोस्ट में सामग्री जोड़ें

परीक्षण उद्देश्यों के लिए, कुछ सामग्री को नई पोस्ट और पेज में जोड़ा जाना चाहिए (मीडिया-भारी सामग्री मिल गई है? इसे सर्वश्रेष्ठ के साथ वापस घन संग्रहण )। फ़ाइल ब्राउज़र में प्रोजेक्ट के लिए निर्देशिका खोलें और jamstack / साइट / सामग्री पर नेविगेट करें। इस फ़ोल्डर के भीतर फ़ाइल पृष्ठ- one.md अब मौजूद होना चाहिए। नामित एक फ़ोल्डर भी है पद जिसमें शामिल है post-one.md। इन दोनों फ़ाइलों को खोलें और नीचे दिए गए मार्कडाउन में कुछ सामग्री जोड़ें --- (या कुछ मामलों में +++) 

 # लोरेम इप्सम डोलर बैठे अमेट
## Consectatur adipiscing * elit *
Sed Do Eiusmod Tempor Incididunt UT Labore
et dolore Magna Aliqua।

06. विषय को उप मॉड्यूल के रूप में जोड़ें

JAMstack06

(छवि क्रेडिट: जोसेफ फोर्ड) [1 9]

पिछली फ़ाइलों में दर्ज किया गया पाठ किसी विषय के बिना नहीं देखा जा सकता है। उदाहरण के तौर पर, अनन्के थीम का उपयोग किया जाएगा। वर्तमान की सामग्री हटाएं साइट / लेआउट फ़ोल्डर, इसे खाली छोड़कर। साइट फ़ोल्डर में एक नई निर्देशिका बनाएं विषयों , फिर इसमें बदलें और विषय को एक गिट सबमोड्यूल के रूप में आयात करने के लिए निम्न कोड चलाएं। नोट: सामान्य क्लोनिंग NetLify के साथ संगत नहीं है। 

 mkdir थीम्स
सीडी थीम्स
git सबमोड्यूल जोड़ें https: // github
कॉम / & lt; थीमक्रेटर और जीटी; / & lt; themename & gt;
https://github.com/budparr/gohugo-theme
ananke.git थीम्स / Ananke

07. थीम को कॉन्फ़िगर करें और सर्वर चलाएं

की सामग्री की प्रतिलिपि बनाएँ साइट / थीम / गोहुगो-थीम Ananke / उदाहरण / config.toml साइट फ़ोल्डर में एक पर। पृष्ठ के शीर्ष पर, आधार URL को 'के साथ बदलें / ' और लाइन को हटा दें themesdir = '.. / ..' । कॉन्फ़िगर फ़ाइल को सहेजें, टर्मिनल खोलें और चलाएं एनपीएम शुरू आदेश। आप प्रतिस्थापित करके वेबसाइट का नाम भी बदल सकते हैं (यदि आप चाहें) शीर्षक मूल्य। 

 सीडी साइट
एनपीएम शुरू

08. एक ब्राउज़र में परीक्षण

खुला हुआ http: // localhost: 3000 / पृष्ठ-एक / एक पूरी तरह से स्टाइल पेज के रूप में पृष्ठ के मार्कडाउन को प्रस्तुत करने वाली थीम को देखने के लिए। मुखपृष्ठ खोलना, पहली पोस्ट अब दिखाई देगी। इसका मतलब है कि स्थैतिक साइट जनरेटर अब कार्यात्मक है।

09. मेनू को कॉन्फ़िगर करें

[1 9 4] [1 9 5] [1 9 6]

(छवि क्रेडिट: जोसेफ फोर्ड) [1 9]

वेबसाइट देखते समय, यह ध्यान देने योग्य है कि पहले बनाया गया पृष्ठ नेविगेशन में नहीं दिख रहा है। सामग्री पर लौटकर, ह्यूगो को बताने के लिए फ्रंट मैथ कॉन्फ़िगरेशन में एक पंक्ति जोड़ें जो पृष्ठ को प्रस्तुत करने के लिए मेनू को बताता है। 

 टॉमल
+++
मेनू = "मुख्य"
+++
यामल
---
मेनू: "मुख्य"
---

10. फ़ाइलों को एक github पर पुश करें

इसके बाद, उपयोगकर्ता क्लिक का जवाब देने के लिए सर्कल को एनिमेट करें। अब स्थिर साइट ऊपर और चल रही है, इसे विकास सर्वर पर पहुंचा जा सकता है। पहला कदम कोड को github पर धक्का देना है। GitHub पर एक नया भंडार बनाएं, और उसके बाद या तो कोड को प्रोजेक्ट फ़ोल्डर या GitHub डेस्कटॉप ऐप से पुश करने के लिए कमांड लाइन का उपयोग करें। 

 गिट रिमोट जोड़ें मूल https://github.com/[Githubusername]/jamstacktutorial.git
गिट पुश-यू ओरिजिन मास्टर

11. Netlify से कनेक्ट करें

NetLify सबकुछ एक साथ लाएगा, साइट का निर्माण करेगा और इसे अस्थायी डोमेन पर सेवा देगा। एक खाता बनाकर शुरू करें संक्षेप में और इसे एक GitHub खाते से लिंक करें। एक बार सब कुछ सेट अप हो गिट से नई साइट ।

12. GitHub से कनेक्ट करें

निरंतर तैनाती के लिए, क्लिक करें Github , फिर ट्यूटोरियल में पहले किए गए रेपो का चयन करें। NetLify स्वचालित रूप से परियोजना के लिए सर्वोत्तम निर्माण विकल्पों का पता लगाना चाहिए। इसे पढ़ना चाहिए एनपीएम रन बिल्ड । यदि सब ठीक है, तो तैनाती पर क्लिक करें।

13. साइट बनाएं और NetLify लिंक पर देखें

[23 9] JAMstack13

(छवि क्रेडिट: जोसेफ फोर्ड) [1 9]

एक बार साइट बनाने के बाद, एक संदेश कहेगा तैनात । NetLify ने वेबसाइट को एक अस्थायी डोमेन नाम दिया है जो समझ में नहीं आ सकता है - इसे साइट सेटिंग्स पर क्लिक करके बस बदला जा सकता है। नाम बदलें, फिर जामस्टैक के माध्यम से लोड की गई साइट को देखने के लिए लिंक पर क्लिक करें।

14. तैनाती का परीक्षण करने के लिए एक बदलाव करें

वेबसाइट अब जामस्टैक के माध्यम से लोड हो जाती है। यह बिजली तेजी से है, और यह स्वचालित रूप से अद्यतन करता है जब एक प्रतिबद्धता github के लिए किया जाता है। इसका परीक्षण करने के लिए, स्थानीय विकास पर्यावरण पर लौटें और चलाएं ह्यूगो न्यू पेज- तीन.0 साइट निर्देशिका से। फिर बनाई गई फ़ाइल खोलें, कुछ सामग्री जोड़ें, सहेजें और फ़ाइल को रेपो में प्रतिबद्ध करें पर क्लिक करें। क्षणों के भीतर आप देखेंगे कि नेटलाइट लिंक पर अद्यतन लाइव है।

15. अपनी स्टेटिक साइट पर एक सीएमएस जोड़ें

सादे मार्कअप में काम करना और पृष्ठ बनाने के लिए कमांड लाइन का उपयोग करना अधिकांश ग्राहकों के साथ अच्छी तरह से नहीं बैठेगा। वेबसाइट को अधिक अनुकूल बनाने के लिए, एक सामग्री प्रबंधन प्रणाली स्थापित करें। Fortry.io वर्तमान सेटअप के लिए एक आदर्श फिट है। वेबसाइट पर जाएं और GitHub का उपयोग करके एक खाता बनाएं।

16. वानिकी को कॉन्फ़िगर करें

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

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

[28 9]

[2 9 5] जानें कि जेनेरेटज में बेहतर जावास्क्रिप्ट कैसे बनाएं
(छवि क्रेडिट: भविष्य / रेमी शार्प / फिल हॉकवर्थ / जेरेमी कीथ / नादीह ब्रेमर / टोआ हेफ़ीबा, अनप्लैश) [1 9]

अप्रैल 2020 में जेनरेटज में जावास्क्रिप्ट सुपरस्टार के हमारे लाइनअप के साथ हमसे जुड़ें - सम्मेलन आपको बेहतर जावास्क्रिप्ट बनाने में मदद करता है। अभी बुक करें Generateconf.com

अधिक पढ़ें:

  • 8 एचटीएमएल टैग आपको उपयोग करने की आवश्यकता है (और इससे बचने के लिए 5)
  • 25 सर्वश्रेष्ठ जावास्क्रिप्ट एपीआई
  • दृश्य स्रोत से अपने जावास्क्रिप्ट कोड को कैसे छिपाना
    • [32 9]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Adobe Fresco tutorial: Create a portrait in the painting app

कैसे करना है Sep 16, 2025

(छवि क्रेडिट: फिल गैलोवे) [1 9] इस एडोब फ्रेस्को..

3 essential ZBrush retopology techniques

कैसे करना है Sep 16, 2025

(छवि क्रेडिट: ग्लेन दक्षिणी) [1 9] ज़ब्रश रिटोप�..

ग्रेव सीएमएस के साथ शुरू करें

कैसे करना है Sep 16, 2025

(छवि क्रेडिट: भविष्य) [1 9] ग्रेव एक अंतर प्रबंध..

Scatter trees with V-Ray

कैसे करना है Sep 16, 2025

अपने दृश्य में विवरण जोड़ना हमेशा जाने का तरीका ह..

Create a multi-exposure image with Adobe CC

कैसे करना है Sep 16, 2025

एडोब ने मुझे बहुउंडलवाद की अवधारणा को व्यक्त करने के लिए एक उदाहरण बनाने ..

एडोब कैप्चर सीसी का उपयोग कैसे करें

कैसे करना है Sep 16, 2025

एडोब कैप्चर सीसी एक शानदार ऐप है जो आपको फ़ोटो ले कर फोंट और रंग ढूंढने मे�..

सिनेमा 4 डी में रेडशिफ्ट प्रॉक्सी कैसे बनाएं

कैसे करना है Sep 16, 2025

सिनेमा 4 डी कई चीजों पर बहुत अच्छा है, लेकिन यह..

इलस्ट्रेटर में 3 डी लेटरिंग कैसे बनाएं

कैसे करना है Sep 16, 2025

पिछले हफ्ते एडोब ने अपने उपयोगी बनाने के लिए कुछ और वीडियो जारी किए हैं, इ�..

श्रेणियाँ