Jekyll کے ساتھ ایک بلاگ کی تعمیر کیسے کریں

Sep 16, 2025
کيسے
Build a blog with Jekyll
(تصویری کریڈٹ: نیٹ)

یہ سبق ان لوگوں کے لئے ہے جنہوں نے جامد سائٹ جنریٹرز کے بارے میں سنا ہے اور فیصلہ کیا ہے کہ وہ ایک کا استعمال کرتے ہوئے اپنی اپنی سائٹ کی تعمیر میں جانے کے لئے چاہتے ہیں. یہاں ہم آپ کو دکھا رہے ہیں بلاگ شروع کرنے کا طریقہ jekyll کا استعمال کرتے ہوئے.

ٹرمینل کا ایک بنیادی علم اچھا ہے، اگرچہ آپ کو پیروی کرنے کے قابل ہونا چاہئے کیونکہ حکمیں تمام منصفانہ ہیں. GitHub صفحات پر سائٹس مناظر کے پیچھے Jekyll کی طرف سے طاقتور ہیں، لہذا جب GitHub صفحات کے ساتھ استعمال کیا جاتا ہے، تو یہ آپ کی ویب سائٹ کی میزبانی اور انتظام کرنے کا ایک طریقہ بناتا ہے (ہماری سب سے بہترین کی فہرست دیکھیں ویب میزبانی دیگر اختیارات کے لئے خدمات، یا ہماری فہرست دیکھیں اگر آپ مختلف قسم کی پسند کریں گے ویب سائٹ بلڈر ).

یہ سبق آپ کو ایک میک پر فرض کرتا ہے؛ جیسا کہ jekyll ایک روبی پروگرام ہے، یہ ونڈوز پر چلانے کے لئے ممکن ہے لیکن یہ سرکاری طور پر حمایت نہیں کی جاتی ہے. اگر آپ ونڈوز پر پیروی کرتے ہیں تو، یہاں ہاپ روبی قائم کرنے میں مدد کے لئے.

اس ٹیوٹوریل کو مکمل کرنے کے بعد، آپ کو ایک جیکیل بلاگ بنائے گا اور سیکھا جائے گا کہ اس کی خصوصیات اور ٹیمپلیٹنگ زبان کس طرح ذاتی بلاگ بنا سکتی ہے. یہ آپ کی اپنی سائٹ کو تیار کرنے کے لئے ایک اچھا نقطہ نظر ہے. اور یاد رکھیں، اگر آپ کو بہت سے ڈیزائن خیالات یا میڈیا فائلوں مل گئے ہیں، تو اس بات کو یقینی بنائیں کہ انہیں محفوظ طریقے سے بہتر طریقے سے رکھیں کلاؤڈ اسٹوریج .

اس سبق کے لئے فائلوں کو تلاش کریں یہاں .

  • 10 بہترین جامد سائٹ جنریٹر

01. سیٹ اپ

میک پر آپ کو ڈیفالٹ کی طرف سے انسٹال روبی ہونا چاہئے لیکن ٹائپنگ کی طرف سے چیک کریں روبی آپ کے ٹرمینل میں.

اب ہم اصل میں سائٹ میں جیکیل چل رہا ہے، اس بات کو یقینی بنائیں کہ آپ ڈائرکٹری میں ہیں جو آپ اپنی سائٹ میں تعمیر کرنا چاہتے ہیں اور صرف ٹائپ کریں GEM انسٹال Jekyll Bundler ؛ آپ کا کمپیوٹر اس سائٹ کو چلانے کے لئے ضروری تمام انحصار پر قبضہ کرے گا.

02. مقامی طور پر خدمت یا تعمیر

