วิธีการสร้างบล็อกด้วย Jekyll

Sep 11, 2025
วิธีการ
Build a blog with Jekyll
(เครดิตภาพ: สุทธิ)

บทช่วยสอนนี้มีไว้สำหรับผู้ที่เคยได้ยินเครื่องกำเนิดไฟฟ้าไซต์แบบคงที่และตัดสินใจว่าพวกเขาต้องการที่จะไปสร้างเว็บไซต์ของตัวเองโดยใช้หนึ่ง ที่นี่เราจะแสดงให้คุณเห็น วิธีการเริ่มบล็อก ใช้ jekyll

ความรู้พื้นฐานของเทอร์มินัลนั้นดีแม้ว่าคุณควรจะสามารถติดตามได้ตามคำสั่งนั้นค่อนข้างง่าย ไซต์บนหน้า GitHub กำลังขับเคลื่อนโดย Jekyll ที่อยู่เบื้องหลังดังนั้นเมื่อใช้งานพร้อมกับหน้า GitHub มันจะสร้างวิธีการโฮสต์และจัดการเว็บไซต์ของคุณฟรี (ดูรายการที่ดีที่สุดของเรา เว็บโฮสติ้ง บริการสำหรับตัวเลือกอื่น ๆ หรือดูรายการของเราหากคุณต้องการประเภทอื่น สร้างเว็บไซต์ .

บทช่วยสอนนี้ถือว่าคุณอยู่ใน Mac; ในฐานะที่เป็น Jekyll เป็นโปรแกรมทับทิมมันเป็นไปได้ที่จะเรียกใช้บน Windows แต่ยังไม่ได้รับการสนับสนุนอย่างเป็นทางการ หากคุณกำลังติดตามบน Windows กระโดดไปที่นี่ สำหรับความช่วยเหลือในการตั้งค่าทับทิม

หลังจากเสร็จสิ้นการสอนนี้คุณจะได้สร้างบล็อก Jekyll และเรียนรู้ว่าคุณสมบัติและภาษาเทมเพลตสามารถสร้างบล็อกส่วนบุคคลได้อย่างไร นี่เป็นจุดเริ่มต้นที่ยอดเยี่ยมในการพัฒนาเว็บไซต์ของคุณเอง และจำไว้ว่าหากคุณมีแนวคิดการออกแบบหรือไฟล์สื่อจำนวนมากให้แน่ใจว่าให้พวกเขาอย่างปลอดภัยในที่สุด การจัดเก็บเมฆ .

ค้นหาไฟล์สำหรับการกวดวิชานี้ ที่นี่ .

  • 10 เครื่องกำเนิดไฟฟ้าไซต์คงที่ที่ดีที่สุด

01. การตั้งค่า

บน Mac คุณควรมี Ruby ที่ติดตั้งตามค่าเริ่มต้น แต่ลองตรวจสอบด้วยการพิมพ์ ruby -v ในเทอร์มินัลของคุณ

ตอนนี้เราสามารถได้รับ Jekyll ที่ทำงานในเว็บไซต์ตรวจสอบให้แน่ใจว่าคุณอยู่ในไดเรกทอรีที่คุณต้องการสร้างเว็บไซต์ของคุณในและพิมพ์เพียง อัญมณีติดตั้ง Jekyll Bundler ; คอมพิวเตอร์ของคุณจะไปและคว้าการพึ่งพาทั้งหมดที่จำเป็นในการเรียกใช้เว็บไซต์

02. ให้บริการในเครื่องหรือสร้าง

มีคำสั่งหลักสองคำที่คุณจะใช้กับ jekyll - เสิร์ฟ และ สร้าง . เพื่อเรียกใช้ไซต์ของคุณในท้องถิ่นประเภท Jekyll ให้บริการ ในบรรทัดคำสั่งของคุณ สิ่งนี้จะเรียกใช้เวอร์ชันใน http://127.0.0.1:4000 ที่คุณสามารถดูตัวอย่างการเปลี่ยนแปลงของคุณ หากคุณมีอัญมณีและการพึ่งพาอื่น ๆ ที่ติดตั้งในเครื่องของคุณคำสั่งนี้อาจล้มเหลวเนื่องจากไม่ตรงกันในรุ่นการพึ่งพา ในกรณีนี้ลอง Bundle Exec Jekyll ให้บริการ แทน. ทำงานเหมือนกัน แต่ด้วยคำว่า สร้าง เพียงแค่รวบรวมเว็บไซต์

03. รับไฟล์เริ่มต้น

คัดลอกไฟล์ที่ให้มาพร้อมกับบทช่วยสอนนี้ ณ จุดนี้เพื่อให้พื้นฐานสำหรับการทำงาน สิ่งนี้จะทำให้เรามีหน้าแรกรายการบล็อกหน้ารายละเอียดและโครงสร้างสินทรัพย์สำหรับเว็บไซต์ รีเฟรชหน้าของคุณที่ http://127.0.0.1:4000 คุณจะเห็นว่าตอนนี้เรามีหน้าพื้นฐานบางส่วนเพื่อสร้างจาก มามีภาพรวมอย่างรวดเร็วเกี่ยวกับวิธีการทำงานของเว็บไซต์ Jekyll

เว็บไซต์ Jekyll มีโครงสร้างในวิธีที่ง่ายต่อการติดตาม คอลเลกชันใด ๆ (ประเภทของโพสต์) จะถูกเก็บไว้ในโฟลเดอร์ของตนเองเช่นเดียวกับเค้าโครงและรวมถึง คุณจะสังเกตเห็นโฟลเดอร์ '_site' - นี่คือโฟลเดอร์ที่ Jekyll ใช้เมื่อคุณเรียกใช้ Jekyll สร้าง คำสั่ง

Generate CSS

เข้าร่วมกับเราในลอนดอนเมื่อวันที่ 26 กันยายนสำหรับการสร้าง CSS - คลิกที่ภาพเพื่อจองตั๋วของคุณ (เครดิตรูปภาพ: ในอนาคต)

04. การกำหนดค่า

Build a blog with Jekyll: Configuration

Jekyll ช่วยให้คุณมีโครงสร้างที่ยอดเยี่ยมในการทำงานกับไฟล์กำหนดค่าที่ง่ายต่อการจัดการ (เครดิตภาพ: สุทธิ)

เปิด _config.yml ในโปรแกรมแก้ไขข้อความของคุณและเพิ่มรายละเอียดของคุณเอง หนึ่งพื้นที่สำคัญในการตรวจสอบคือการตั้งค่าฐาน URL ของคุณ นี่คือโฟลเดอร์ที่ไซต์ของคุณกำลังโหลดไฟล์กำหนดค่าคล้ายกับการใช้ตัวเลือกโกลบอลรวมกับไฟล์ WP-config ของคุณหากคุณสร้างชุดรูปแบบ WordPress

คุณสามารถควบคุมข้อมูลหลักเช่นชื่อและคำอธิบายเมตาบัญชีอีเมลและโซเชียลของคุณจากนั้นข้อมูลทั้งหมดที่เว็บไซต์จำเป็นต้องรวบรวมเช่นคอลเลกชันและปลั๊กอินใด ๆ ที่ใช้ คุณสามารถใช้ส่วนผสมของ HTML และ Markdown สำหรับหน้าเว็บขึ้นอยู่กับสิ่งที่คุณต้องการให้บรรลุ อย่างไรก็ตามหน้าเว็บที่กำหนดเองเช่นหน้าแรกของคุณและหน้ารายการโดยทั่วไปจะเป็น HTML ในขณะที่โพสต์และหน้าทั่วไปอื่น ๆ ที่ใช้เทมเพลตชุดจะเป็น Markdown

05. หน้าตา

เรื่องหน้าเป็นตัวอย่างของ YAML ที่ด้านบนของไฟล์ Jekyll ใช้มันเพื่อเก็บตัวแปรไว้ ดูในไฟล์ About.md และคุณสามารถดูว่าเราตั้งค่าชื่อเรื่องที่จะใช้งานผู้แต่งและรูปภาพที่เกี่ยวข้องใด ๆ

06. แท็กของเหลว

Build a blog with Jekyll: Liquid tags

แท็กของเหลวเสนอวิธีที่ง่ายในการทำงานกับเทมเพลตและยังใช้ในรูปแบบ Shopify (เครดิตภาพ: สุทธิ)

Jekyll ใช้ของเหลว - ภาษาเทมเพลตที่ใช้วัตถุแท็กและตัวกรอง เราใช้ วัตถุ แท็กล้อมรอบด้วยการจัดฟันสองครั้ง {{}} เพื่อส่งออกตัวแปรสสารด้านหน้าและเครื่องหมายรั้งและเปอร์เซ็นต์สำหรับตรรกะ {%%} .

07. สร้างการนำทางของคุณ

แทนที่จะเป็นการนำทางแบบคงที่เราใช้พลังของการกำหนดค่าไฟล์เพื่อแยกเนื้อหาออกจากเทมเพลต เราจะเก็บรายการนำทางในโฟลเดอร์ 'Data' เป็นไฟล์กำหนดค่าแล้ววนซ้ำใน Navigation.html เราสามารถป้อนหน้าใด ๆ และลิงค์ที่เราต้องการไปข้างหน้าโดยไม่ต้องกลับไปที่เทมเพลต ตรวจสอบให้แน่ใจว่าคุณระมัดระวังในการแก้ไขไฟล์การกำหนดค่าของคุณเช่นการนำทางของคุณเช่น Navigation.yml หรือ Front Matter เมื่อเริ่มต้นโพสต์เนื่องจากพื้นที่จรจัดจะทำให้เกิดข้อผิดพลาด

ไฟล์กำหนดค่าถูกตั้งค่าแล้วดังนั้นป้อนรหัสต่อไปนี้ในไฟล์ 'Navigation.html' ของคุณ: 

 {% สำหรับรายการใน site.data.navigation%}
     & lt; a href = "{{site.baseurl}} / {item.link}}" {% ถ้า page.url == item.link%} คลาส = "ปัจจุบัน" {% endif%} & gt; {{itt} & gt; {{รายการ .name}} & lt; / a & gt;
   {% endfor%}

เราใช้แท็กตรรกะของเหลวที่จะดูในไฟล์กำหนดค่าการนำทางและวนลิงก์และชื่อสำหรับแต่ละรายการโดยทั่วไปเป็นเพียงมาตรฐานสำหรับลูป

08. สร้างหน้าแรก

ในหน้าแรกของเราเราจะแสดงรายการโพสต์บล็อกล่าสุดของเราในฐานะฮีโร่แล้วมีตัวอย่างจากหน้าเกี่ยวกับของเราด้วยลิงก์ผ่าน เริ่มต้นด้วยบล็อกฮีโร่กัน เปิด index.html แล้วเพิ่มรหัสต่อไปนี้: 

 {% กำหนดโพสต์ = site.posts.first%}
& lt; div class = "c-hero" style = "พื้นหลัง: URL ({{post.thumbnail_image.large | relavely_url}}) ศูนย์ด้านล่าง / ฝาครอบไม่ซ้ำ;" & gt;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | Markdownify}}
   & lt; a href = "{{post.url}}" class = "btn - hero" & gt; อ่านโพสต์เต็ม & lt; / a & gt;
& lt; / div & gt;

คุณจะเห็นว่าเราได้กำหนดโพสต์ล่าสุดก่อนจากนั้นอ้างอิงภาพย่อที่ตั้งไว้ในหน้าโพสต์ด้านหน้า โพสต์อินโทรใช้ตัวกรองของเหลว ทำเครื่องหมาย เพื่อแปลง MarkDown เป็น HTML

ด้วยที่ในสถานที่เรามาเพิ่มทีเซอร์จากหน้าเกี่ยวกับเกี่ยวกับเกี่ยวกับ เพิ่มสิ่งต่อไปนี้: 

 & lt; div class = "c- คุณสมบัติ" & gt;
   {% สำหรับหน้าในไซต์%}
       {% ถ้า page.url == '/about.html'%}
           & lt; img src = "{{page.profile_image.small}}" alt = "profie picture" class = "c- คุณสมบัติ _Image" / & gt;
           & lt; div class = "c- คุณสมบัติ __text" & gt;
               & lt; h2 & gt; & lt; a href = "{{page.url}}" & gt; {{page.title}} & lt; / a & gt; & lt; / h2 & gt; / h2 & gt;
               & lt; p & gt; {{page.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% endif%}
   {% endfor%}
& lt; / div & gt;

คราวนี้เรากำลังใช้ สำหรับ ลูปเพื่อตรวจสอบหน้าเว็บในเว็บไซต์ เรากำลังใช้ หน้า .url หากต้องการกรองหน้าเกี่ยวกับเกี่ยวกับจากนั้นเราใช้สไตล์การเทมเพลตที่คล้ายกันกับฮีโร่เพื่อส่งออกข้อมูลหน้าเว็บ

09. รายการบล็อก

Build a blog with Jekyll: Blog list

เค้าโครงการ์ดธรรมดาสำหรับส่วนที่เหลือของโพสต์ในเว็บไซต์ที่ใช้ CSS Grid และ Flexbox (เครดิตภาพ: สุทธิ)

ด้วยโฮมเพจที่สร้างขึ้นเราสามารถย้ายไปยังหน้ารายการบล็อก ในการสร้างหน้ารายการเราใช้แท็กของเหลวอีกครั้งเพื่อให้ตรรกะเพื่อวนรอบไฟล์ทั้งหมดในโฟลเดอร์ 'โพสต์'

ฮีโร่ทำเพื่อคุณเพราะมันเป็นไปตามกระบวนการเดียวกันกับโฮมเพจ ภายใต้ฮีโร่ใน 'blog.html' เพิ่มดังต่อไปนี้: 

& lt; div class = "constrain" & gt;
   & lt; h1 & gt; ที่ดีที่สุดของส่วนที่เหลือ & lt; / h1 & gt;
   & lt; class class = "card-list" & 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; href = "{{post.url}}" class = "btn" & gt; อ่านเพิ่มเติม & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endfor%}
          
   & lt; / section & gt;
