วิธีการเขียน Blog ด้วย Jekyll

💎 หลักการทำงานของ Jekyll

Jekyll เป็น Static Site Generator ที่ใช้ภาษา Ruby ซึ่งเป็นวิธีที่ยอดเยี่ยมในการสร้างเว็บไซต์แบบ Static ที่รวดเร็วและปลอดภัยครับ

Jekyll รับไฟล์ต้นฉบับที่คุณเขียนด้วยภาษา **Markdown** และ **Liquid Template** มาแปลงเป็นไฟล์ HTML, CSS, และ JavaScript ที่พร้อมใช้งานทันที:

• Input: คุณเขียนไฟล์ Markdown (สำหรับ Content) และไฟล์ HTML/Liquid (สำหรับ Layout และ Design)
• Process: Jekyll ประมวลผลไฟล์เหล่านี้ตามกฎและโครงสร้างที่คุณกำหนด
• Output: Jekyll สร้างเว็บไซต์สำเร็จรูปในโฟลเดอร์ _site ซึ่งประกอบด้วยไฟล์ Static ล้วน ๆ ที่สามารถให้บริการโดย Web Server ทั่วไปได้ทันที

🛠️ โครงสร้างไฟล์หลักของ Jekyll

โปรเจกต์ Jekyll มีโครงสร้างโฟลเดอร์ที่ชัดเจนซึ่งทำให้ง่ายต่อการจัดการ:

• _config.yml: ไฟล์การตั้งค่าหลักสำหรับเว็บไซต์ของคุณ กำหนดชื่อเว็บไซต์, คำอธิบาย, URL, และตัวแปรอื่น ๆ
• _posts: โฟลเดอร์ที่เก็บไฟล์บทความทั้งหมด ไฟล์จะต้องมีรูปแบบการตั้งชื่อเฉพาะ: YEAR-MONTH-DAY-title-of-post.md
• _layouts: โฟลเดอร์ที่เก็บ Template หลักของหน้าเว็บ เช่น default.html, post.html, page.html เพื่อห่อหุ้มเนื้อหา
• _includes: โฟลเดอร์ที่เก็บชิ้นส่วนโค้ดที่สามารถนำไปใช้ซ้ำได้ เช่น Header, Footer, Navigation Bar
• _sass: โฟลเดอร์ที่เก็บไฟล์ Sass/SCSS สำหรับการจัดการ CSS
• index.html หรือ index.markdown: ไฟล์หน้าแรกของเว็บไซต์

📝 ขั้นตอนการเขียน Blog Post ด้วย Jekyll

การสร้างบทความใหม่ใน Jekyll เป็นขั้นตอนที่ง่ายและไม่ยุ่งยากครับ:

1. สร้างไฟล์บทความ

สร้างไฟล์ใหม่ในโฟลเดอร์ _posts และตั้งชื่อไฟล์ตามรูปแบบที่กำหนด

ตัวอย่าง: 2025-11-20-how-to-write-jekyll-blog.md

2. เขียน Front Matter

Front Matter คือส่วนหัวของไฟล์ที่เขียนด้วยภาษา YAML และถูกล้อมด้วยเส้นประสามขีด (---) มันใช้กำหนดตัวแปรของบทความ เช่น Layout, Title, และ Date

---
layout: post
title: “วิธีการเขียน Blog ด้วย Jekyll”
date: 2025-11-20 13:00:00 +0700
categories: [tutorial, tech]
tags: [jekyll, markdown]
published: true
---

3. เขียนเนื้อหา (Content)

หลังจากส่วน Front Matter คุณสามารถเขียนเนื้อหาบทความของคุณด้วยภาษา Markdown ได้ทันที:

บทนำ

ยินดีต้อนรับสู่บทความเกี่ยวกับการเขียน Blog ด้วย Jekyll!

• ใช้ **Markdown**: ง่ายต่อการจัดรูปแบบ
• **Build เร็ว**: แปลงเป็นไฟล์ HTML ทันที

โค้ดตัวอย่าง

คุณสามารถใส่โค้ดบล็อกได้ง่าย ๆ:

def greet(name)
  puts “Hello, #{name}!”
end

4. รันและดูตัวอย่าง (Serve Locally)

ก่อนที่จะ Deploy คุณควรรัน Jekyll บนเครื่องของคุณเพื่อดูตัวอย่างการเปลี่ยนแปลง:

bundle exec jekyll serve

จากนั้นเปิด Browser ไปที่ http://localhost:4000 เพื่อดู Blog จบครับ!