دو اہم حکمیں ہیں جو آپ Jekyll کے ساتھ استعمال کریں گے - خدمت اور تعمیر . اپنی سائٹ کو مقامی طور پر ٹائپ کرنے کے لئے Jekyll کی خدمت آپ کی کمانڈ لائن میں. یہ http://127.0.0.1:4000 پر ایک ورژن چلائیں گے کہ آپ اپنی تبدیلیوں کو پیش کرسکتے ہیں. اگر آپ کے پاس پہلے سے ہی GEM اور آپ کی مشین پر انسٹال کردہ دیگر انحصار ہیں، تو یہ کمانڈ انحصار کے ورژن میں خرابی کی وجہ سے ناکام ہوسکتا ہے؛ اس صورت میں، کوشش کریں بنڈل excyll کی خدمت اس کے بجائے. اسی طرح چل رہا ہے لیکن لفظ کے ساتھ تعمیر صرف سائٹ کو مرتب کرتا ہے.

03. سٹارٹر فائلوں کو حاصل کریں

اس سبق کے ساتھ فراہم کردہ فائلوں کو اس نقطہ پر فراہم کرنے کے لئے آپ کو کام کرنے کے لئے ایک بنیاد فراہم کرنے کے لئے. یہ ہمیں سائٹ کے لئے ایک ہوم پیج، بلاگ کی فہرست، تفصیل کے صفحے اور اثاثوں کی ساخت کو دے گا. http://127.0.0.1:4000 پر اپنا صفحہ تازہ کریں اور آپ دیکھیں گے کہ ہمارے پاس اب سے کچھ بنیادی صفحات ہیں. آئیے جیکیل سائٹ کیسے کام کرتا ہے اس کا فوری جائزہ ہے.

ایک Jekyll سائٹ راستے کی پیروی کرنے کے لئے آسان میں تشکیل دیا جاتا ہے. کسی بھی مجموعہ (پوزیشنوں کی اقسام) ان کے اپنے فولڈر میں منعقد ہوتے ہیں، جیسے ترتیب اور شامل ہیں. آپ کو '_SITE' فولڈر کو نوٹس ملے گا - یہ وہی فولڈر ہے جسے جب آپ چلاتے ہیں تو Jekyll استعمال کرتا ہے Jekyll کی تعمیر کمانڈ.

Generate CSS

سی ایس ایس پیدا کرنے کے لئے 26 ستمبر کو لندن میں امریکہ میں شمولیت اختیار کریں - تصویر پر کلک کریں (تصویری کریڈٹ: مستقبل)

04. ترتیب

Build a blog with Jekyll: Configuration

Jekyll آپ کو ایک عظیم ڈھانچے کے ساتھ کام کرنے کے لئے اور ایک آسان انتظام کرنے کے لئے تشکیل فائل فراہم کرتا ہے (تصویری کریڈٹ: نیٹ)

اپنے ٹیکسٹ ایڈیٹر میں کھولیں _config.yml کھولیں اور اپنی اپنی تفصیلات شامل کریں؛ چیک کرنے کے لئے ایک کلیدی علاقے آپ کے بیس یو آر ایل کو قائم کرنے کے لئے ہے. یہ فولڈر ہے جو آپ کی سائٹ میں لوڈ کر رہی ہے. ترتیب فائل آپ کے WP-Canct فائل کے ساتھ مل کر گلوبل اختیارات کا استعمال کرتے ہوئے اسی طرح کی ہے اگر آپ ایک ورڈپریس تھیم کی تعمیر کر رہے تھے.

آپ بنیادی معلومات جیسے عنوانات اور میٹا تفصیلات، آپ کے ای میل اور سماجی اکاؤنٹس کو کنٹرول کرسکتے ہیں اور پھر تمام معلومات سائٹ کو جمع کرنے اور کسی بھی پلگ ان کو مرتب کرنے کی ضرورت ہوتی ہے. آپ صفحات کے لئے HTML اور مارک ڈاؤن کا مرکب استعمال کرسکتے ہیں، اس پر منحصر ہے کہ آپ کیا حاصل کرنا چاہتے ہیں. تاہم، آپ کے ہوم پیج اور فہرست کے صفحات جیسے اپنی مرضی کے مطابق صفحات عام طور پر ایچ ٹی ایم ایل ہو گی، جبکہ خطوط اور دیگر عام صفحات جو سیٹ ٹیمپلیٹ کا استعمال کرتے ہیں مارک ڈاؤن گے.

05. فرنٹ معاملہ

فرنٹ معاملہ ایک فائل کے سب سے اوپر پر یمل کا ایک ٹکڑا ہے. Jekyll متغیر منعقد کرنے کے لئے اس کا استعمال کرتا ہے. تقریبا MD فائل میں دیکھو اور آپ دیکھ سکتے ہیں کہ ہم عنوان مقرر کرتے ہیں، جو استعمال کرنے کے لۓ ترتیب، مصنف اور کسی بھی متعلقہ تصاویر.

06. مائع ٹیگز

Build a blog with Jekyll: Liquid tags

مائع ٹیگز ٹیمپلیٹس کے ساتھ کام کرنے کا ایک آسان طریقہ پیش کرتے ہیں اور Shopify موضوعات میں بھی استعمال کیا جاتا ہے (تصویری کریڈٹ: نیٹ)

Jekyll مائع کا استعمال کرتا ہے - ایک templating زبان جو اشیاء، ٹیگ اور فلٹر استعمال کرتا ہے. ہم استعمال کرتے ہیں چیز ڈبل برےوں سے گھرا ٹیگ {{}} منطق کے لئے سامنے کے معاملات متغیرات اور ایک کڑا اور فی صد نشان {٪٪} .

07. اپنی نیویگیشن کی تعمیر کریں

جامد نیویگیشن کے بجائے، ہم سانچے سے مواد کو علیحدہ کرنے کے لئے ترتیب فائلوں کی طاقت کا استعمال کرتے ہیں. ہم نیویگیشن فائل کے طور پر 'ڈیٹا' فولڈر میں نیویگیشن اشیاء کو کنٹرول کریں گے اور پھر نیویگیشن میں ان کے ذریعے لوپ. ہم صرف وہی صفحات اور لنکس درج کر سکتے ہیں جو ہم ٹیمپلیٹ واپس جانے کے بغیر آگے آگے آگے بڑھ سکتے ہیں. اس بات کو یقینی بنائیں کہ جب آپ اپنی ترتیب فائلوں میں ترمیم کرتے ہیں تو آپ کو سائنسی فائلوں میں ترمیم کرتے ہیں جیسے آپ کی ترتیب فائلوں کو ترمیم کرتے ہیں.

ترتیب فائل پہلے سے ہی مقرر کیا گیا ہے لہذا آپ کے 'نیویگیشن. html' میں مندرجہ ذیل کوڈ درج کریں فائل میں شامل ہیں: 

 {٪ Site.data.navigation٪ میں آئٹم کے لئے٪}
     & lt؛ ایک href = "{{site.baseurl}} / {{item.link}}" {٪ Page.url == item.link٪} کلاس = "موجودہ" {٪ endif٪} & gt؛ {{آئٹم نام}}} & lt؛ / a & gt؛
   {٪ endfor٪}}

ہم نیویگیشن ترتیب فائل میں دیکھنے کے لئے مائع منطق ٹیگ استعمال کررہے ہیں اور ہر داخلے کے لئے ایک لنک اور نام سے باہر نکلیں، بنیادی طور پر لوپ کے لئے صرف ایک معیار.

08. ہوم پیج بنائیں

ہمارے ہوم پیج پر ہم اپنے تازہ ترین بلاگ پوسٹ کو ایک ہیرو کے طور پر فہرست کرنے جا رہے ہیں اور پھر ہمارے صفحے کے بارے میں لنک کے ساتھ ایک لنک کے ساتھ ایک ٹکڑا ہے. چلو ہیرو بلاک کے ساتھ شروع کریں. کھولیں index.html اور پھر مندرجہ ذیل کوڈ شامل کریں: 

 {٪ تفویض پوسٹ = سائٹ. posts.first٪}
& lt؛ ڈوی کلاس = "سی ہیرو" سٹائل = "پس منظر: url ({{post.thumbnail_image.large.large | RELVATION_URL}}) نیچے مرکز / کور کو دوبارہ دوبارہ نہیں؛" & gt؛
   & lt؛ h1 class = "c-herue__title" & gt؛ {{post.ttitle}} & lt؛ / h1 & gt؛
   {{پوسٹ .ینٹرو | نشان زد}}
   & lt؛ ایک href = "{{post.url}}" کلاس = "BTN - ہیرو" & gt؛ مکمل پوسٹ اور ایل ٹی؛ / A & GT؛
& lt؛ / div & gt؛

آپ دیکھیں گے کہ ہم سب سے پہلے تازہ ترین پوسٹ تفویض کرتے ہیں اور پھر پوسٹ کے سامنے کے معاملے میں تھمب نیل کی تصویر کا حوالہ دیتے ہیں. پوسٹ انٹرو مائع فلٹر کا استعمال کرتا ہے نشان زد نشان زد ایچ ٹی ایم ایل کو تبدیل کرنے کے لئے.

اس جگہ کے ساتھ، چلو بھی صفحے کے بارے میں ایک چھیڑ شامل کرتے ہیں. مندرجہ ذیل شامل کریں: 

 & lt؛ ڈوی کلاس = "سی خصوصیت" اور جی ٹی؛
   {٪ صفحہ میں سائٹ کے لئے. پیج٪}
       {٪ Page.url == '/ Obout.html'٪}
           & lt؛ img src = "{{page.profile_image.small}}}}" alt = "profiet تصویر" کلاس = "C-FeatTURE__IMAGE" / & GT؛
           & lt؛ div class = "C-Featter__Text" اور GT؛
               & lt؛ h2 & gt؛ & lt؛ ایک href = "{{page.url}}" {{page.url}} "& gt؛ {{page.title}} & lt؛ / a & gt؛ & lt؛ / h2 & gt؛
               & lt؛ p & gt؛ {{page.intro}} & lt؛ / p & gt؛
           & lt؛ / div & gt؛
          
       {٪ ختم کرو اگر ٪}
   {٪ endfor٪}
& lt؛ / div & gt؛

اس بار ہم استعمال کر رہے ہیں کے لئے سائٹ میں صفحات کے ذریعے چیک کرنے کے لئے لوپ. ہم استعمال کر رہے ہیں Page.Url. صفحہ کے بارے میں معلومات کو آؤٹ کرنے کے لئے اور پھر ہم ہیرو میں ایک ہی ٹیمپلیٹ سٹائل کا استعمال کرتے ہیں.

09. بلاگ کی فہرست

Build a blog with Jekyll: Blog list

اس سائٹ میں باقی خطوط کے لئے ایک سادہ کارڈ ترتیب جو سی ایس ایس گرڈ اور FlexBox استعمال کرتا ہے (تصویری کریڈٹ: نیٹ)

ہوم پیج کے ساتھ ہم نے بلاگ فہرست کے صفحے پر منتقل کر سکتے ہیں. فہرست کے صفحے کو تخلیق کرنے کے لئے، ہم دوبارہ دوبارہ 'مراسلات' فولڈر میں تمام فائلوں کے ذریعہ لوپ کو لوپ دینے کے لئے مائع ٹیگ استعمال کرتے ہیں.

ہیرو آپ کے لئے کیا جاتا ہے کیونکہ یہ ہوم پیج کے طور پر اسی عمل کی پیروی کرتا ہے. 'Blog.html' میں ہیرو کے نیچے، مندرجہ ذیل میں شامل کریں: 

