บทแนะนำ Jekyll: วิธีสร้างเว็บไซต์แบบคงที่

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

นี่คือที่มาของ Static Site Generator (SSGs) — ทำให้ง่ายต่อการสร้างเว็บไซต์ที่สวยงามและโหลดเร็ว โดยไม่จำเป็นต้องใช้ระบบแบ็กเอนด์หรือฐานข้อมูลที่ซับซ้อน

ในบทความนี้ คุณจะได้รู้จักกับหนึ่งใน SSG ที่ได้รับความนิยมอย่าง Jekyll เรียนรู้วิธีการทำงาน และวิธีสร้างเว็บไซต์คงที่ด้วยเครื่องมือนี้

นี่คือตัวอย่างสดของเว็บไซต์บล็อกที่คุณจะสร้างด้วย Jekyll

คุณสามารถเข้าถึงที่เก็บ GitHub ของโปรเจ็กต์ได้หากต้องการดูอย่างละเอียด

เจคิลคืออะไร?

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

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

นี่คือสิ่งที่ทำให้ Jekyll โดดเด่นท่ามกลาง SSG:

1. ใช้งานง่าย : Jekyll ใช้ไฟล์ข้อความล้วนและไวยากรณ์มาร์กดาวน์เพื่อสร้างและจัดการเนื้อหา ซึ่งหมายความว่าคุณไม่จำเป็นต้องมีความรู้เกี่ยวกับ HTML หรือ CSS เพื่อเริ่มต้น
2. รวดเร็วและปลอดภัย: Jekyll ไม่จัดการกับฐานข้อมูลฝั่งเซิร์ฟเวอร์หรือการเขียนสคริปต์ใดๆ ซึ่งหมายความว่ามีความเสี่ยงน้อยกว่าต่อช่องโหว่และการโจมตี มันสร้างไฟล์ HTML แบบคงที่ทำให้เว็บไซต์ของคุณรวดเร็วและปลอดภัยอย่างเหลือเชื่อ
3. ปรับแต่งได้: Jekyll ปรับแต่งได้สูง ให้คุณใช้เลย์เอาต์และเทมเพลต หรือแม้แต่สร้างปลั๊กอินเพื่อขยายฟังก์ชันการทำงาน
4. ง่ายต่อการปรับใช้ : Jekyll สร้างไฟล์ HTML แบบคงที่ซึ่งสามารถนำไปใช้กับเว็บเซิร์ฟเวอร์หรือผู้ให้บริการโฮสติ้งโดยไม่ต้องใช้ระบบจัดการเนื้อหาแบบไดนามิก
5. สนับสนุนโดยชุมชนขนาดใหญ่: Jekyll มีชุมชนขนาดใหญ่ของผู้ใช้และนักพัฒนา ซึ่งหมายความว่ามีทรัพยากรมากมายพร้อมให้ใช้งาน หากคุณต้องการความช่วยเหลือหรือต้องการขยายฟังก์ชันการทำงานของไซต์ของคุณ

วิธีการติดตั้ง Jekyll

คุณต้องติดตั้ง Ruby บนเครื่องของคุณก่อนจึงจะสามารถดำเนินการติดตั้ง Jekyll ตามที่ระบุไว้ในเอกสารประกอบของ Jekyll

วิธีติดตั้ง Jekyll บน macOS

ตามค่าเริ่มต้น Ruby จะมาพร้อมกับ macOS ที่ติดตั้งไว้ล่วงหน้า แต่ไม่แนะนำให้คุณใช้ Ruby เวอร์ชันดังกล่าวเพื่อติดตั้ง Jekyll เนื่องจากเป็นเวอร์ชันเก่า ตัวอย่างเช่น บน Ventura ซึ่งเป็นระบบปฏิบัติการล่าสุดของ Apple เวอร์ชันของ Ruby ที่ติดตั้งมาล่วงหน้าคือ 2.6.10 ซึ่งเวอร์ชันล่าสุดคือ 3.1.3 (ณ เวลาที่เขียนบทความนี้)

