जैकिल के साथ एक ब्लॉग कैसे बनाएं

Sep 11, 2025

कैसे करना है

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

टर्मिनल का एक बुनियादी ज्ञान अच्छा है, हालांकि आपको आदेशों के साथ पालन करने में सक्षम होना चाहिए क्योंकि आदेश सभी काफी सरल हैं। GitHub पृष्ठों पर साइटें दृश्यों के पीछे jekyll द्वारा संचालित हैं, इसलिए जब GitHub पृष्ठों के साथ उपयोग किया जाता है, तो यह आपकी वेबसाइट को मुफ्त में मेजबानी और प्रबंधित करने का एक तरीका बनाता है (हमारी सूची को सर्वोत्तम रूप से देखें) [2 9] वेब होस्टिंग

अन्य विकल्पों के लिए सेवाएं, या यदि आप एक अलग प्रकार का चाहें तो हमारी सूची देखें [2 9] वेबसाइट निर्माता )।

यह ट्यूटोरियल मानता है कि आप मैक पर हैं; चूंकि जैकिल एक रूबी प्रोग्राम है, इसे विंडोज़ पर चलाने के लिए संभव है लेकिन यह आधिकारिक तौर पर समर्थित नहीं है। यदि आप विंडोज के साथ चल रहे हैं, यहाँ पर हॉप रुबी सेट करने में मदद के लिए।

इस ट्यूटोरियल को पूरा करने के बाद, आप एक जैकिल ब्लॉग बनाएंगे और सीखा होगा कि इसकी विशेषताएं और टेम्पलेटिंग भाषा एक व्यक्तिगत ब्लॉग कैसे बना सकती है। यह आपकी अपनी साइट विकसित करने के लिए एक महान प्रारंभिक बिंदु है। और याद रखें, अगर आपके पास बहुत सारे डिज़ाइन विचार या मीडिया फाइलें हैं, तो उन्हें सुरक्षित रूप से सर्वोत्तम रूप से रखना सुनिश्चित करें [2 9] घन संग्रहण

।

इस ट्यूटोरियल के लिए फाइलें खोजें यहां ।

• 10 सर्वश्रेष्ठ स्थैतिक साइट जेनरेटर

01. सेट अप करना

मैक पर आपको डिफ़ॉल्ट रूप से रूबी स्थापित होना चाहिए लेकिन टाइपिंग द्वारा जांच की जाती है [2 9] रूबी-वी

आपके टर्मिनल में।

अब हम वास्तव में साइट पर jekyll चल सकते हैं, सुनिश्चित करें कि आप उस निर्देशिका में हैं जो आप अपनी साइट बनाना चाहते हैं और बस टाइप करें [2 9] जेम इंस्टॉल जेकेल बंडलर

; आपका कंप्यूटर तब साइट चलाने के लिए आवश्यक सभी निर्भरताओं को पकड़ लेगा।

02. स्थानीय या निर्माण परोसें

Jekyll के साथ आप दो मुख्य आदेशों का उपयोग करेंगे - [2 9] सेवा कर

तथा [2 9] बिल्ड । अपनी साइट को स्थानीय रूप से टाइप करने के लिए [2 9] jekyll सेवा आपकी कमांड लाइन में। यह http://127.0.0.1:4000 पर एक संस्करण चलाएगा कि आप अपने परिवर्तनों का पूर्वावलोकन कर सकते हैं। यदि आपके पास पहले से ही आपकी मशीन पर मणि और अन्य निर्भरता स्थापित है, तो निर्भरता संस्करणों में एक विसंगति के कारण यह आदेश विफल हो सकता है; इस मामले में, कोशिश करें [2 9] बंडल exec jekyll सेवा बजाय। वही चल रहा है लेकिन शब्द के साथ [2 9] बिल्ड बस साइट संकलित करता है।

03. स्टार्टर फाइलें प्राप्त करें

इस बिंदु पर इस ट्यूटोरियल के साथ आपूर्ति की गई फ़ाइलों को कॉपी करें ताकि आपको काम करने का आधार दिया जा सके। यह हमें साइट के लिए होमपेज, ब्लॉग सूची, विस्तार पृष्ठ और संपत्ति संरचना देगा। अपने पृष्ठ को http://127.0.0.1:4000 पर रीफ्रेश करें और आप देखेंगे कि अब हमारे पास कुछ बुनियादी पृष्ठ हैं। एक jekyll साइट कैसे काम करता है इसका एक त्वरित अवलोकन है।

एक jekyll साइट एक आसान तरीके से एक आसान तरीके से संरचित है। किसी भी संग्रह (प्रकार के प्रकार) अपने स्वयं के फ़ोल्डर में आयोजित किए जाते हैं, जैसे कि लेआउट और शामिल हैं। आप '_site' फ़ोल्डर देखेंगे - यह वह फ़ोल्डर है जो jekyll का उपयोग करता है जब आप एक चलाते हैं [2 9] jekyll निर्माण

