कैक्टस [OS X] का उपयोग करके एक स्टेटिक ब्लॉग कैसे बनाएँ

अद्यतन करें: कैक्टस ऐप बंद कर दिया गया है.

यदि आपको एक सीएमएस की आवश्यकता नहीं है और सिर्फ एक स्थिर साइट या ब्लॉग प्राप्त करना पसंद करेंगे, तो जेकेल के साथ एक अच्छा मौका है। हालाँकि, यदि आप कमांड लाइन टूल के साथ काम करने के बजाय GUI के साथ एक टूल पसंद करते हैं, तो आप बाहर की जाँच करना चाहते हैं कैक्टस.

कैक्टस एक स्वतंत्र है स्थैतिक साइट जनरेटर शक्तिशाली उपकरणों से लैस है जो आपकी मदद कर सकते हैं स्थानीय स्तर पर वेबसाइटों का निर्माण, आधुनिक वेब तकनीकों के साथ तेज और आसान। यह आपको अपनी परियोजना में 4 पूर्वनिर्धारित टेम्पलेट्स के साथ एक प्रारंभिक बिंदु देता है ताकि आप चल रहे मैदान से टकरा सकें.

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

शुरू हो जाओ

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

एक नया प्रोजेक्ट बनाने के लिए, क्लिक करें सर्जन करना. आपको वहां 4 टेम्पलेट उपलब्ध होंगे। इस ट्यूटोरियल के लिए, हम ब्लॉग टेम्पलेट के साथ जा रहे हैं। क्लिक करें सर्जन करना.

आपको अपनी परियोजना का नाम देने और उस स्थान को चुनने के लिए कहा जाएगा जहां परियोजना मौजूद है। यहाँ मैं नाम देता हूँ “मेरा बहुत बढ़िया ब्लॉग” परियोजना के लिए। उसके बाद, आप पहले से ही कैक्टस में अपनी परियोजना देखेंगे.

फ़ाइलें संशोधित करना

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

चीजों को संक्षिप्त रखने के लिए, यहां प्रत्येक निर्देशिका क्या है:

• टेम्पलेट्स: इसमें HTML फ़ाइलें शामिल हैं, जो टेम्पलेट के रूप में व्यवहार करती हैं, जिनका उपयोग HTML फ़ाइलों को बनाने के लिए पृष्ठों पर किया जाता है.
• पेज: सभी HTML फ़ाइलें हैं जो एक ही पथ के साथ एक पृष्ठ बन जाएंगी। जैसे: hello.html यहाँ http://yoursite.com/hello.html बनेगा
• स्थिर: सीएसएस, जावास्क्रिप्ट और छवियों जैसे सभी स्थिर संसाधन शामिल हैं.

अब, हम निर्देशिकाओं से तीन मुख्य फाइलों को संपादित करेंगे: base.html तथा post.html टेम्पलेट निर्देशिका में और index.html पेज डायरेक्टरी में.

कैक्टस का उपयोग करता है Django टेम्पलेट इंजन अस्थायी भाषा के लिए। इसके साथ, आप HTML तत्वों को अन्य HTML फ़ाइलों से शामिल कर सकते हैं, इसलिए आपको कोड डुप्लिकेट करने की आवश्यकता नहीं है। यहां जिन सुविधाओं का सबसे अधिक उपयोग किया जाता है वे हैं टेम्पलेट विरासत तथा परिवर्तनशील.

यह देखने के लिए कि वे कैसे काम करते हैं, पहले इसे खोलें base.html खाका निर्देशिका पर.

             % ब्लॉक सामग्री% मुख्य सामग्री % एंडब्लॉक सामग्री% ---   

base.html सरल HTML फ़ाइल है जिसे हम 'कंकाल' टेम्पलेट के रूप में उपयोग करते हैं। इसमें हमारी साइट के सामान्य तत्व शामिल हैं। आप कुछ देख सकते हैं “ब्लॉक” वहाँ पर; हम इन ब्लॉकों को ओवरराइड करने के लिए चाइल्ड टेम्पलेट का उपयोग करेंगे.

अब खोलें post.html के साथ एक ही निर्देशिका में स्थित है base.html.

 % "बेस.html"% का विस्तार करता है % ब्लॉक शीर्षक% शीर्षक | कैक्टस % एंडब्लॉक शीर्षक% % ब्लॉक सामग्री% --- 
 
शीर्षक
 
शीर्षक 
 
 
 % block body% यह वह जगह है जहाँ पोस्ट सामग्री है। % एंडब्लॉक बॉडी% 
 --- % एंडब्लॉक सामग्री% 