ในการแก้ไขปัญหานี้ คุณต้องติดตั้ง Ruby อย่างถูกต้องโดยใช้ตัวจัดการเวอร์ชัน เช่น chruby คุณต้องติดตั้ง Homebrew บน Mac ของคุณก่อน โดยใช้คำสั่งด้านล่างในเทอร์มินัลของคุณ:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

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

 brew doctor

หากคุณได้รับ “ ระบบของคุณพร้อมสำหรับการชง” ตอนนี้คุณสามารถดำเนินการติดตั้ง chruby และ ruby-install ด้วยคำสั่งด้านล่าง:

 brew install chruby ruby-install

ตอนนี้คุณสามารถติดตั้งเวอร์ชันล่าสุดของ ruby ​​ซึ่งเป็น 3.1.3 โดยใช้แพ็คเกจ ruby-install ที่คุณเพิ่งติดตั้ง:

 ruby-install 3.1.3

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

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

ตอนนี้คุณสามารถออกและเปิดเทอร์มินัลของคุณใหม่ จากนั้นตรวจสอบว่าทุกอย่างทำงานโดยเรียกใช้คำสั่งนี้:

 ruby -v

มันควรจะพูดว่า ruby ​​3.1.3

ตอนนี้คุณได้ติดตั้งเวอร์ชันล่าสุดของ Ruby บนเครื่องของคุณแล้ว ตอนนี้คุณสามารถดำเนินการติดตั้ง Jekyll และ Bundler gem ล่าสุดได้แล้ว:

 gem install jekyll bundler

วิธีติดตั้ง Jekyll บน Windows

ในการติดตั้ง Ruby และ Jekyll บนเครื่อง Windows คุณต้องใช้ RubyInstaller ซึ่งสามารถทำได้โดยการดาวน์โหลดและติดตั้งเวอร์ชัน Ruby+Devkit จากการดาวน์โหลด RubyInstaller และใช้ตัวเลือกเริ่มต้นสำหรับการติดตั้ง

ในขั้นตอนสุดท้ายของวิซาร์ดการติดตั้ง ให้รันขั้นตอน ridk install ซึ่งใช้ในการติดตั้งอัญมณี อ่านเพิ่มเติมผ่านเอกสาร RubyInstaller

จากตัวเลือก ให้เลือก toolchain สำหรับการพัฒนา MSYS2 และ MINGW เปิดหน้าต่างพรอมต์คำสั่งใหม่และติดตั้ง Jekyll และ Bundler โดยใช้คำสั่งด้านล่าง:

 gem install jekyll bundler

วิธีตรวจสอบว่าติดตั้ง Jekyll อย่างถูกต้อง

ในการตรวจสอบว่า Jekyll ได้รับการติดตั้งอย่างถูกต้องบนเครื่องของคุณ ให้เปิดเทอร์มินัลแล้วรันคำสั่งต่อไปนี้:

 jekyll -v

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

คำสั่งและการกำหนดค่าของ Jekyll

ก่อนที่เราจะเริ่มสร้างและปรับแต่งไซต์แบบสแตติกด้วย Jekyll ควรทำความคุ้นเคยกับคำสั่ง CLI และพารามิเตอร์ไฟล์การกำหนดค่าต่างๆ

คำสั่ง Jekyll CLI

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

• jekyll build : สร้างไซต์แบบคงที่ในไดเร็กทอรี _site
• jekyll serve : สร้างไซต์และเริ่มเว็บเซิร์ฟเวอร์บนเครื่องท้องถิ่นของคุณ ทำให้คุณสามารถดูตัวอย่างไซต์ในเบราว์เซอร์ของคุณที่ http://localhost:4000
• jekyll new [site name] : สร้างไซต์ Jekyll ใหม่ในไดเร็กทอรีใหม่พร้อมชื่อไซต์ที่ระบุ
• jekyll doctor : แสดงผลปัญหาการกำหนดค่าหรือการพึ่งพาใด ๆ ที่อาจมีอยู่
• jekyll clean : ลบไดเร็กทอรี _site ซึ่งเป็นที่เก็บไฟล์ไซต์ที่สร้างขึ้น
• jekyll help : แสดงเอกสารวิธีใช้สำหรับ Jekyll
• jekyll serve --draft : สร้างและให้บริการไซต์ Jekyll ของคุณ รวมถึงโพสต์ใดๆ ที่อยู่ในไดเร็กทอรี _drafts