आदेश।

04. कॉन्फ़िगरेशन

अपने टेक्स्ट एडिटर में _config.yml खोलें और अपना खुद का विवरण जोड़ें; जांच करने के लिए एक महत्वपूर्ण क्षेत्र अपना बेस यूआरएल सेट करना है। यह वह फ़ोल्डर है जिसे आपकी साइट लोड हो रही है। कॉन्फ़िगर फ़ाइल आपकी WP-CONFIG फ़ाइल के साथ संयुक्त वैश्विक विकल्पों का उपयोग करने के समान है यदि आप एक WordPress थीम का निर्माण कर रहे थे।

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

05. फ्रंट मैस

फ्रंट पदार्थ एक फ़ाइल के शीर्ष पर यामल का एक स्निपेट है। Jekyll वेरिएबल को पकड़ने के लिए इसका उपयोग करता है। के बारे में .md फ़ाइल में देखें और आप देख सकते हैं कि हम शीर्षक सेट करते हैं, जो उपयोग करने के लिए लेआउट, लेखक और किसी संबंधित छवियों को सेट करते हैं।

06. तरल टैग

जैकिल तरल का उपयोग करता है - एक टेम्पलेटिंग भाषा जो ऑब्जेक्ट्स, टैग और फ़िल्टर का उपयोग करती है। हम उपयोग करते हैं [2 9] वस्तु

टैग डबल ब्रेसिज़ से घिरा हुआ है [2 9] {{}} स्थान के लिए सामने की वस्तु चर और एक ब्रेस और प्रतिशत संकेत के लिए [2 9] {%%} ।

07. अपनी नेविगेशन बनाएं

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

कॉन्फ़िगर फ़ाइल पहले से ही सेट है, इसलिए अपने 'नेविगेशन.html' में निम्न कोड दर्ज करें फ़ाइल में फ़ाइल शामिल करें:

 {site.data.navigation%} में आइटम के लिए%}
     & lt; एक href = "{{site.baseurl}}} / {{ity.link}}" {% if page.url == item.link%} कक्षा = "वर्तमान" {% ENDIF%} & gt; {{आइटम .name}} & lt; / a & gt;
   {% endfor%} 

हम नेविगेशन कॉन्फ़िगरेशन फ़ाइल में देखने के लिए तरल तर्क टैग का उपयोग कर रहे हैं और प्रत्येक प्रविष्टि के लिए एक लिंक और नाम को लूप करते हैं, मूल रूप से लूप के लिए एक मानक।

08. होम पेज बनाएं

हमारे मुखपृष्ठ पर हम अपने नवीनतम ब्लॉग पोस्ट को नायक के रूप में सूचीबद्ध करने जा रहे हैं और फिर हमारे बारे में एक लिंक के माध्यम से एक लिंक के साथ एक स्निपेट है। चलो हीरो ब्लॉक से शुरू करते हैं। Index.html खोलें और फिर निम्न कोड जोड़ें:

 {% पोस्ट = siree.posts.first%}
& lt; div class = "c-hero" शैली = "पृष्ठभूमि: यूआरएल ({{post.thumbnail_image.glarge | relarive_url}}) नीचे केंद्र / कवर नो-रिपीट;" & gt;
   & lt; h1 वर्ग = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | Markdownify}}
   & lt; a href = "{{post.url}}" कक्षा = "बीटीएन - हीरो" & gt; पूर्ण पोस्ट पढ़ें & lt; / a & gt;
& lt; / div & gt; 

आप देखेंगे कि हम पहले नवीनतम पोस्ट असाइन करते हैं और फिर पोस्ट के फ्रंट पदार्थ में थंबनेल छवि सेट को संदर्भित करते हैं। पोस्ट परिचय एक तरल फ़िल्टर का उपयोग करता है [2 9] चिह्नित करना

मार्कडाउन को HTML में बदलने के लिए।