& lt؛ ڈوی کلاس = "رکاوٹ" اور جی ٹی؛
   & lt؛ h1 & gt؛ باقی باقی اور LT؛ / H1 اور GT؛
   & lt؛ سیکشن کلاس = "کارڈ فہرست" اور جی ٹی؛
           {٪ پوسٹ میں سائٹ کے لئے. Posts آفسیٹ: 1٪}
           & lt؛ ڈوی کلاس = "کارڈ" اور جی ٹی؛
                   & lt؛ img src = "{{post.thumbnail_image.small}}" / & gt؛
                   & lt؛ ڈوی کلاس = "کارڈ تفصیلات" اور جی ٹی؛
                   & lt؛ h3 & gt؛ {{post.date | تاریخ: "٪ D٪ B"}} - {{post.title}} & lt؛ / h3 & gt؛
               & lt؛ ایک href = "{{post.url}}" کلاس = "BTN" & GT؛ مزید پڑھیں & lt؛ / a & gt؛
                   & lt؛ / div & gt؛
               & lt؛ / div & gt؛
           {٪ endfor٪}
          
   & lt؛ / سیکشن اور GT؛
& lt؛ / div & gt؛

پھر ہم A. کے لئے خطوط مجموعہ کے ذریعے جانے کے لئے لوپ. لیکن جیسا کہ ہم نے پہلے ہی ہیرو میں تازہ ترین طور پر ختم کر دیا ہے ہم اس لوپ کو دو پوسٹ پر شروع کرنے کے لئے آفسیٹ کرتے ہیں. ایک مائع فلٹر کا استعمال ہمارے انتخاب کی شکل میں تبدیل کرنے کے لئے استعمال کیا جاتا ہے.

10. بلاگ تفصیل کے صفحے

اب جانے کے لئے طویل عرصہ تک: ہم تقریبا تمام بنیادی عناصر ہیں. ایڈریس کرنے کے لئے ایک اہم پہلو بائیں نیویگیشن ہے. جب آپ ایک بلاگ پوسٹ پڑھ رہے ہیں تو آپ کو سائیکل کا راستہ کی ضرورت ہے اور مزید پڑھیں. ہم ایک صفحے متغیر کا استعمال کرتے ہوئے ہماری ویب سائٹ پر کچھ اچھا صفحہ بندی شامل کرسکتے ہیں. لے آؤٹ فولڈر میں پوسٹ. html کھولیں اور مندرجہ ذیل شامل کریں: 

 & lt؛ div class = "c-pagination" & gt؛
   {٪ اگر Page.Previous٪}
   & lt؛ div & gt؛
       & lt؛ h3 & gt؛ پچھلا & lt؛ / h3 & gt؛
       & lt؛ p & gt؛ {{page.previous.title}} & lt؛ / p & gt؛
       & lt؛ p & GT؛ & lt؛ ایک کلاس = "BTN" href = "{{site.baseurl}} {{page.preeur.url}}} {{page.preeuious.url}}" & gt؛ پوسٹ پڑھیں & lt؛ / & gt؛ & lt؛ / p & gt؛
   & lt؛ / div & gt؛
   {٪ ختم کرو اگر ٪}
   {٪ Page.Next٪}
   & lt؛ div & gt؛
       & lt؛ h3 & gt؛ اوپر اوپر اور ایل ٹی؛ / H3 اور GT؛
       & lt؛ p & gt؛ {{page.next.title}} & lt؛ / p & gt؛
       & lt؛ p & GT؛ & lt؛ ایک کلاس = "BTN" href = "{{site.baseurl}} {{page.next.url}}" & gt؛ پوسٹ پڑھیں & lt؛ / & gt؛ & lt؛ / p & gt؛
   & lt؛ / div & gt؛
   {٪ ختم کرو اگر ٪}
& lt؛ / div & gt؛

ہم استعمال کرتے ہیں صفحہ اور Page.Next. اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے. اگر وہاں موجود ہے تو ہم ایک بلاک آؤٹ کر سکتے ہیں اور پوسٹ کا عنوان اور لنک شامل کرسکتے ہیں.