คุณยังสามารถผนวกตัวเลือกบางอย่างเข้ากับคำสั่งเหล่านี้ได้อีกด้วย ดูรายการคำสั่งและตัวเลือกทั้งหมดของ Jekyll ในเอกสารประกอบของ Jekyll

ไฟล์การกำหนดค่า Jekyll

ไฟล์กำหนดค่า Jekyll เป็นไฟล์ YAML ชื่อ _config.yml ที่มีการตั้งค่าและตัวเลือกสำหรับไซต์ Jekyll ของคุณ ใช้เพื่อกำหนดค่าด้านต่างๆ ของไซต์ของคุณ รวมถึงชื่อไซต์ คำอธิบาย URL และการตั้งค่าอื่นๆ

ต่อไปนี้คือตัวเลือกการกำหนดค่าที่ใช้บ่อยที่สุดบางส่วน:

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

คุณยังสามารถสร้างตัวแปรที่กำหนดเองในไฟล์การกำหนดค่าและใช้ในเทมเพลต เลย์เอาต์ และการรวมของไซต์ ตัวอย่างเช่น คุณสามารถสร้างตัวแปรชื่อ author_name แล้วใช้ในเทมเพลตของคุณดังนี้: {{ site.author_name }}

หากต้องการแก้ไขไฟล์การกำหนดค่า Jekyll ของคุณ ให้เปิดไฟล์ _config.yml ในไดเร็กทอรีโปรเจ็กต์ Jekyll ของคุณในโปรแกรมแก้ไขข้อความและทำการเปลี่ยนแปลง

หมายเหตุ: การเปลี่ยนแปลงใดๆ ที่คุณทำกับไฟล์การกำหนดค่าจะมีผลในครั้งต่อไปที่คุณสร้างไซต์ของคุณด้วย jekyll build หรือ jekyll serve

คุณสร้างเว็บไซต์คงที่บน Jekyll ได้อย่างไร

ตอนนี้คุณได้ติดตั้ง Jekyll ไว้ในเครื่องแล้ว ตอนนี้คุณสามารถสร้างเว็บไซต์คงที่ของ Jekyll ด้วยคำสั่งเดียวภายในไม่กี่วินาที เปิดเทอร์มินัลของคุณและเรียกใช้คำสั่งนี้:

 jekyll new joels-blog

ให้แน่ใจว่าคุณแทนที่ “joels-blog” ด้วยชื่อไซต์ที่คุณต้องการ

จากนั้นไปที่โฟลเดอร์เว็บไซต์ คุณจะสังเกตเห็นโครงสร้างเว็บไซต์ Jekyll พื้นฐานที่มีไดเร็กทอรีและไฟล์ต่างๆ ดังต่อไปนี้:

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

ไดเร็กทอรีและไฟล์เหล่านี้มีไว้เพื่ออะไร:

• _config.yml: ไฟล์การกำหนดค่า Jekyll ที่มีการตั้งค่าและตัวเลือกของไซต์ของคุณ
• _posts: ไดเร็กทอรีที่มีเนื้อหาของไซต์ของคุณ (สามารถเป็นบล็อกโพสต์ได้) ไฟล์เหล่านี้อาจเป็นไฟล์ Markdown หรือ HTML ที่มีหลักการตั้งชื่อไฟล์เฉพาะ: YEAR-MONTH-DAY-title.MARKUP
• Gemfile และ Gemfile.lock: Bundler ใช้ไฟล์เหล่านี้เพื่อจัดการ Ruby gems ที่เว็บไซต์ของคุณใช้
• index.md: หน้าแรกเริ่มต้นสำหรับไซต์ของคุณ สร้างจากไฟล์ Markdown หรือ HTML

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