उस जगह के साथ, चलो एक टीज़र के बारे में भी एक टीज़र जोड़ें। निम्नलिखित जोड़ें:

 & lt; div class = "सी-फीचर" & gt;
   {साइट में पृष्ठ के लिए% .pages%}
       {% if page.url == '/about.html'%}
           & lt; img src = "{{page.profile_image.small}}" alt = "profie piction" वर्ग = "c-fext__image" / & gt;
           & lt; div class = "c-fext__text" & gt;
               & lt; h2 & gt; & lt; a href = "{{page.url}} & gt; {{page.title}} & lt; / & gt; & lt; / a & gt; & lt; / h2 & gt;
               & lt; p & gt; {{page.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% अगर अंत %}
   {% endfor%}
& lt; / div & gt; 

इस बार हम एक का उपयोग कर रहे हैं [2 9] के लिये

साइट में पृष्ठों के माध्यम से जांच करने के लिए लूप। हम प्रयोग कर रहे हैं [2 9] पेज यूआरएल पृष्ठ के बारे में फ़िल्टर करने के लिए और फिर हम पृष्ठों की जानकारी को आउटपुट करने के लिए नायक को समान टेम्पलेटिंग शैली का उपयोग करते हैं।

09. ब्लॉग सूची

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

नायक आपके लिए किया जाता है क्योंकि यह मुखपृष्ठ के समान प्रक्रिया का पालन करता है। 'Blog.html' में नायक के नीचे, निम्न जोड़ें:

& lt; div class = "बाधा" & gt;
   & lt; h1 & gt; बाकी का सबसे अच्छा & lt; / h1 & gt;
   & lt; अनुभाग वर्ग = "कार्ड-सूची" & gt;
           {साइट में पोस्ट के लिए%। ऑफसेट ऑफसेट: 1%}
           & lt; div class = "कार्ड" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div class = "कार्ड-विवरण" & gt;
                   & lt; h3 & gt; {{post.date | दिनांक: "% d% b"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" क्लास = "बीटीएन" & gt; और पढ़ें & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endfor%}
          
   & lt; / खंड & gt;
& lt; / div & gt; 

फिर से हम एक का उपयोग करते हैं [2 9] के लिये

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

10. ब्लॉग विवरण पृष्ठ

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

 & lt; div class = "c-pagination" & gt;
   {% यदि पृष्ठ। previous%}
   & lt; div & gt;
       & lt; h3 & gt; पिछला & lt; / h3 & gt;
       & lt; p & gt; {{page.previous.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{page.previous.url}}" & gt; पोस्ट & lt; / a & gt; & lt; / p & gt;
   & lt; / div & gt;
   {% अगर अंत %}
   {% यदि पृष्ठ। अगला%}
   & lt; div & gt;
       & lt; h3 & gt; अगला & lt; / h3 & gt;
       & lt; p & gt; {{page.next.title}} & lt; / p & gt;
       & lt; p & gt; & lt; एक वर्ग = "btn" href = "{{site.baseurl}} {{page.next.url}}" & gt; पोस्ट & lt; / a & gt; & lt; / p & gt;
   & lt; / div & gt;
   {% अगर अंत %}
& lt; / div & gt; 

हम उपयोग करते हैं [2 9] पृष्ठ। पूर्वाभास

तथा [2 9] पृष्ठ। अगला जांच करने के लिए कि क्या कोई पोस्ट पर क्लिक करने के लिए एक पोस्ट है या नहीं। यदि वहां है तो हम एक ब्लॉक आउटपुट कर सकते हैं और पोस्ट का शीर्षक और लिंक शामिल कर सकते हैं।

11. निर्माण और प्रकाशित करें

GitHub पृष्ठ हमारे लिए SASS फ़ाइलों को प्रस्तुत करता है, इसलिए जब आप चलाते हैं [2 9] jekyll निर्माण

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

यह लेख मूल रूप से अंक 320 में प्रकाशित किया गया था जाल , वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका। यहां समस्या 320 खरीदें या यहां सदस्यता लें ।

[2 9] संबंधित आलेख:

• ग्रिड और फ्लेक्सबॉक्स के साथ एक ब्लॉग बनाएं
• सबसे अच्छा मुफ्त ब्लॉगिंग प्लेटफॉर्म
• गैट्सबी के साथ ब्लॉगिंग साइट कैसे बनाएं

[2 9 6] [2 9 7]

---

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

How to rank in Google

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

(छवि क्रेडिट: बज़फीड) [1 9] तो, आप जानना चाहते है�..

---

How to write HTML code faster

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

(छवि क्रेडिट: भविष्य) [1 9] आधुनिक वेबसाइटों के ..

---

Stop the bots with Google reCAPTCHA

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

(छवि क्रेडिट: भविष्य) [1 9] बॉट्स को हमेशा एक नं�..

---

How to create water simulations

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

यह ट्यूटोरियल आपको हौडिनी एफएक्स का उपयोग करके श�..

---

How to paint colourful animation art in Photoshop

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

इस फ़ोटोशॉप ट्यूटोरियल के दौरान, मैं कई महत्वपूर�..

---

Create a responsive layout with CSS Grid

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

सीएसएस ग्रिड लेआउट हर दिन ब्राउज़र समर्थन म�..

---

Get your head around React with these five factors

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

सीखना प्रतिक्रिया, फेसबुक और इंस्टाग्राम से उपय�..

---

5 ways to create more immersive VR experiences

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

आभासी वास्तविकता बिल्कुल नया नहीं है, लेकिन यह के..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers