ลองใช้ Vitepress ในการสร้าง Documentation

MAY 18, 2024

แนะนำ Vitepress

Vitepress เป็น Static Site Generator (SSG) ที่สร้างขึ้นโดยใช้ Vite และ Vue.js ซึ่งถูกออกแบบมาเพื่อการสร้างเอกสารที่ง่ายและรวดเร็ว มีคุณสมบัติที่ช่วยให้การพัฒนาเอกสารสะดวกและมีประสิทธิภาพมากยิ่งขึ้น

ทำไมต้องใช้ Vitepress?

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

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

เริ่มต้นด้วยการสร้างโปรเจคใหม่หรือเข้าไปที่โปรเจคที่ต้องการเพิ่มเอกสาร
ติดตั้ง Vitepress โดยใช้คำสั่ง npm install vitepress --save-dev
สร้างโฟลเดอร์และไฟล์เริ่มต้นสำหรับ Vitepress เช่น docs/index.md และลองเขียน Markdown ลงไป ดังตัวอย่างด้านล่าง

เพิ่มไฟล์ config.js ในโฟลเดอร์ docs โดยใส่โค้ดด้านล่าง โดย config.js จะเป็นไฟล์ที่ใช้กำหนดค่าต่างๆ ของ Vitepress ได้ ดังรูป

เพิ่มสคริปต์ใน package.json เพื่อเริ่มต้น Vitepress
```
"scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs"
}
```
เริ่มการพัฒนาเอกสารด้วยคำสั่ง npm run docs:dev

http://localhost:5173

สรุป

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

References & Resources

https://vitepress.dev/