11. تعمیر اور شائع

GitHub صفحات ہمارے لئے SASS فائلوں کو renders، لہذا جب آپ چلاتے ہیں Jekyll کی تعمیر _Site فولڈر میں مرتب شدہ فائلوں کو پیدا کیا جاتا ہے. یہاں تک کہ گلپ فائلوں یا ویب پیپ، صرف اچھا لگے شیلیوں! آپ سائٹ کے لئے اہم config.yml فائل میں ایک ترتیب کے طور پر SASS پیداوار کو بھی کم کر سکتے ہیں. اس ڈائرکٹری کے مواد کو آپ کے منتخب کردہ ہوسٹنگ میں منتقل کیا جاسکتا ہے. ایک بات یہ ہے کہ GitHub صفحات اصل میں Jekyll کی حمایت کرتا ہے لہذا آپ اپنے ماسٹر شاخ کا ذریعہ ذریعہ کے ذریعہ ایک سائٹ کی تعمیر اور میزبانی کرسکتے ہیں. آپ اس پر مزید معلومات تلاش کرسکتے ہیں یہاں .

یہ مضمون اصل میں مسئلہ 320 میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. مسئلہ 320 خریدیں یا یہاں سبسکرائب کریں .

متعلقہ مضامین:

  • گرڈ اور FlexBox کے ساتھ ایک بلاگ بنائیں
  • بہترین مفت بلاگنگ پلیٹ فارم
  • Gatsby. کے ساتھ ایک بلاگنگ سائٹ کی تعمیر کیسے کریں

کيسے - انتہائی مشہور مضامین

کس طرح گردن اور کندھوں کو ڈراؤ

کيسے Sep 16, 2025

جب ایک گردن اور کندھوں کو ڈرانے کے بارے میں سیکھنے کے بعد، یہ اکثر ہمارے کام میں حجم کو دکھانے کے لئے چیلنج..

لینو پرنٹنگ: ایک تعارف

کيسے Sep 16, 2025

(تصویری کریڈٹ: میگ Buick) Lino Printmaking امدادی پرنٹنگ کا ایک طریقہ ہے، جس..

آرٹرج کے ساتھ شروع کریں

کيسے Sep 16, 2025

(تصویری کریڈٹ: اسٹیو گولڈ) آرکری کے ساتھ شروع کرو 01. ..

آپ کے پینٹنگز میں پیمانے پر کیسے حاصل کرنے کے لئے

کيسے Sep 16, 2025

اس سبق میں ہم کچھ بنیادی اصولوں پر جائیں گے جو بڑے پیمانے پر اپنے ٹکڑے ٹکڑے میں بڑے پیمانے پر خیال سے گفتگو..

ترقی پسند ویب اپلی کیشن کی تعمیر کیسے کریں

کيسے Sep 16, 2025

موبائل اب نصف ویب کے ٹریفک کے لئے اکاؤنٹس ہے، اور ویب ایپلی کیشنز صارفی�..

HTML5 پر فلیش گیمز تبدیل کریں

کيسے Sep 16, 2025

فلیش آہستہ آہستہ ایچ ٹی ایم ایل 5 اور جاوا اسکرپٹ کے حق میں ایڈوب کی طرف �..

فوٹوشاپ میں اپنے تصور آرٹ کی مہارت کو بہتر بنائیں

کيسے Sep 16, 2025

اس ورکشاپ کے لئے، میں آپ کو صرف آپ کی تخیل سے حروف کو خالی کرنے کے لئے ای�..

ردعمل کے ساتھ ایک سادہ موسیقی پلیئر کی تعمیر

کيسے Sep 16, 2025

ردعمل صارف انٹرفیس کی تعمیر کے لئے ایک مقبول جاوا اسکرپٹ لائبریر..

اقسام