& lt; / div & gt;

อีกครั้งเราใช้ สำหรับ ลูปที่จะผ่านการรวบรวมโพสต์ แต่ในขณะที่เราได้ลูบล่าสุดในฮีโร่ที่เราชดเชยลูปนี้เพื่อเริ่มต้นโพสต์สอง ตัวกรองของเหลวใช้เพื่อแปลงวันที่เป็นรูปแบบของการเลือกของเรา

10. หน้ารายละเอียดบล็อก

ไม่นานที่จะไปตอนนี้: เราเกือบจะมีองค์ประกอบพื้นฐานทั้งหมดเข้าด้วยกัน ด้านที่สำคัญอย่างหนึ่งที่เหลืออยู่ที่อยู่คือการนำทาง เมื่อคุณอ่านโพสต์บล็อกคุณต้องวนรอบและอ่านเพิ่มเติม เราสามารถเพิ่มการแบ่งหน้าที่ดีในเว็บไซต์ของเราโดยใช้ตัวแปรหน้า เปิดโพสต์.htmlในโฟลเดอร์เลย์เอาต์และเพิ่มสิ่งต่อไปนี้: 

 & lt; div class = "c-pagination" & gt;
   {% ถ้าหน้าก่อนหน้า%}
   & lt; div & gt;
       & lt; h3 & gt; ก่อนหน้า & lt; / h3 & gt;
       & lt; p & gt; {{page.previous.title}} & lt; / p & gt;
       & lt; p & gt; & lt; class = "btn" href = "{{site.baseurl}} {{page.previous.url}}" & GT; อ่านโพสต์ & lt; / p & gt;
   & lt; / div & gt;
   {% endif%}
   {% ถ้าหน้า next%}
   & lt; div & gt;
       & lt; h3 & gt; ขึ้น next & lt; / h3 & gt;
       & lt; p & gt; {{page.next.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{page.next.url}}" & GT; อ่านโพสต์ & LT; / A & GT; & GT; / P & GT;
   & lt; / div & gt;
   {% endif%}
& lt; / div & gt;

เราใช้ หน้า. ก่อน และ หน้า. next ตัวแปรเพื่อตรวจสอบว่ามีโพสต์ที่จะคลิกไปที่หรือไม่ หากมีจากนั้นเราสามารถส่งออกบล็อกและรวมชื่อและลิงค์ของโพสต์

11. สร้างและเผยแพร่

หน้า GitHub แสดงไฟล์ Sass ให้เราดังนั้นเมื่อคุณเรียกใช้ Jekyll สร้าง ไฟล์ที่รวบรวมจะถูกสร้างขึ้นในโฟลเดอร์ _site ไม่มีไฟล์ Gulp หรือ Webpack ที่นี่เพียงแค่สไตล์ลีนที่ดี! คุณสามารถส่งผลให้เอาท์พุตของ Sass เป็นไฟล์ในไฟล์ config.yml หลักสำหรับเว็บไซต์ เนื้อหาของไดเรกทอรีนี้สามารถถ่ายโอนไปยังโฮสติ้งที่คุณเลือกได้ สิ่งหนึ่งที่ต้องระวังคือหน้า GitHub รองรับ Jekyll เพื่อให้คุณสามารถสร้างและโฮสต์เว็บไซต์โดยใช้สาขาหลักของคุณเป็นแหล่งที่มา คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ ที่นี่ .

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 320 ของ สุทธิ นิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนา ซื้อปัญหา 320 ที่นี่ หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

  • สร้างบล็อกด้วยกริดและ Flexbox
  • แพลตฟอร์มบล็อกฟรีที่ดีที่สุด
  • วิธีการสร้างเว็บไซต์บล็อกด้วย Gatsby

วิธีการ - บทความยอดนิยม

17 เคล็ดลับสำหรับการวาดภาพมังงะใบหน้า

วิธีการ Sep 11, 2025

(เครดิตภาพ: Zakary Lee) ใบหน้ามังงะเป็นส่วนสำคัญข..

วิธีใช้ Gravity Sketch

วิธีการ Sep 11, 2025

(เครดิตรูปภาพ: Gravity Sketch) Gravity Sketch, เครื่องมือการออ�..

สร้างเอฟเฟกต์ข้อความไอน้ำเคลื่อนไหว

วิธีการ Sep 11, 2025

การเพิ่มเอฟเฟกต์ข้อความสามารถเพิ่มการมีส่วน..

สร้างและเคลื่อนไหวรูปหลายเหลี่ยม SVG

วิธีการ Sep 11, 2025

ในบทช่วยสอนนี้เราจะสร้างภาพที่หลากหลายจาก SVG T..

บทช่วยสอน Procreate: เครื่องมือใหม่สำรวจ

วิธีการ Sep 11, 2025

เมื่อฉันค้นพบ procreate ครั้งแรกฉันตกตะลึงด้วยความ�..

วิธีการสร้างแถบการ์ตูนมังงะแท้ๆ

วิธีการ Sep 11, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 หน้า 2 ..

วิธีการทำพระคัมภีร์ตัวละครของคุณเอง

วิธีการ Sep 11, 2025

สำหรับทุกคนที่ทำงานอย่างมืออาชีพใน การออก..

วิธีการออกแบบแบบฟอร์มตอบสนองและไม่เชื่อเรื่องพระเจ้า

วิธีการ Sep 11, 2025

ไม่ว่าจะเป็นการไหลของการลงทะเบียนหรือสเต็ปห..

หมวดหมู่