• _includes: ไดเร็กทอรีที่มี HTML snippets ที่นำกลับมาใช้ใหม่ได้ ซึ่งรวมอยู่ในเลย์เอาต์และเพจของคุณ เช่น navbar ส่วนท้าย ฯลฯ
• _layouts: ไดเร็กทอรีที่มีเทมเพลตเลย์เอาต์ HTML ที่กำหนดโครงสร้างของเพจของคุณ
• สินทรัพย์: ไดเร็กทอรีที่มีไฟล์ใดๆ ที่ไซต์ของคุณใช้ เช่น รูปภาพและไฟล์ CSS
• _sass: ไดเร็กทอรีที่มีไฟล์ Sass ซึ่งสามารถใช้สร้าง CSS สำหรับไซต์ของคุณได้

โครงสร้างไฟล์นี้เป็นรากฐานที่มั่นคงสำหรับโครงการ Jekyll แต่คุณสามารถแก้ไขได้ตามต้องการเพื่อให้เหมาะกับความต้องการเฉพาะของโครงการของคุณ

ตัวเลือกเริ่มต้นอย่างรวดเร็ว: ใช้เทมเพลต GitHub ของเรา

แทนที่จะเริ่มโครงการของคุณโดยใช้ Jekyll CLI คุณสามารถสร้างที่เก็บ Git โดยใช้เทมเพลต Jekyll “Hello World” ของ Kinsta บน GitHub เลือก ใช้เทมเพลตนี้ > สร้างที่เก็บใหม่ เพื่อคัดลอกรหัสเริ่มต้นไปยังที่เก็บใหม่ภายในบัญชี GitHub ของคุณเอง

วิธีดูตัวอย่างไซต์ Jekyll

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

 jekyll serve

สิ่งนี้จะสร้างโฟลเดอร์ _site ที่มีไฟล์สแตติกทั้งหมดที่สร้างจากโครงการของคุณ นอกจากนี้ยังจะเริ่มต้นเซิร์ฟเวอร์ Jekyll และคุณสามารถดูตัวอย่างไซต์ของคุณผ่าน http://localhost:4000

หากคุณไปที่ URL ในเว็บเบราว์เซอร์ของคุณ คุณควรเห็นไซต์ Jekyll ของคุณที่มีธีมย่อส่วน:

วิธีปรับแต่งไซต์ Jekyll

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

Front Matter ทำงานอย่างไรใน Jekyll

เมื่อคุณเปิดแต่ละหน้าหรือบล็อกโพสต์ของโฟลเดอร์โครงการ คุณจะสังเกตเห็นกลุ่มข้อมูลภายในสามขีดกลาง (—) ที่ด้านบนของหน้า สิ่งนี้เรียกว่า เรื่องส่วนหน้า

เป็นรูปแบบข้อมูลเมตาที่ใช้ใน Jekyll เพื่อเก็บข้อมูลเกี่ยวกับเพจหรือโพสต์ — สามารถเขียนได้ทั้ง YAML หรือ JSON

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

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

Jekyll parse เป็นส่วนสำคัญและใช้เพื่อสร้างเอาต์พุต HTML สำหรับไซต์ของคุณ คุณสามารถใช้ส่วนหน้าเพื่อระบุตัวเลือกต่างๆ เช่น เค้าโครง ลิงก์ถาวร สถานะการเผยแพร่ เป็นต้น

วิธีกำหนดค่า Front Matter เริ่มต้น

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

โครงสร้างของมันซับซ้อนเล็กน้อย แต่นี่คือสิ่งที่จะมีลักษณะ วางสิ่งนี้ไว้ใต้การกำหนดค่าล่าสุดในไฟล์ _config.yml ของคุณ:

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

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

หมายเหตุ: เมื่อคุณไม่กำหนดพาธ ไฟล์ทั้งหมดจะใช้ค่าส่วนหน้าที่กำหนดไว้

