📚 Personal-Project-Blog: Code Pai Rueay (โค้ดไปเรื่อย)

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

🚀 เทคโนโลยีหลัก (Tech Stack)

โปรเจกต์นี้ใช้เทคโนโลยี Static Site Generator เพื่อความเร็วและประสิทธิภาพสูง

• VitePress: เครื่องมือสร้างเว็บไซต์ Static Site Generator (SSG) สำหรับ Documentation และ Blog
• Vue.js: Framework พื้นฐานที่ VitePress ใช้
• Markdown: ใช้สำหรับเขียนเนื้อหาบทความทั้งหมด
• Deployment: Vercel (CI/CD Auto Deploy)

🛠️ การติดตั้งและเริ่มต้นใช้งาน (Getting Started)

หากคุณต้องการ Clone โปรเจกต์นี้เพื่อศึกษาโครงสร้าง หรือทดลองรันบน Local Environment คุณสามารถทำตามขั้นตอนเหล่านี้

Prerequisites

โปรเจกต์นี้ต้องการติดตั้ง Node.js (แนะนำเวอร์ชัน 18 ขึ้นไป) และ npm/yarn/pnpm

1. Clone Repository

git clone https://github.com/Chafik-Rd/Personal-Project-Blog.git

cd Personal-Project-Blog

2. ติดตั้ง Dependencies

ติดตั้ง Packages ที่จำเป็นทั้งหมดที่ระบุใน package.json

npm install
# หรือ
yarn install

3. รันบน Local Environment (Development)

คำสั่งนี้ใช้สำหรับรันเว็บไซต์ในโหมดพัฒนา เพื่อดูการเปลี่ยนแปลงแบบ Real-time บนเครื่องของคุณ

npm run docs:dev

4. Build สำหรับ Production

คำสั่งนี้จะสร้างไฟล์ Static HTML/CSS/JS ทั้งหมดในโฟลเดอร์ .vitepress/dist

npm run docs:build

📂 โครงสร้างโฟลเดอร์ (Project Structure)

นี่คือโครงสร้างหลักของโปรเจกต์ที่ใช้ในการจัดการเนื้อหา:

Personal-Project-Blog/
├── .vitepress/          # ⚙️ การตั้งค่าทั้งหมดของ VitePress
│   ├── config.ts        # ไฟล์กำหนด Navbar, Sidebar, และข้อมูล Site
│   └── theme/           # ไฟล์สำหรับปรับแต่ง Theme
├── blogs/               # 📝 โฟลเดอร์เก็บไฟล์บทความทั้งหมด (.md)
│   └── git-basic.md     # บทความ: Git พื้นฐานสำหรับมือใหม่
├── package.json         # กำหนด Dependencies และ Scripts
└── README.md            # ไฟล์ที่คุณกำลังอ่านอยู่!

✍️ การเพิ่มบทความใหม่ (Adding New Content)

การเพิ่มบทความใหม่ทำได้ง่าย ๆ เพียง:

1. สร้างไฟล์ Markdown (.md) ในโฟลเดอร์ /blogs (เช่น my-new-topic.md)

2. เพิ่มลิงก์ของบทความใหม่เข้าไปในไฟล์ .vitepress/config.ts ในส่วน sidebar

3. Commit และ Push! (GitHub Actions/Vercel จะ Deploy ให้โดยอัตโนมัติ)

ตัวอย่าง Commit Message ที่แนะนำ:

feat(blog): publish new post 'Advanced CSS Grid'