post.html हमारे ब्लॉग प्रविष्टि पृष्ठ के लिए मार्कअप है। पहली पंक्ति में आप देख सकते हैं post.html फैली हुई है base.html. इसका मतलब है कि हम ब्लॉक को ओवरराइड करेंगे base.html यहाँ ब्लॉक के साथ.

हम यहां चर भी पा सकते हैं, जैसे कि शीर्षक तथा शीर्षक. हम बाद में ब्लॉग प्रविष्टियों में इन चरों के मूल्यों को परिभाषित करेंगे.

अब, को देखने देता है % ब्लॉक बॉडी% ब्लॉक। यह हमारे ब्लॉग की पोस्ट प्रविष्टियों में शामिल चाइल्ड टेम्पलेट द्वारा ओवरराइड किया जाएगा.

निर्देशिका में जाओ पृष्ठों / पदों. यहाँ हमारी पोस्ट प्रविष्टियाँ बाकी हैं.

 शीर्षक: मेरी पोस्ट प्रविष्टियाँ शीर्षक: मेरा पोस्ट शीर्षक लेखक: Agus दिनांक: १५-०१-२०१५ % "डाक" "% % ब्लॉक बॉडी% % फ़िल्टर मार्कडाउन% लोरम इप्सम डोलर सिट एमेट, कंसेटेटुर एडीपीसिंग बदलाव। इयरम, पेरफेरेंडिस का आविष्कार डोलारेम रेरम एट टेंपा सिंट नेमो इल्म ए सैपे, मानेंदा, अमेट इल्लो डेलेनिटी ऑफिसिस, वॉलप्टेटम मैक्सिमम एटेक वर्नो संट। % एंडफिल्टर% % एंडब्लॉक बॉडी% 

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

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

 % "बेस.html"% % ब्लॉक सामग्री% का विस्तार करता है -- 
 पदों में पद के लिए%% 
   शीर्षक पोस्ट करें  
पोस्ट.हेडलाइन 
 % endfor% 
 -- % एंडब्लॉक सामग्री% 

इस बिंदु पर हमारे पास दो मुख्य पृष्ठों के साथ एक सरल ब्लॉग है, सूचि पन्ना जिसमें ब्लॉग प्रविष्टियाँ हैं, और ब्लॉग प्रविष्टि पृष्ठ अपने आप.

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

SCSS का उपयोग करके ब्लॉग को स्टाइल करना

कैक्टस की एक बड़ी विशेषता यह है कि यह बॉक्स से SASS / SCSS के साथ काम करता है। केवल अपनी .sass या .scss फ़ाइलों को छोड़ें में स्थिर निर्देशिका और हर बार जब आप फ़ाइलों को संपादित और सहेजते हैं, तो कैक्टस स्वचालित रूप से सीएसएस उत्पन्न करेगा.

यहां मैं हमारे ब्लॉग को स्टाइल करने के लिए बूटस्ट्रैप-एसएएस का उपयोग करके एक उदाहरण दूंगा। मान लें कि आप बोवर, ओपन टर्मिनल और नेविगेट करने के लिए उपयोग कर रहे हैं स्थिर हमारी परियोजना का उपयोग कर की निर्देशिका सीडी आदेश। फिर इस कमांड का उपयोग करके बूटस्ट्रैप-सैस स्थापित करें:

$ bower बूटस्ट्रैप-सैस-आधिकारिक इंस्टॉल करें

एक बार डाउनलोड पूरा हो जाने के बाद, आप एक देखेंगे bower_components स्थिर निर्देशिका युक्त निर्देशिका बूटस्ट्रैप-सास-सरकारी.

अब इस निर्देशिका पर जाएं: स्थिर / सीएसएस. Scss फ़ाइल बनाएं, इसे नाम दें syle-bs.scss और इस कोड को डालें.

 @import "... / bower_compenders / बूटस्ट्रैप-एसएएस-आधिकारिक / संपत्ति / स्टाइलशीट / _bootprap"; 

कोड क्या करता है यह बूटस्ट्रैप-एसएएस से सब कुछ आयात करता है। एक बार जब आप स्टाइल- bs.scss को सेव कर लेते हैं, तो आपको उसी डायरेक्टरी पर उत्पन्न स्टाइल-बीकेएस दिखाई देंगे जिसमें बूटस्ट्रैप के सभी स्टाइल हों।.

अपने प्रोजेक्ट को तैनात करें

अंत में, जब आपका प्रोजेक्ट तैयार हो जाता है, तो आप अपनी परियोजना को लाइव संस्करण में आसानी से तैनात कर सकते हैं अमेज़न S3 का उपयोग कर.