การสร้างเพจใน Jekyll

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

ตัวอย่างเช่น หากคุณต้องการสร้างเพจที่มี URL https://example.com/about ให้สร้างไฟล์ชื่อ about.htm l หรือ about.md นามสกุลไฟล์กำหนดภาษามาร์กอัปที่จะใช้สำหรับเนื้อหาของหน้า (HTML หรือ Markdown)

เมื่อคุณสร้างไฟล์แล้ว ให้เพิ่มส่วนหน้าและเนื้อหาที่เหมาะสม บันทึกไฟล์และรีเฟรชไซต์ Jekyll ของคุณในเบราว์เซอร์ หน้าใหม่ควรสามารถเข้าถึงได้ที่ URL ที่ตรงกับชื่อไฟล์

การสร้างเค้าโครงใน Jekyll

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

ขั้นตอนแรกคือการสร้างโฟลเดอร์ _layouts ในไดเรกทอรีรากของโปรเจ็กต์ของคุณ จากนั้นสร้างไฟล์สำหรับแต่ละเค้าโครง — ไฟล์ควรมีชื่อที่สื่อความหมายซึ่งสะท้อนถึงวัตถุประสงค์ของเค้าโครง ตัวอย่างเช่น คุณอาจสร้างไฟล์ชื่อ page.htm l เพื่อกำหนดเค้าโครงหน้าสำหรับทุกหน้าในไซต์ของคุณ

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

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

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

ในตัวอย่างนี้ ตัวยึดตำแหน่ง {{ page.title }} และ {{ content }} จะถูกแทนที่ด้วยชื่อจริงและเนื้อหาของเพจที่กำลังแสดงผล

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

วิธีการทำงานของโฟลเดอร์ _includes ใน Jekyll

โฟลเดอร์ _includes มีข้อมูลโค้ดที่ใช้ซ้ำได้ ซึ่งคุณสามารถรวมไว้ในส่วนต่างๆ ของเว็บไซต์ได้ ตัวอย่างเช่น คุณสามารถสร้างไฟล์ navbar.html ในโฟลเดอร์ include และเพิ่มลงในไฟล์เค้าโครง page.html โดยใช้แท็ก {% include %}

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

ในขณะที่สร้าง Jekyll จะแทนที่แท็กด้วยเนื้อหาของ navbar.html

โฟลเดอร์ _includes สามารถมีไฟล์ประเภทใดก็ได้ เช่น ไฟล์ HTML, Markdown หรือ Liquid เป้าหมายหลักคือการทำให้รหัสของคุณแห้ง (อย่าทำซ้ำตัวเอง) โดยอนุญาตให้คุณใช้รหัสซ้ำทั่วทั้งไซต์ของคุณ

วนซ้ำผ่านโพสต์ใน Jekyll

คุณอาจต้องการสร้างหน้าบล็อกเฉพาะเพื่อเก็บโพสต์บล็อกทั้งหมดของคุณ ซึ่งหมายความว่าคุณต้องการดึงโพสต์ทั้งหมดบนไซต์ของคุณและวนซ้ำ ด้วย Jekyll คุณสามารถบรรลุผลได้ง่ายๆ โดยใช้แท็ก {% for %}

โพสต์ทั้งหมดบนเว็บไซต์ของ Jekyll จะถูกเก็บไว้ในตัวแปร site.posts คุณสามารถวนซ้ำและใช้ตัวแปร Liquid {{ post.title }} เพื่อส่งออกชื่อของแต่ละโพสต์ด้วยวิธีนี้:

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

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

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

โปรดสังเกตว่าในตัวอย่างด้านบน วันที่ Liquid filter จัดรูปแบบวันที่ของโพสต์แต่ละรายการในรูปแบบที่มนุษย์สามารถอ่านได้มากขึ้น

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

วิธีเพิ่มธีมในไซต์ Jekyll

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

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

หากต้องการเพิ่มธีมตามอัญมณี ให้เปิดไฟล์อัญมณีในไซต์ของคุณและเพิ่มอัญมณีสำหรับธีมที่คุณต้องการใช้ ธีมที่เราจะใช้คือ jekyll-theme-clean-blog คุณสามารถแทนที่ธีม minima เริ่มต้นใน Gemfile:

 gem "jekyll-theme-clean-blog"

เรียกใช้คำสั่ง bundle install ในไดเร็กทอรีของไซต์ของคุณเพื่อติดตั้ง gem ของธีมและการอ้างอิง

ในไฟล์ _config.yml ของไซต์ของคุณ ให้เพิ่มบรรทัดต่อไปนี้เพื่อระบุธีมที่คุณต้องการใช้:

 theme: jekyll-theme-clean-blog

ณ จุดนี้ ธีมของคุณพร้อมใช้งานแล้ว

คุณจะต้องลบเลย์เอาต์ทั้งหมดในไดเร็กทอรี _layouts เพื่อหลีกเลี่ยงไม่ให้โอเวอร์เลย์เอาต์ของธีม

จากนั้น คุณสามารถค้นหาชื่อเลย์เอาต์สำหรับไฟล์ของคุณได้ในเอกสารประกอบของธีม ตัวอย่างเช่น หากคุณใช้ธีม jekyll-theme-clean-blog ชื่อเลย์เอาต์สำหรับไฟล์ index.html คือ home หน้าอื่นๆ คือ page และโพสต์ทั้งหมดคือ post

สุดท้าย เรียกใช้ jekyll serve เพื่อสร้างและให้บริการไซต์ของคุณโดยใช้ธีมใหม่

แค่นั้นแหละ! ไซต์ Jekyll ของคุณควรใช้ธีมใหม่ตามอัญมณีที่คุณเพิ่มเข้าไป คุณสามารถปรับแต่งธีมเพิ่มเติมได้โดยแก้ไขเค้าโครงในไดเร็กทอรี _layouts ของไซต์ของคุณ

ปรับแต่งธีม Jekyll

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

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

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

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

ทำเช่นนี้กับเพจและโพสต์ทั้งหมด แล้วเพจของคุณจะมีลักษณะดังนี้:

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

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

เมื่อคุณบันทึกโครงการ คุณจะสังเกตเห็นว่าตัวเลือกการนำทางจะถูกปรับแต่ง:

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

สร้างไฟล์ posts.html และวางโค้ดต่อไปนี้:

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

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

วิธีเพิ่มเนื้อหาไปยังไซต์ Jekyll

ตอนนี้คุณได้สร้างไซต์ Jekyll และกำหนดค่าไซต์ให้ตรงกับความต้องการของคุณแล้ว ขั้นตอนสุดท้ายคือการเพิ่มเนื้อหาหรือเรียนรู้วิธีเพิ่มเนื้อหาลงในไซต์ Jekyll

เนื้อหาทั้งหมดถูกเก็บไว้ในโฟลเดอร์ _posts เนื้อหาแต่ละรายการจะจัดเก็บไว้ในไฟล์ที่มีหลักการตั้งชื่อคล้ายกันคือ YYYY-MM-DD-title.md (หรือ .html สำหรับไฟล์ HTML) ตัวอย่างเช่น หากคุณต้องการสร้างโพสต์ชื่อ “My First Post” ให้สร้าง 2023-03-08-my-first-post.md ในไดเร็กทอรี _posts

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

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

จากนั้นคุณสามารถเพิ่มเนื้อหาของคุณใต้บล็อกส่วนหน้าด้วยแท็ก HTML หรือไวยากรณ์มาร์กดาวน์

บันทึกไฟล์แล้ว Jekyll จะสร้างและรวมไว้ในไซต์ของคุณโดยอัตโนมัติ

วิธีปรับใช้ไซต์ Jekyll ของคุณบน Kinsta

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

ข้อกำหนดเบื้องต้น: การกำหนดค่าไซต์ Jekyll ของคุณ

ตรวจสอบไฟล์ Gemfile.lock ของคุณและตรวจสอบให้แน่ใจว่ามีแพลตฟอร์มสำหรับอุปกรณ์ทั้งหมด เพื่อให้แน่ใจว่าแพลตฟอร์มทั้งหมดได้รับการกำหนดค่าอย่างถูกต้อง ให้รันคำสั่งต่อไปนี้:

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

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

 web: bundle exec jekyll build && ruby -run -e httpd _site

ส่งไซต์ Jekyll ของคุณไปที่ GitHub

สำหรับบทความนี้ เราจะใช้คำสั่ง Git เพื่อพุชโค้ดของคุณไปที่ GitHub ขั้นแรก สร้างที่เก็บบน GitHub; ซึ่งจะทำให้คุณเข้าถึง URL ของที่เก็บได้

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

 git init

ตอนนี้เพิ่มรหัสของคุณไปยังที่เก็บ Git ในเครื่องโดยใช้คำสั่งต่อไปนี้:

 git add

ตอนนี้คุณสามารถยืนยันการเปลี่ยนแปลงของคุณโดยใช้คำสั่งต่อไปนี้:

 git commit -m "my first commit"

หมายเหตุ: คุณสามารถแทนที่ “การกระทำครั้งแรกของฉัน” ด้วยข้อความสั้น ๆ ที่อธิบายถึงการเปลี่ยนแปลงของคุณ

สุดท้าย พุชโค้ดของคุณไปที่ GitHub โดยใช้คำสั่งต่อไปนี้:

 git remote add origin [repository URL] git push -u origin master

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณแทนที่ “[repository URL]” ด้วย URL ที่เก็บ GitHub ของคุณเอง

เมื่อคุณทำตามขั้นตอนเหล่านี้เสร็จแล้ว โค้ดของคุณจะถูกส่งไปที่ GitHub และสามารถเข้าถึงได้ผ่าน URL ของที่เก็บของคุณ ตอนนี้คุณสามารถปรับใช้กับ Kinsta ได้แล้ว!

การปรับใช้ไซต์ Jekyll ของคุณกับ Kinsta

การปรับใช้กับ Kinsta เกิดขึ้นในไม่กี่นาที เริ่มต้นที่แดชบอร์ด My Kinsta เพื่อเข้าสู่ระบบหรือสร้างบัญชีของคุณ ถัดไป คุณจะอนุญาต Kinsta บน GitHub

จากนั้นคุณสามารถทำตามขั้นตอนเหล่านี้เพื่อปรับใช้ไซต์ Jekyll ของคุณ:

1. คลิก Applications บนแถบด้านข้างซ้าย
2. คลิก เพิ่มบริการ
3. คลิก แอปพลิเค ชันจากดร็อปดาวน์

โมดอลจะปรากฏขึ้นซึ่งคุณสามารถเลือกที่เก็บที่คุณต้องการปรับใช้ เลือกสาขาที่คุณต้องการปรับใช้หากคุณมีหลายสาขาในพื้นที่เก็บข้อมูลของคุณ

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

แอปพลิเคชันของคุณจะเริ่มปรับใช้ ภายในไม่กี่นาที จะมีลิงก์สำหรับเข้าถึงเว็บไซต์ของคุณในเวอร์ชันที่ใช้งานจริง ในกรณีนี้คือ: https://myblog-84b54.kinsta.app/

สรุป

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

ระบบเทมเพลตที่ใช้งานง่ายของ Jekyll เทมเพลตเหลว และการสนับสนุนในตัวสำหรับมาร์กดาวน์และภาษามาร์กอัปอื่นๆ ทำให้การสร้างและจัดการไซต์ที่มีเนื้อหาหลากหลายเป็นเรื่องง่ายและรวดเร็ว

อย่าลังเลที่จะโฮสต์เว็บไซต์คงที่ทั้งหมดของคุณด้วย Application Hosting ของ Kinsta ฟรี และถ้าคุณชอบ ก็เลือกใช้แผน Hobby Tier ของเรา เริ่มต้นที่ $7/เดือน

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